/* ==========================================================================
   TRANG SO SANH HAI SAN PHAM                                  02/09/2026
   ==========================================================================
   Chi nap o $page = 'sosanh' (xem library/tai-nguyen.php).

   TONG MAU: den la chu, vang #ffd900 la mang. Chu vang tren nen trang chi
   dat 1.38:1 do tuong phan - khong bao gio dung lam mau chu. Vang o day chi
   xuat hien duoi dang nen (nut, nhan, vach danh dau).

   TIEN TO ".ss-" cho moi chuoi chon. Bon tep CSS ke thua (style.css,
   responsive.css, cssv3.css, minify.css) co rat nhieu luat dat cho the tran
   (table, th, td, h1, h2...) - dat ten rieng la cach re nhat de khong dam
   vao chung.
   ========================================================================== */

.ss-trang {
	float: none;
	padding: 0 15px 24px;   /* = padding cua .col-* trong bootstrap */
}

/* --------------------------------------------------------------------------
   TIEU DE
   -------------------------------------------------------------------------- */
.ss-trang .ss-tieu-de {
	margin: 6px 0 16px;
	padding: 0;
	font-size: 22px;
	line-height: 1.35;
	font-weight: 700;
	color: #111;
	border: 0;
	background: none;
	text-transform: none;
}
.ss-trang .ss-tieu-de .ss-vs {
	display: inline-block;
	margin: 0 2px;
	padding: 1px 7px;
	border-radius: 4px;
	background: #ffd900;
	color: #111;
	font-size: 14px;
	font-weight: 700;
	vertical-align: middle;
}

.ss-trang .ss-de-muc {
	margin: 28px 0 12px;
	padding: 0 0 8px;
	border-bottom: 2px solid #ffd900;
	font-size: 17px;
	font-weight: 700;
	color: #111;
	text-transform: none;
	background: none;
}
.ss-trang .ss-de-muc i { color: #111; }

/* --------------------------------------------------------------------------
   HAI THE SAN PHAM
   --------------------------------------------------------------------------
   Grid ba cot: the - huy hieu VS - the. Cot giua co be rong co dinh nen hai
   the luon bang nhau du ten dai ngan khac nhau. */
.ss-dau {
	display: grid;
	grid-template-columns: 1fr 44px 1fr;
	align-items: stretch;
	gap: 0;
	margin: 0 0 14px;
}
.ss-dau.ss-dau-mot { grid-template-columns: 1fr 44px 1fr; }

.ss-the {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 14px 12px 12px;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	background: #fff;
	text-align: center;
}
.ss-the-anh {
	display: block;
	position: relative;
	margin: 0 0 10px;
}
.ss-the-anh img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 210px;
	object-fit: contain;
	margin: 0 auto;
}
.ss-giam {
	position: absolute;
	top: 0;
	left: 0;
	padding: 2px 7px;
	border-radius: 4px;
	background: #d0021b;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
}

