/* ==========================================================================
   HOI DAP - trang /hoi-dap-xe-dien.html va khoi trong chi tiet san pham
   ==========================================================================                                                    02/09/2026
   Tong mau cua trang la VANG (#ffd900) tren DEN (#111). Nguyen tac dung o
   day: den la muc, vang la mang. Chu vang tren nen trang chi dat 1,38:1 -
   khong doc duoc - nen vang chi lam nen dai tieu de, vien trai va nen nhan;
   moi cho co chu deu la den tren trang hoac vang tren den.
   ========================================================================== */

.hd-trang { padding-bottom: 10px; }

/* ---- Dau trang ----------------------------------------------------------
   Mot dai dau trang nen den, chu vang - dung tong mau chinh cua web va tach
   han phan gioi thieu ra khoi danh sach cau hoi ben duoi. Truoc do dau trang
   la chu den tren nen trang giong het moi thu khac tren trang, khong co diem
   dung mat nao. */
.hd-dau {
	margin: 0 0 20px;
	padding: 20px;
	border-radius: 14px;
	background: #111;
	background-image: radial-gradient(circle at 100% 0, rgba(255, 217, 0, .22), transparent 55%);
	color: #e9e9e9;
}

.hd-tieu-de {
	margin: 0 0 8px;
	padding: 0;
	font-size: 25px;
	line-height: 1.25;
	color: #fff;
}

