/* =========================================================================
   VIETTA — Lớp đồng bộ giao diện cho các template MẶC ĐỊNH của Sapo
   (page nội dung, liên hệ, blog/bài viết, tìm kiếm, danh mục hệ thống).
   Mục tiêu: các trang này nhìn cùng "ngôn ngữ" với các trang đã restyle
   (trang chủ, /collections/all, landing phân khúc, trang sản phẩm).
   Xem DESIGN.md mục 3 & 6.
   Được nạp CUỐI cùng trong <head> (sau responsive.css) để override CSS gốc.
   ========================================================================= */

/* --- Token dùng chung: link trong nội dung = đỏ VIETTA (trước là cam/lam) --- */
:root {
	--link-color: var(--primary-color);
	--link-color-hover: #b01030;
}

/* --- Tiêu đề trang nội dung: in HOA, đỏ, gạch chân ngắn --- */
.title_page {
	text-transform: uppercase;
	color: var(--primary-color);
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: .5px;
	line-height: 1.3;
}
.title_page::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	border-radius: 2px;
	background: var(--primary-color);
	margin: 12px 0 0;
}
.title_page.text-center::after,
.text-center > .title_page::after {
	margin-left: auto;
	margin-right: auto;
}

/* --- Heading phụ (dùng chung: "Liên hệ với chúng tôi", "N kết quả tìm kiếm"...) --- */
.title-head {
	text-transform: uppercase;
	color: var(--text-color);
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: .3px;
}

/* --- Nội dung RTE (mô tả trang, bài viết) --- */
.rte a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 2px; }
.rte a:hover { color: #b01030; }
.rte h2 { font-size: 1.5rem; font-weight: 700; color: var(--text-color); margin: 1.4em 0 .6em; }
.rte h3 { font-size: 1.2rem; font-weight: 600; color: var(--text-color); margin: 1.2em 0 .5em; }
.rte p, .rte li { line-height: 1.75; }

/* --- Trang liên hệ: info + form + nút về chuẩn VIETTA --- */
.page_contact .single-contact {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}
.page_contact .single-contact i {
	color: var(--primary-color);
	width: 16px;
	text-align: center;
	margin-top: 3px;
}
.page_contact .single-contact .content { color: var(--text-color); }
.page_contact .form-control {
	border: 1px solid #d9dee0;
	border-radius: 6px;
	padding: 11px 14px;
	font-size: .95rem;
	height: auto;
	color: var(--text-color);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.page_contact .form-control:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(220, 20, 60, .12);
}
.page_contact .form-signup .btn,
.page_contact .btn.btn-main,
.page_contact button.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--primary-color);
	color: #fff !important;
	border: 1px solid var(--primary-color);
	border-radius: 10px;
	height: 48px;
	min-width: 220px;
	padding: 0 28px;
	margin: 0;
	font-weight: 700;
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .3px;
	box-shadow: none;
	position: relative;
	transition: background-color .16s ease, border-color .16s ease;
}
/* Bỏ thanh gạch đỏ dưới của .btn-style1 (tạo cảm giác viền kép) */
.page_contact .btn-style1::before { display: none !important; }
.page_contact .form-signup .btn:hover,
.page_contact .btn.btn-main:hover,
.page_contact button.btn:hover {
	background: #b01030;
	border-color: #b01030;
	box-shadow: none;
	color: #fff !important;
}

/* --- Blog / bài viết --- */
.blogpage .blogwp h3 a.link { color: var(--text-color); font-weight: 600; }
.blogpage .blogwp h3 a.link:hover { color: var(--primary-color); }
.blogpage .blogwp .art-summary { color: var(--text-secondary-color); }
.blogpage .aside-title {
	text-transform: uppercase;
	font-weight: 800;
	font-size: .95rem;
	letter-spacing: .3px;
	color: var(--text-color);
}
.blogpage .article-content,
.blogpage .article-content p,
.blogpage .article-content li { font-size: 1rem; line-height: 1.75; color: var(--text-color); }

/* --- Trang tìm kiếm: chừa khoảng thở dưới breadcrumb --- */
.search-main .title-head { margin-top: 8px; margin-bottom: 18px; }

@media (max-width: 767px) {
	.title_page { font-size: 1.35rem; }
	.page_contact .form-signup .btn,
	.page_contact .btn.btn-main,
	.page_contact button.btn { width: 100%; min-width: 0; }
}

/* =========================================================================
   Nhịp dọc toàn site — giảm khoảng cách giữa các khối.
   Nguyên nhân gốc: EGA đặt `section { margin-bottom: 6.25rem }` (=100px) cho MỌI <section>,
   cộng thêm padding riêng của từng khối → nội dung cách nhau 130–165px, quá rời rạc.
   Đưa về ~28px margin; các khối đã có padding tự lo nhịp.
   ========================================================================= */
section { margin-bottom: 28px; }

/* Trang chủ: wrapper tự quản padding 24px → hai khối liền nhau cách ~48px */
.page-homepage > .section { margin-bottom: 0; padding-top: 24px; padding-bottom: 24px; }
.page-homepage > .section-section_slider { padding-top: 0; padding-bottom: 0; }
.page-homepage > .section-section_home_policies { padding-top: 0; padding-bottom: 0; }

/* Landing/collection VIETTA: section con sát nhau hơn (còn ~20px) */
.vietta-coll > section { margin-bottom: 20px; }