.ss-trang .ss-the-ten {
	margin: 0 0 8px;
	padding: 0;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 700;
	border: 0;
	background: none;
	text-transform: none;
}
.ss-trang .ss-the-ten a { color: #111; }
.ss-trang .ss-the-ten a:hover { text-decoration: underline; text-decoration-color: #ffd900; }

.ss-the-gia { margin: 0 0 8px; line-height: 1.4; }
.ss-gia { font-size: 19px; font-weight: 700; color: #d0021b; }
.ss-gia-goc {
	margin-left: 6px;
	font-size: 13px;
	color: #9a9a9a;
	text-decoration: line-through;
}
.ss-nhan-re {
	align-self: center;
	margin: 0 0 10px;
	padding: 3px 10px;
	border-radius: 20px;
	background: #ffd900;
	color: #111;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
}

/* Vai thong so dang chu y, hien ngay tren the. */
/* The khong duoc gan nhan van giu dung cho trong do (xem ghi chu trong
   library/sosanh.php) - visibility chu khong phai display, de o van chiem
   cho. */
.ss-nhan-an { visibility: hidden; }

.ss-chip {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	text-align: left;
	border-top: 1px solid #f0f0f0;
}
.ss-chip li {
	display: flex;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid #f4f4f4;
	font-size: 13px;
	line-height: 1.4;
}
.ss-chip li:last-child { border-bottom: 0; }
.ss-chip li span { flex: 0 0 40%; color: #8a8a8a; }
.ss-chip li strong { flex: 1 1 auto; min-width: 0; color: #111; font-weight: 600; }

.ss-the-nut {
	display: flex;
	gap: 8px;
	margin-top: auto;
}
/* button va a dung chung mot bo do: <button> mang san mac dinh cua trinh
   duyet (vien, nen xam, font he thong) nen phai go tay. */
button.ss-nut {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	cursor: pointer;
}
.ss-nut {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 7px 10px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	transition: background .15s ease, border-color .15s ease;
}
.ss-nut-vien {
	border: 1px solid #d9d9d9;
	background: #fff;
	color: #111;
}
.ss-nut-vien:hover { border-color: #111; background: #fafafa; color: #111; }
.ss-nut-vang {
	border: 1px solid #ffd900;
	background: #ffd900;
	color: #111;
}
.ss-nut-vang:hover { background: #f0cc00; border-color: #f0cc00; color: #111; }

/* Huy hieu VS o giua. Duong ke doc chay het chieu cao de hai the trong nhu
   mot khoi lien mach chu khong phai hai o roi. */
.ss-giua {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ss-giua::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 50%;
	width: 1px;
	margin-left: -1px;
	background: #ececec;
}
.ss-giua span {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #111;
	color: #ffd900;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
}

/* The trong khi moi chon mot xe. */
.ss-the-trong {
	justify-content: center;
	border-style: dashed;
	border-color: #d8d8d8;
	background: #fcfcfc;
}
.ss-trong-icon {
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: #fff8db;
	color: #111;
	font-size: 20px;
}
.ss-trong-tieu { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #111; }
.ss-trong-mo { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #777; }

.ss-chenh {
	margin: 0 0 4px;
	padding: 10px 12px;
	border-left: 3px solid #ffd900;
	border-radius: 0 6px 6px 0;
	background: #fff8db;
	font-size: 13px;
	line-height: 1.5;
	color: #333;
}
.ss-chenh strong { color: #111; }

/* --------------------------------------------------------------------------
   THANH DEM / LOC
   -------------------------------------------------------------------------- */
.ss-thanh {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 22px 0 0;
	padding: 10px 12px;
	border: 1px solid #ececec;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	background: #fafafa;
}
.ss-thanh-tin { font-size: 13px; color: #555; }
.ss-thanh-tin strong { font-size: 16px; color: #111; }
.ss-loc {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 5px 11px;
	border: 1px solid #e0e0e0;
	border-radius: 20px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: #333;
	cursor: pointer;
	user-select: none;
}
.ss-loc:hover { border-color: #111; }
.ss-loc input { margin: 0; cursor: pointer; }

/* --------------------------------------------------------------------------
   BANG SO SANH
   --------------------------------------------------------------------------
   Bang tran nen phai co o cuon rieng: mep trai/phai cua trang KHONG duoc
   chay ngang theo no. */
/* KHONG dat overflow o day. Bang da la table-layout:fixed voi be rong theo
   phan tram nen khong bao gio tran ngang; con dat "overflow-x:auto" thi theo
   quy tac CSS overflow-y cung thanh "auto", the nay bien thanh mot vung cuon
   va hang tieu de "position: sticky" se dinh theo NO chu khong theo man hinh
   - tuc la khong dinh gi ca. */
.ss-bang-boc {
	border: 1px solid #ececec;
	border-radius: 0 0 8px 8px;
	background: #fff;
}
.ss-trang .ss-bang {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	background: #fff;
	font-size: 13px;
}
.ss-trang .ss-bang th,
.ss-trang .ss-bang td {
	padding: 9px 12px;
	border: 0;
	border-bottom: 1px solid #f2f2f2;
	background: none;
	font-size: 13px;
	line-height: 1.45;
	text-align: left;
	vertical-align: top;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.ss-trang .ss-bang .ss-c-nhan { width: 32%; color: #777; font-weight: 400; }
.ss-trang .ss-bang .ss-c-gt { width: 34%; color: #111; font-weight: 600; }
.ss-trang .ss-bang.ss-bang-mot .ss-c-nhan { width: 40%; }
.ss-trang .ss-bang.ss-bang-mot .ss-c-gt { width: 60%; }

/* --- GO MOT LUAT CU ------------------------------------------------------
   css/responsive.css, khoi @media (max-width:767px) and (min-width:481px),
   co bon dong nay:

       .main-content table, .main-content tbody { display:block; width:100%!important }
       .main-content table tr { display:block; border-bottom:2px solid #999 }
       .main-content table th  { display:block; width:100%!important }
       .main-content table td  { display:block; width:100%!important }

   Do la thu thuat cu "bang nao tren dien thoai cung xep chong thanh tung
   khoi". Trang nay lam nguoc lai: ba cot canh nhau CHINH LA noi dung, xep
   chong len la mat kha nang doi chieu. index.php boc main.php trong
   <div class="main-content col-lg-12> nen luat tren van voi toi day du the
   <section> da bo lop main-content.

   Do do: tra lai display cua bang o MOI be rong (chuoi chon dai hon nen
   thang tren desktop, va o dai 481-767px thi thang dung luat cu), kem
   !important cho width vi luat cu co !important. */
body .ss-trang table.ss-bang { display: table; width: 100% !important; }
body .ss-trang .ss-bang > thead { display: table-header-group; }
body .ss-trang .ss-bang > tbody { display: table-row-group; }
body .ss-trang .ss-bang tr { display: table-row; border-bottom: 0; }
/* Luat "display: table-row" o tren la luat cua tac gia, con [hidden]{display:none}
   la cua trinh duyet - luat tac gia thang. Khong co dong nay thi nut "Chi xem
   diem khac" van gan hidden dung nhung bang khong ngan lai chut nao. */
body .ss-trang .ss-bang tr[hidden] { display: none !important; }
body .ss-trang .ss-bang th,
body .ss-trang .ss-bang td { display: table-cell; }
body .ss-trang .ss-bang .ss-c-nhan { width: 32% !important; }
body .ss-trang .ss-bang .ss-c-gt { width: 34% !important; }
body .ss-trang .ss-bang.ss-bang-mot .ss-c-nhan { width: 40% !important; }
body .ss-trang .ss-bang.ss-bang-mot .ss-c-gt { width: 60% !important; }

/* Hang tieu de: dinh o dau man hinh khi cuon qua bang dai 40 dong - khong
   thi den giua bang khong con nho cot nao la xe nao.

   "top: 65px" chu khong phai 0: dau trang co mot thanh dieu huong dinh san
   (header.fs-header, cao 65px, z-index 1000 tren may tinh; .container.hd-hep
   cao 50px tren dien thoai - xem khoi @media ben duoi). Dat top:0 thi hang
   nay van dinh dung nhung nam KHUAT hoan toan sau thanh do. */
.ss-trang .ss-bang thead th {
	position: sticky;
	top: 65px;
	z-index: 3;
	padding: 11px 12px;
	background: #111;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	border-bottom: 2px solid #ffd900;
}
/* Phai neu ca lop ".ss-c-gt" o day: luat mau cua cot
   ".ss-trang .ss-bang .ss-c-gt { color: #111 }" ben tren la (0,3,0), manh hon
   "...thead th" (0,2,1) - khong viet ro thi ten xe o hang tieu de thanh chu
   den tren nen den. */
.ss-trang .ss-bang thead th.ss-c-gt { color: #fff; }
.ss-trang .ss-bang thead th.ss-c-nhan { color: #cfcfcf; font-weight: 600; }

/* Ten nhom KHONG dinh theo cuon: chieu cao hang tieu de thay doi theo do
   dai ten hai xe (mot dong hay hai dong) nen khong the dat san mot moc "top"
   dung cho moi truong hop - lech mot chut la hai hang de len nhau. */
.ss-trang .ss-bang .ss-nhom th {
	padding: 7px 12px;
	background: #fff8db;
	color: #111;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	border-bottom: 1px solid #f0e3a8;
}

.ss-trang .ss-bang tbody tr:hover td,
.ss-trang .ss-bang tbody tr:hover > th.ss-c-nhan { background: #fbfbfb; }
.ss-trang .ss-bang tbody tr.ss-nhom:hover th { background: #fff8db; }

/* Hang hai xe khac nhau. Vach vang ben trai + nen nhat: doc luot qua la
   thay ngay cho nao can chu y (vi du hai xe Action chi khac 2/40 dong). */
.ss-trang .ss-bang tr.ss-khac > th.ss-c-nhan,
.ss-trang .ss-bang tr.ss-khac > td { background: #fffdf2; }
.ss-trang .ss-bang tr.ss-khac > th.ss-c-nhan {
	box-shadow: inset 3px 0 0 #ffd900;
	color: #111;
	font-weight: 600;
}
.ss-trang .ss-bang tr.ss-khac > td { color: #111; }

.ss-trong-gt { color: #c4c4c4; }

.ss-bang-rong {
	margin: 0;
	padding: 22px 14px;
	text-align: center;
	font-size: 13px;
	color: #888;
}

.ss-thieu {
	margin: 18px 0 0;
	padding: 14px;
	border: 1px dashed #e0e0e0;
	border-radius: 8px;
	font-size: 13px;
	color: #777;
	text-align: center;
}

/* --------------------------------------------------------------------------
   VIDEO
   -------------------------------------------------------------------------- */
.ss-video {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
.ss-video-o { min-width: 0; }
.ss-video-ten {
	margin: 0 0 7px;
	font-size: 13px;
	font-weight: 700;
	color: #111;
}
.ss-video-khung {
	position: relative;
	padding-top: 56.25%;
	border-radius: 8px;
	overflow: hidden;
	background: #000;
}
.ss-video-khung iframe {
	position: absolute;
	inset: 0;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --------------------------------------------------------------------------
   CHOT
   -------------------------------------------------------------------------- */
.ss-chot {
	margin: 26px 0 0;
	padding: 16px;
	border: 1px solid #ececec;
	border-radius: 10px;
	background: #fafafa;
	text-align: center;
}
.ss-chot-hoi { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #444; }
.ss-chot-hoi a { color: #111; font-weight: 700; text-decoration: underline; text-decoration-color: #ffd900; }
.ss-chot-nut {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.ss-chot-nut .ss-nut { flex: 0 1 auto; min-width: 190px; }

/* --------------------------------------------------------------------------
   MAN HINH HEP
   --------------------------------------------------------------------------
   Hai the VAN nam canh nhau: ca trang nay ton tai la de doi chieu, xep chong
   len nhau thi phai cuon qua lai. Chi thu nho chu va khoang dem lai. */
@media (max-width: 767px) {
	.ss-trang { padding: 0 15px 20px; }
	.ss-trang .ss-tieu-de { font-size: 17px; margin-bottom: 12px; }
	.ss-trang .ss-tieu-de .ss-vs { font-size: 12px; padding: 1px 6px; }

	.ss-dau { grid-template-columns: 1fr 30px 1fr; }
	.ss-the { padding: 10px 8px 10px; border-radius: 8px; }
	.ss-the-anh img { max-height: 130px; }
	.ss-trang .ss-the-ten { font-size: 13px; }
	.ss-gia { font-size: 15px; }
	.ss-gia-goc { display: block; margin: 2px 0 0; font-size: 11px; }
	.ss-giua span { width: 26px; height: 26px; font-size: 10px; }
	.ss-chip li { display: block; font-size: 12px; }
	.ss-chip li span { display: block; font-size: 11px; }
	.ss-the-nut { flex-direction: column; gap: 6px; }
	.ss-nut { min-height: 34px; font-size: 12px; padding: 6px 8px; }
	.ss-trong-icon { width: 42px; height: 42px; font-size: 17px; }
	.ss-trong-mo { font-size: 12px; }

	.ss-thanh { padding: 9px 10px; }
	.ss-thanh-tin { font-size: 12px; }
	.ss-loc { font-size: 12px; padding: 4px 9px; }

	.ss-trang .ss-bang { font-size: 12px; }
	.ss-trang .ss-bang th,
	.ss-trang .ss-bang td { padding: 8px 8px; font-size: 12px; }
	body .ss-trang .ss-bang .ss-c-nhan { width: 30% !important; }
	body .ss-trang .ss-bang .ss-c-gt { width: 35% !important; }
	.ss-trang .ss-bang thead th { padding: 9px 8px; font-size: 11.5px; top: 50px; }
	.ss-trang .ss-bang .ss-nhom th { font-size: 11px; }

	.ss-video { grid-template-columns: 1fr; gap: 12px; }
	.ss-chot { padding: 13px; }
	.ss-chot-hoi { font-size: 13px; }
	.ss-chot-nut { flex-direction: column; }
	.ss-chot-nut .ss-nut { min-width: 0; width: 100%; }
}