.hd-tieu-de i { margin-right: 9px; color: #ffd900; }

.hd-mo-ta { margin: 0 0 14px; color: #c9c9c9; font-size: 14px; line-height: 1.6; }
.hd-mo-ta b { color: #ffd900; }

/* ---- O tim -------------------------------------------------------------- */
/* "nowrap": o nhap va nut Tim PHAI luon nam cung mot dong o ca may tinh lan
   dien thoai (yeu cau 02/09/2026). Lien ket "Xoa loc" thi duoc phep tut
   xuong dong duoi - xem .hd-tim-xoa. */
.hd-tim { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* js/tim-kiem-goi-y.js boc o nhap trong <span class="tkgy-boc"> de treo bang
   goi y vao. Tuc MUC FLEX o day khong phai the <input> ma la cai span do -
   moi luat flex phai dat len span, khong thi o nhap dung nguyen be rong mac
   dinh 204px giua mot hang rong 934px (do that 02/09/2026). */
.hd-tim .tkgy-boc {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
}

.hd-tim .tkgy-boc input[type="text"] { width: 100%; }

.hd-tim input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 16px;
	border: 1px solid #3a3a3a;
	border-radius: 22px;
	background: #fff;
	font-size: 14px;
	color: #111;
}

.hd-tim input[type="text"]::placeholder { color: #9a9a9a; }

.hd-tim input[type="text"]:focus {
	outline: none;
	border-color: #ffd900;
	box-shadow: 0 0 0 3px rgba(255, 217, 0, .35);
}

/* Nut tim tren nen den phai la mau VANG DAC (chu den) - nut den vien den
   tren nen den thi khong con nhin thay dau la nut. */
.hd-tim button {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 22px;
	border: 0;
	border-radius: 22px;
	background: #ffd900;
	color: #111;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
}

.hd-tim button i { margin-right: 6px; }
.hd-tim button:hover { background: #ffe64d; }
/* Xuong hang rieng: neu de chung mot dong voi o nhap thi tren dien thoai no
   an mat 50px chieu ngang cua o. */
.hd-tim-xoa { flex: 0 0 100%; font-size: 13px; color: #c9c9c9; text-decoration: underline; }
.hd-tim-xoa:hover { color: #ffd900; }

/* ---- Bang thong bao ----------------------------------------------------- */
.hd-bao {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.45;
}

.hd-bao i { margin-top: 2px; font-size: 16px; }
.hd-bao-ok  { background: #edf9f0; border: 1px solid #b7e3c4; color: #14682f; }
.hd-bao-loi { background: #fdecec; border: 1px solid #f3bdbd; color: #a51c1c; }

/* ---- Tieu de muc -------------------------------------------------------- */
.hd-muc {
	margin: 0 0 12px;
	padding: 0 0 8px;
	border-bottom: 2px solid #ffd900;
	font-size: 17px;
	line-height: 1.3;
	color: #111;
}

.hd-muc i { margin-right: 6px; color: #777; }

/* ==========================================================================
   FORM GUI CAU HOI
   ========================================================================== */
.hd-form-boc {
	margin: 0 0 24px;
	padding: 16px;
	border: 1px solid #eee;
	border-radius: 12px;
	background: #fffdf2;   /* vang rat nhat - du de tach khoi nen trang */
}

.hd-form-mo { margin: 0 0 14px; font-size: 13px; color: #666; line-height: 1.5; }

.hd-hang { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.hd-hang > .hd-o { flex: 1 1 180px; min-width: 0; margin-bottom: 0; }

.hd-o { display: block; margin: 0 0 10px; }
.hd-o > span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; color: #333; }
.hd-o > span b { color: #d70018; font-weight: 700; }

.hd-o input[type="text"],
.hd-o input[type="tel"],
.hd-o input[type="email"],
.hd-o textarea {
	display: block;
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.45;
	color: #111;
	box-sizing: border-box;
}

/* O "Cau hoi cua ban" phai chay HET be ngang khung o ca may tinh lan dien
   thoai (yeu cau 02/09/2026). Luat chung o tren la ".hd-o input[type='text']"
   - mot bo chon thuoc tinh tinh manh ngang mot lop - nen phai viet
   ".hd-o.hd-o-rong textarea" cho du manh, khong thi be rong bi luat khac de len. */
.hd-o textarea { resize: vertical; min-height: 96px; }

.hd-o.hd-o-rong { display: block; width: 100%; }

.hd-o.hd-o-rong textarea {
	display: block;
	width: 100%;
	min-height: 130px;
	box-sizing: border-box;
}

.hd-o input:focus,
.hd-o textarea:focus {
	outline: none;
	border-color: #111;
	box-shadow: 0 0 0 3px rgba(255, 217, 0, .45);
}

.hd-hang-cuoi {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	justify-content: space-between;
}

.hd-o-ma { margin: 0; flex: 0 1 auto; }
/* Phai viet "span.hd-ma-hang" va bam qua ".hd-o >": luat nhan chu o tren la
   ".hd-o > span { display: block }" - no cung khop CA the boc nay (no cung
   la mot <span> con truc tiep cua .hd-o), va manh hon ".hd-ma-hang" viet
   tran. Hau qua do duoc 02/09/2026: o nhap ma, anh ma va nut doi ma xep
   chong len nhau thanh ba dong thay vi nam canh nhau. */
.hd-o > span.hd-ma-hang { display: flex; align-items: center; gap: 8px; }

/* Ma la 4 chu so (library/captchacreate.php) - o nhap chi can du cho 4 ky
   tu. Chu to, thua nhau va can giua cho de doi chieu voi anh ben canh.

   Phai viet ".hd-o.hd-o-ma input[type=text]" chu khong phai ".hd-o-ma input":
   luat chung o tren la ".hd-o input[type='text']" - mot BO CHON THUOC TINH
   tinh manh ngang mot lop, nen ".hd-o input[type=text]" (2 lop-ish) van
   thang ".hd-o-ma input" (1 lop). Do that 02/09/2026: o nhap ma van rong
   309px thay vi 92px, va anh ma bi day xuong dong duoi. */
.hd-o.hd-o-ma input[type="text"] {
	width: 92px;
	flex: 0 0 92px;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 4px;
	padding-left: 6px;
	padding-right: 6px;
}

.hd-ma-anh {
	display: block;
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
}

.hd-ma-lai {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fff;
	color: #555;
	cursor: pointer;
}

.hd-ma-lai:hover { border-color: #111; color: #111; }

.hd-nut-gui {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 26px;
	border: 0;
	border-radius: 22px;
	background: #111;
	color: #ffd900;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.hd-nut-gui i { margin-right: 7px; }
.hd-nut-gui:hover { background: #000; }
.hd-nut-gui[disabled] { opacity: .55; cursor: progress; }

/* O bay chan bot: phai o TRONG luong trang va co kich thuoc that (bot bo qua
   nhung o display:none), chi la day ra ngoai tam nhin. */
.hd-bay {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   DANH SACH HOI DAP
   ========================================================================== */
/* Dung the <div> chu KHONG phai <article> cho tung cap hoi/dap:
   css/ke-thua/style.css co mot luat TRAN cho the "article" (dong 692) dat
   display:none; width:890px; height:100vh - do la kieu cua mot hop thoai
   noi len, nhung no viet cho CA the article nen bat luon vao day: moi cap
   hoi/dap bi ep rong 890px va cao het man hinh, tran ngang ca trang tren
   dien thoai. Hai dong width/max-width duoi day la lop chan thu hai, phong
   khi mot luat kieu do lai xuat hien. */
.hd-muc-hoi {
	margin: 0 0 14px;
	padding: 14px;
	border: 1px solid #eee;
	border-radius: 12px;
	background: #fff;
	width: auto;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}

/* Cau duoc ghim: vien trai vang day - dau hieu duy nhat can thiet, khong
   doi ca nen (doi nen thi 5 cau ghim lien nhau thanh mot mang vang). */
.hd-ghim { border-left: 4px solid #ffd900; }

.hd-nhan-ghim {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 9px;
	background: #fff8db;
	color: #806c00;
	font-size: 11px;
	font-weight: 700;
}

.hd-hoi, .hd-dap { display: flex; gap: 10px; }

/* Cau tra loi thut vao va co nen rieng - nhin la biet ai dang noi ma khong
   can doc ten. */
.hd-dap {
	margin: 12px 0 0 12px;
	padding: 12px;
	border-radius: 10px;
	background: #f7f7f7;
	border-left: 3px solid #111;
}

.hd-avatar {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #ffd900;
	color: #111;
	font-size: 16px;
	font-weight: 700;
	line-height: 36px;
	text-align: center;
}

.hd-avatar-shop { background: #111; color: #ffd900; font-size: 14px; }

.hd-hoi-than { flex: 1 1 auto; min-width: 0; }

.hd-nguoi { margin: 0 0 4px; font-size: 13px; color: #666; line-height: 1.4; }
.hd-nguoi b { color: #111; font-size: 14px; }

.hd-nhan-shop {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 9px;
	background: #111;
	color: #ffd900;
	font-size: 11px;
	font-weight: 700;
}

.hd-ngay { margin-left: 8px; font-size: 12px; color: #999; white-space: nowrap; }

.hd-noi-dung { font-size: 14px; line-height: 1.6; color: #333; word-wrap: break-word; }
.hd-noi-dung p { margin: 0 0 8px; }
.hd-noi-dung p:last-child { margin-bottom: 0; }
.hd-noi-dung a { color: #111; text-decoration: underline; text-decoration-color: #ffd900; }
.hd-noi-dung img { max-width: 100%; height: auto; }

/* ---- Khong co cau nao -------------------------------------------------- */
.hd-trong {
	padding: 34px 16px;
	border: 1px dashed #ddd;
	border-radius: 12px;
	text-align: center;
	color: #777;
}

.hd-trong i { font-size: 34px; color: #ddd; }
.hd-trong p { margin: 10px 0 0; font-size: 14px; }

/* ==========================================================================
   KHOI HOI DAP TRONG TRANG CHI TIET SAN PHAM
   ========================================================================== */
.hd-sp { margin-top: 18px; }
.hd-sp .hd-form-boc { margin-bottom: 18px; }
.hd-sp .hd-muc-hoi { border-color: #f0f0f0; }

.hd-sp-xem-het {
	display: inline-block;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 700;
	color: #111;
	text-decoration: underline;
	text-decoration-color: #ffd900;
}

/* ==========================================================================
   MAN HINH HEP
   ========================================================================== */
@media (max-width: 767px) {
	.hd-dau { padding: 16px 14px; border-radius: 12px; }
	.hd-tieu-de { font-size: 19px; }
	.hd-tieu-de i { margin-right: 7px; }
	.hd-mo-ta { font-size: 13px; }

	/* O tim: o nhap mot hang, nut mot hang - hai cai canh nhau tren man
	   hinh 375px chi con moi cai hon 100px, go duoc vai chu la het cho. */
	/* KHONG con "flex: 1 1 100%" cho ca hai: dat vay la moi thu chiem tron mot
	   dong, o nhap mot dong va nut Tim mot dong (yeu cau 02/09/2026 la phai
	   cung dong). Nut thu nho lai de o nhap con nhieu cho nhat. */
	.hd-tim { gap: 6px; }
	.hd-tim .tkgy-boc { flex: 1 1 auto; }
	.hd-tim input[type="text"] { height: 42px; }
	.hd-tim button { flex: 0 0 auto; height: 42px; padding: 0 14px; }
	.hd-tim button i { margin-right: 5px; }

	.hd-form-boc { padding: 12px; border-radius: 10px; }
	.hd-hang { gap: 8px; }

	/* HO TEN mot hang rieng; DIEN THOAI + EMAIL chia doi cung mot hang
	   (yeu cau 02/09/2026). Tru 4px moi o de bu vao khoang "gap" 8px. */
	.hd-hang > .hd-o-ten { flex: 1 1 100%; }
	.hd-hang > .hd-o-doi { flex: 1 1 calc(50% - 4px); max-width: calc(50% - 4px); }

	.hd-hang-cuoi { gap: 10px; }
	.hd-o-ma { flex: 1 1 100%; }
	.hd-ma-hang { justify-content: flex-start; }
	.hd-o.hd-o-ma input[type="text"] { width: 92px; flex: 0 0 92px; }
	.hd-nut-gui { flex: 1 1 100%; width: 100%; }

	.hd-muc-hoi { padding: 12px; }
	.hd-dap { margin-left: 0; }
	.hd-avatar { flex-basis: 30px; width: 30px; height: 30px; line-height: 30px; font-size: 14px; }
	.hd-ngay { display: block; margin-left: 0; }
}

/* Man hinh RAT hep (duoi 360px): hai o dien thoai/email chia doi thi moi o
   chi con ~150px, nhan chu "Điện thoại" da chiem gan het - tra ve moi o mot
   hang cho de nhap. */
@media (max-width: 359px) {
	.hd-hang > .hd-o-doi { flex: 1 1 100%; max-width: 100%; }
}

/* ==========================================================================
   COT BEN PHAI: KHOI "SAN PHAM MUA NHIEU"                     02/09/2026
   ==========================================================================
   Nam ngay duoi khoi "Tin tuc moi / Facebook / Videos"
   (library/cot-phai-tin.php).
   ========================================================================== */
.cp-muanhieu {
	margin-top: 14px;
	padding: 12px;
	border: 1px solid #ececec;
	border-radius: 10px;
	background: #fff;
}

.cp-mn-tieude {
	margin: 0 0 10px;
	padding: 0 0 8px;
	border-bottom: 2px solid #ffd900;
	font-size: 15px;
	font-weight: 700;
	color: #111;
}

.cp-mn-tieude i { margin-right: 6px; color: #d70018; }

/* MOT cot tren may tinh (cot ben phai chi rong ~250px), HAI cot tren dien
   thoai (khi do khoi nay chiem tron be ngang - yeu cau 03/09/2026). */
.cp-mn-ds {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.cp-mn-the {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 8px 0;
	border-bottom: 1px solid #f4f4f4;
	color: #333;
}

.cp-mn-ds .cp-mn-the:last-child { border-bottom: 0; }
.cp-mn-the:hover { color: #000; }

.cp-mn-anh { flex: 0 0 62px; }

.cp-mn-anh img {
	display: block;
	width: 62px;
	height: 62px;
	object-fit: contain;
	border: 1px solid #eee;
	border-radius: 7px;
	/* Nen TRANG, khong phai #fafafa (03/09/2026 - cung ly do voi
	   .vx-anh trong css/chung/vua-xem.css): anh san pham deu tach nen trang,
	   de o mot bac xam nhat hon thi thanh mot vien xam quanh chiec xe. */
	background: #fff;
}

.cp-mn-chu { flex: 1 1 auto; min-width: 0; }

.cp-mn-ten {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 3px;
	font-size: 13px;
	line-height: 1.35;
}

.cp-mn-the:hover .cp-mn-ten { text-decoration: underline; text-decoration-color: #ffd900; }
.cp-mn-gia { display: block; font-size: 13px; font-weight: 700; color: #d70018; }

/* Hai san pham mot hang tren dien thoai: the doi sang xep DOC (anh tren, chu
   duoi) - de ngang thi moi the chi con ~170px, anh 62px an mat hon mot phan
   ba, ten san pham vo thanh bon dong.

   Moc la 767px chu KHONG phai 991px: trong dai 768-991px cot ben phai van la
   col-md-3, tuc chi rong khoang 220px. Chia doi cho do thi moi the con 105px
   trong khi rieng anh 84px + dem 20px + vien 2px da la 106px - the tran ra
   ngoai 4px va ca trang co thanh cuon ngang (do that o 900px, 03/09/2026).
   Duoi 768px khoi nay moi that su chiem tron be ngang (355px) va hai cot
   moi co cho. */
@media (max-width: 767px) {
	.cp-mn-ds {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.cp-mn-the {
		flex-direction: column;
		min-width: 0;
		gap: 7px;
		padding: 10px;
		border: 1px solid #f0f0f0;
		border-radius: 8px;
		text-align: center;
	}

	.cp-mn-ds .cp-mn-the:last-child { border: 1px solid #f0f0f0; }

	.cp-mn-anh { flex: 0 0 auto; align-self: center; }
	/* max-width chu khong phai width co dinh: the hep hon 84px thi anh tu thu
	   lai theo, khong day the tran ra ngoai cot. */
	.cp-mn-anh img { width: 100%; max-width: 84px; height: auto; aspect-ratio: 1 / 1; }
	.cp-mn-chu { width: 100%; }
	.cp-mn-ten { -webkit-line-clamp: 2; min-height: 2.7em; }
}

/* ==========================================================================
   COT BEN PHAI DINH THEO CUON (chi tren man hinh rong)        02/09/2026
   ==========================================================================
   Cot chinh cua trang hoi dap rat dai (10 cau hoi + form), con cot ben phai
   chi cao khoang mot man hinh - cuon xuong mot doan la ben phai trong tron.
   Cho no dinh lai theo cuon thi hai khoi kia con di theo tam mat.

   Chi tu 992px tro len: duoi do hai cot xep chong nhau, "dinh" khong con y
   nghia gi. "align-self: flex-start" la bat buoc - trong mot hang flex, muc
   mac dinh bi keo cao bang ca hang va khi do position:sticky khong co cho
   nao de truot. */
@media (min-width: 992px) {
	/* Hang chua hai cot la flex, va cot phai duoc KEO CAO BANG cot noi dung
	   ("align-items: stretch" - mac dinh cua flex). Do la dieu kien de khoi
	   ghim ben trong no co duong ma truot: mot the position:sticky chi di
	   duoc trong pham vi the cha cua no. */
	body .row.content.hd-hai-cot,
	body .hd-hai-cot { display: flex; flex-wrap: wrap; align-items: stretch; }

	/* Hai lop trung gian cung phai cao het cot, khong thi khoi ghim chi truot
	   duoc trong vung cao bang chinh noi dung cua no (tuc gan nhu khong
	   truot). */
	body .hd-cot-phai { display: flex; flex-direction: column; }
	body .hd-cot-phai > .padding-add {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
	}

	/* CHI khoi "San pham mua nhieu" ghim lai, khong phai ca cot.
	   Ban truoc ghim ca cot kem "max-height + overflow-y: auto" - the la cot
	   co mot thanh cuon RIENG, cuon trong cuon, kho dung (nguoi dung bao
	   03/09/2026). Nay cot cuon binh thuong cung ca trang, chi rieng khoi mua
	   nhieu dinh lai nen luon nam trong tam mat.

	   top: 78px = 65px chieu cao thanh dieu huong dinh o dau trang
	   (header.fs-header) + 13px cho tho. */
	body .hd-cot-phai .cp-muanhieu {
		position: sticky;
		top: 78px;
		z-index: 2;
	}
}


/* ==========================================================================
   LE HAI BEN TREN DIEN THOAI                                  03/09/2026
   ==========================================================================
   Do o 375px: the cau hoi nam o 20px moi ben (5 .main-content + 5 <section>
   + 10 .hd-trang), cong them 12px dem trong the => chu bat dau o 32px. Tren
   mot man hinh 375px do la gan mot phan sau be ngang chi de lam le.

   Bo han lop dem cua .hd-trang: the cau hoi ve 10px - dung bang le chung cua
   ca site (xem css/chung/dap-ung.css) - va moi cau hoi rong them 20px.
   ========================================================================== */
@media (max-width: 767px) {
	body .page-content.hd-trang {
		padding-left: 0;
		padding-right: 0;
	}

	/* The cau hoi thu dem trong lai mot chut nua. */
	.hd-muc-hoi { padding: 10px; }

	/* Cot phai: lop "cpt-cot" bo le phai tu 768px tro len (no ap sat cot noi
	   dung), con o day phai co le deu hai ben. */
	body .cpt-cot {
		padding-left: 5px;
		padding-right: 5px;
	}
}

@media (min-width: 768px) {
	body .cpt-cot { padding-right: 0; }
}