/* ==========================================================================
   DVP — Trang chu (Dot 2, 12/08/2026)
   Dai dieu huong nganh hang kieu "the so ngang" — Sep chot ban 6C.
   Ban ve tinh doi chieu: bang-chon-mau/vong-7-hoan-chinh-the-so.html

   Nap SAU dvp-the-san-pham.css. Muon lui lai toan bo: xoa dong link file nay
   trong layouts/theme.bwt va dong include trong templates/index.bwt.

   ⚠ Bai hoc Dot 1: theme Evo viet SCSS long nhau nen bo chon goc rat cu the,
   file nap sau VAN THUA vi do uu tien xet truoc thu tu. O day tranh duoc vi
   dung lop rieng tien to .dvp-dh — theme goc khong he co lop nay.
   Van phai chay kiem-thu/do-css-bi-de.js sau khi day len de chac.

   Mau: teal #067686 / #045864 (nhan dien DVP) · cam #f9a41c lam vach nhan.
   Chu so dung mau teal dam #045864 tren nen trang = tuong phan 8,12/4,5.
   ========================================================================== */

.dvp-dh {
	margin: 18px 0 26px;
}

.dvp-dh .dvp-dh__tieu {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #045864;
	line-height: 1.3;
}

/* Vach cam ngan dau dong — dau nhan dien DVP, khong phai gach trang tri suong */
.dvp-dh .dvp-dh__tieu::before {
	content: "";
	flex: none;
	width: 26px;
	height: 3px;
	background: #f9a41c;
	border-radius: 2px;
}