/* Trang sản phẩm: các khối nội dung gần nhau */
.vietta-product .vietta-section { margin-bottom: 0; padding-top: 28px; padding-bottom: 28px; }
.vietta-product .vietta-layout { padding-bottom: 36px; }

/* Trang liên hệ: chừa khoảng vừa phải trước footer */
.page_contact { margin-bottom: 28px; }

@media (max-width: 991px) {
	section { margin-bottom: 16px; }
	.vietta-coll > section { margin-bottom: 14px; }
	.page-homepage > .section { padding-top: 20px; padding-bottom: 20px; }
}

/* =========================================================================
   CTA banner "CHƯA BIẾT CHỌN MẪU NÀO?" — dùng ảnh dang_ky.jpg làm NỀN,
   thông tin + nút đè lên trên. Ảnh có chủ thể (người + xe) bên TRÁI nên
   dồn nội dung về PHẢI; thêm lớp gradient trắng bên phải cho chữ dễ đọc.
   Áp cho cả bản collection/landing (.vietta-coll__cta-inner) và bản sản
   phẩm (.vietta-cta-banner__inner). Dùng specificity cao hơn để thắng CSS
   gốc nạp sau trong <body>. Xem DESIGN.md.
   ========================================================================= */
.vietta-coll .vietta-coll__cta-inner--bg,
.vietta-product .vietta-cta-banner__inner--bg {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	text-align: right;
	gap: 18px;
	min-height: 300px;
	padding: 40px;
	background-color: transparent;
	background-size: cover;
	background-position: left center;
	background-repeat: no-repeat;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
}
.vietta-coll .vietta-coll__cta-inner--bg::before,
.vietta-product .vietta-cta-banner__inner--bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.5) 60%, rgba(255,255,255,.8) 100%);
}
.vietta-coll .vietta-coll__cta-inner--bg .vietta-coll__cta-img,
.vietta-product .vietta-cta-banner__inner--bg .vietta-cta-banner__img { display: none; }
.vietta-coll .vietta-coll__cta-inner--bg .vietta-coll__cta-text,
.vietta-product .vietta-cta-banner__inner--bg .vietta-cta-banner__text {
	position: relative;
	z-index: 2;
	max-width: 560px;
	margin-left: auto;
}
.vietta-coll .vietta-coll__cta-inner--bg .vietta-coll__cta-desc { margin-left: auto; }
.vietta-coll .vietta-coll__cta-inner--bg .vietta-coll__cta-actions,
.vietta-product .vietta-cta-banner__inner--bg .vietta-cta-banner__actions {
	position: relative;
	z-index: 2;
	flex-direction: row;
	justify-content: flex-end;
	flex-wrap: wrap;
}

@media (max-width: 767px) {
	.vietta-coll .vietta-coll__cta-inner--bg,
	.vietta-product .vietta-cta-banner__inner--bg {
		align-items: flex-start;
		text-align: left;
		justify-content: flex-end;
		gap: 14px;
		min-height: 340px;
		padding: 24px;
	}
	.vietta-coll .vietta-coll__cta-inner--bg .vietta-coll__cta-text,
	.vietta-product .vietta-cta-banner__inner--bg .vietta-cta-banner__text { margin-left: 0; }
	.vietta-coll .vietta-coll__cta-inner--bg::before,
	.vietta-product .vietta-cta-banner__inner--bg::before {
		background: linear-gradient(180deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.72) 55%, rgba(255,255,255,.92) 100%);
	}
	.vietta-coll .vietta-coll__cta-inner--bg .vietta-coll__cta-actions,
	.vietta-product .vietta-cta-banner__inner--bg .vietta-cta-banner__actions {
		width: 100%;
		flex-direction: column;
		justify-content: stretch;
	}
}

/* =========================================================================
   Dải video khách hàng — cuộn NGANG (dùng cho landing phân khúc).
   Cùng form với "VIDEO TRẢI NGHIỆM" trang sản phẩm (assets/vietta-product.css);
   khai báo bản dùng chung ở đây vì landing không nạp vietta-product.css.
   ========================================================================= */
.vietta-video-scroll { position: relative; }
.vietta-video-rail {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 16px;
	padding: 4px 2px 12px;
	scroll-behavior: smooth;
	scrollbar-width: thin;
}
.vietta-video-rail::-webkit-scrollbar { height: 8px; }
.vietta-video-rail::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 4px; }
.vietta-video-rail::-webkit-scrollbar-track { background: #f2f2f2; border-radius: 4px; }
.vietta-video-rail > * {
	flex: 0 0 calc((100% - 32px) / 3);
	max-width: calc((100% - 32px) / 3);
	width: auto;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}
.vietta-video-rail .vietta-video-status { flex: 0 0 100%; max-width: 100%; }
.vietta-video-rail .blog-card { height: 100%; }
.vietta-video-rail .blog-card__thumb { aspect-ratio: 16 / 9; }
.vietta-video-rail .blog-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.vietta-video-nav {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--border-color, #e6e6e6);
	background: #fff;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(0,0,0,.12);
	transition: color .15s ease;
}
.vietta-video-nav:hover { color: var(--primary-color, #d42027); }
.vietta-video-nav--prev { left: -8px; }
.vietta-video-nav--next { right: -8px; }
@media (max-width: 767px) {
	.vietta-video-rail > * { flex-basis: 78%; max-width: 78%; }
	.vietta-video-nav { display: none; }
}