.dvp-dh .dvp-dh__luoi {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.dvp-dh .dvp-dh__o {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;          /* nguong cham cua ngon tay */
	padding: 9px 12px;
	background: #fff;
	border: 1px solid #e4ded2;
	border-radius: 12px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.dvp-dh .dvp-dh__o:hover,
.dvp-dh .dvp-dh__o:focus-visible {
	transform: translateY(-2px);
	border-color: #067686;
	box-shadow: 0 8px 18px rgba(24, 20, 12, .09);
	text-decoration: none;
}

.dvp-dh .dvp-dh__o:focus-visible {
	outline: 2px solid #045864;
	outline-offset: 2px;
}

.dvp-dh .dvp-dh__so {
	flex: none;
	min-width: 34px;
	text-align: right;
	font-size: 21px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.01em;
	color: #045864;
	font-variant-numeric: tabular-nums;
	transition: color .15s ease;
}

.dvp-dh .dvp-dh__o:hover .dvp-dh__so {
	color: #a86500;            /* cung mau gia ban — noi con so voi tien */
}

.dvp-dh .dvp-dh__ten {
	min-width: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	color: #263238;
	/* Cat 2 dong: ten dai nhat la "Làm bánh - Nguyên liệu" van du cho */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Man hinh hep dan: 5 cot -> 3 -> 2. Khong de tran ngang o bat ky kho nao. */
@media (max-width: 1199px) {
	.dvp-dh .dvp-dh__luoi { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 991px) {
	.dvp-dh .dvp-dh__luoi { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
	/* 12/08 Sep che chiem dien tich: luoi 2 cot x 5 hang cao 286px (1/3 man 390px)
	   -> MOT HANG CUON NGANG kieu app san TMDT, cao ~55px, tiet kiem ~230px.
	   Van du 44px cham; khach vuot ngang de xem het 10 nhom. */
	.dvp-dh { margin: 14px 0 18px; }
	.dvp-dh .dvp-dh__luoi {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.dvp-dh .dvp-dh__luoi::-webkit-scrollbar { display: none; }
	.dvp-dh .dvp-dh__o { flex: 0 0 auto; padding: 8px 13px; }
	.dvp-dh .dvp-dh__so { font-size: 17px; min-width: 0; }
	.dvp-dh .dvp-dh__ten {
		font-size: 12px;
		/* bo cat 2 dong cua ban luoi — hang cuon ngang thi ten nam 1 dong tron ven */
		display: block;
		-webkit-line-clamp: unset;
		white-space: nowrap;
		overflow: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dvp-dh .dvp-dh__o { transition: none; }
	.dvp-dh .dvp-dh__o:hover { transform: none; }
}


/* ==========================================================================
   BIEN CHU DAU KHOI HANG — thay 9 banner anh (Sep chot "Mau 2 · Bien chu that")
   9 banner anh cu nang tong ~1,1 MB va chu nam TRONG anh nen Google khong doc
   duoc. Bien chu la <h2> that, doc duoc, phong to khong vo, nhe hon 1000 lan.
   ========================================================================== */

.dvp-bien-boc {
	margin: 0 0 18px;
}

/* ⚠⚠ TEN LOP NHAN DOI `.dvp-bien.dvp-bien` — KHONG PHAI go nham, dung xoa bot.
   Khoi Khuyen Mai boc bien trong `.sport-title`, ma theme goc co quy tac
   `.sport-title a { color:#fff }` = do cu the (0,1,1), THANG `.dvp-bien` (0,1,0).
   Ket qua: chu trang tren nen kem -> tuong phan 1,10, chu gan nhu tang hinh,
   trong khi 9 bien kia van dung mau. Nap file sau KHONG cuu duoc vi trinh duyet
   xet do cu the TRUOC thu tu nap. Nhan doi ten lop nang len (0,2,0) la thang,
   ma khong doi pham vi khop. Dung dung cach da chua o Dot 1. */
.dvp-bien.dvp-bien {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 15px 20px 15px 17px;
	border-radius: 12px;
	/* 12/08 Sep che "mo nhat" -> vach day 4->6px, nen chuyen gradient nhat dan
	   ve trang cho co chieu sau thay vi mot mang pastel phang */
	border-left: 6px solid var(--dvp-vach);
	background: linear-gradient(100deg, var(--dvp-nen) 0%, rgba(255, 255, 255, .55) 100%), #fff;
	color: var(--dvp-chu);
	text-decoration: none;
}

.dvp-bien.dvp-bien:hover,
.dvp-bien.dvp-bien:focus-visible {
	color: var(--dvp-chu);
	text-decoration: none;
}

.dvp-bien:focus-visible {
	outline: 2px solid var(--dvp-vach);
	outline-offset: 2px;
}

/* Ba tone theo nhom hang — teal la mac dinh, cam cho Sanneng/Khuyen mai,
   do cho Contra. Cac cap mau nay deu da do tuong phan >= 4,5. */
.dvp-bien--teal { --dvp-nen: #eef4f5; --dvp-vach: #0b6270; --dvp-chu: #0b4a55; --dvp-phu: #456a70; }
.dvp-bien--cam  { --dvp-nen: #fdf3e0; --dvp-vach: #b87400; --dvp-chu: #7a4e00; --dvp-phu: #8a6528; }
.dvp-bien--do   { --dvp-nen: #fdeced; --dvp-vach: #c00510; --dvp-chu: #8f0a12; --dvp-phu: #8f4a4e; }

.dvp-bien .dvp-bien__chu {
	min-width: 0;
}

.dvp-bien .dvp-bien__ten {
	margin: 0 0 3px;
	/* 12/08: 22->24px, 700->800 — tieu de phai la thu dap vao mat dau tien */
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: inherit;
}

.dvp-bien .dvp-bien__tieu {
	font-weight: 500;
}

.dvp-bien .dvp-bien__phu {
	display: block;
	/* 12/08: tagline dam hon (13->14px, them weight) — Sep che chim qua */
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--dvp-phu);
}

.dvp-bien .dvp-bien__phai {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

/* 12/08: so ma hang tu chu tran -> CHIP trang noi tren nen mau, so mang mau vach */
.dvp-bien .dvp-bien__dem {
	padding: 6px 12px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 4px rgba(24, 20, 12, .10);
	font-size: 11.5px;
	line-height: 1.3;
	text-align: center;
	color: var(--dvp-phu);
}

.dvp-bien .dvp-bien__dem b {
	display: block;
	font-size: 20px;
	font-weight: 800;
	color: var(--dvp-vach);
	font-variant-numeric: tabular-nums;
}

/* 12/08: nut "Xem tat ca" tu vien manh -> DAY MAU vach, diem nhan ro nhat bien.
   Chu trang tren ca 3 mau vach deu tren nguong: #0b6270=6,7 · #b87400=4,7 · #c00510=5,9 */
.dvp-bien .dvp-bien__nut {
	padding: 8px 15px;
	background: var(--dvp-vach);
	border: 1.5px solid var(--dvp-vach);
	border-radius: 9px;
	color: #fff;
	font-size: 13px;
	font-weight: 650;
	white-space: nowrap;
}

.dvp-bien:hover .dvp-bien__nut {
	filter: brightness(.9);
}

/* Khung do vien 3px cua khoi Khuyen Mai: sinh ra de vien lay THANH DO cu
   (`.sport-bg { border: 3px solid #e01010 }`). Nay thanh do da thay bang bien
   chu nen cai vien do con lai troi tro — mot minh no do choe giua trang, khac
   han 9 khoi kia. Bo vien, giu nen trang va bo goc cho dong bo.
   Nhan doi ten lop vi quy tac goc long trong `.section_sport` nen cu the hon. */
.section_sport .sport-bg.sport-bg {
	border: 0;
	border-radius: 12px;
	background-color: transparent;
}

/* Khoi Khuyen Mai: bien chu va dong ho dem nguoc xep chung mot hang.
   Lop nay THAY HAN `.sport-title` cu — xem chu thich trong section_sport.bwt
   ve ly do khong dung lai ten lop do. */
.dvp-sport-dau {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 18px;
}

.dvp-sport-dau .dvp-bien-boc {
	flex: 1;
	min-width: 320px;
	margin-bottom: 0;
}

.dvp-sport-dau .timer-view {
	flex: none;
	margin: 0;
	position: static;
}

@media (max-width: 767px) {
	/* 12/08 Sep che "mobile chiem qua nhieu dien tich": bo kieu xep chong 3 tang
	   (ten / tagline / hang duoi) cao ~110px, ve MOT HANG ~52px: ten trai, nut phai.
	   Tagline + chip so AN o mobile — chung la do nhan nha cho man to; tren 390px
	   moi bien x10 khoi tiet kiem ~55px x 10 = hon nua man hinh. */
	.dvp-bien.dvp-bien {
		gap: 10px;
		padding: 10px 12px;
		border-left-width: 5px;
	}
	.dvp-bien .dvp-bien__ten { font-size: 16.5px; margin: 0; }
	.dvp-bien .dvp-bien__tieu { display: none; }
	.dvp-bien .dvp-bien__phu { display: none; }
	.dvp-bien .dvp-bien__dem { display: none; }
	.dvp-bien .dvp-bien__nut { padding: 7px 12px; font-size: 12px; }
	/* ⚠ Codex bat duoc 12/08/2026: dong nay truoc viet ".dvp-sport-title" — mot lop
	   KHONG TON TAI. Khoi Khuyen Mai da doi sang ".dvp-sport-dau" (vi lop cu bi
	   theme goc son trang de len, tuong phan 1,10). Doi ten lop ma quen sua CSS
	   o day => quy tac chet am tham, min-width:320px van con hieu luc, bien bi ep
	   sat mep o kho 320px. Bai kiem cu chi do 390px nen khong thay. */
	.dvp-sport-dau .dvp-bien-boc { min-width: 0; }
}