/* ==========================================================================
   DVP — HIEU UNG CHIEU SAU (3D) — 28/08/2026
   Sep yeu cau: dung cam giac noi khoi cua tong-hop.dvpmarket.com, va CHI cam
   giac do. KHONG doi mau (khong mot ma hex moi ngoai rgba cua mau san co),
   KHONG doi bo cuc, KHONG doi chu, KHONG doi chuc nang.

   Nap SAU CUNG trong layouts/theme.bwt — de SUA gia tri bong cu cua cac file
   dvp-* truoc do (box-shadow de len la THAY THE, khong chong lop -> khong bong doi).
   Muon lui lai toan bo: xoa dong nap file nay + dong nap dvp-chieu-sau.js.

   NGUYEN TAC (spec Sep dua 28/08):
   - MOT nguon sang tren cao, lech trai: moi bong offset-x=0, offset-y DUONG.
   - Bong 2 tang: lop TIEP XUC (sat, nho) + lop LAN XA (to, mo, spread AM).
   - Bong lan xa mang mau CUA CHINH phan tu, CHI khi re chuot. Nghi = trung tinh.
   - ⚠ THE SAN PHAM giu bong NAU AM rgba(24,20,12,...) — quyet dinh da chot o
     Dot 2c: bong mau (teal) lam ca trang am xanh khi xep 5 the mot hang.
     Day chinh la "mau san co cua phan tu" (the trang tren nen kem am).
   - Chuyen dong chi bang transform + opacity. Nhac va bong no ra CUNG thoi luong.

   Bo bien dung chung (mau bong theo spec, KHONG phai mau thuong hieu):
   ========================================================================== */

:root {
	--b1: 0 1px 2px rgba(16, 38, 46, .05), 0 1px 3px rgba(16, 38, 46, .05);   /* nam sat */
	--b2: 0 2px 4px -1px rgba(16, 38, 46, .05), 0 14px 28px -10px rgba(6, 118, 134, .26); /* noi vua */
	--b3: 0 24px 60px -18px rgba(6, 43, 51, .45);                             /* noi cao */
	--nhip: cubic-bezier(.22, .61, .36, 1);                                   /* nhip chung */
}

/* ==========================================================================
   ① + ④ THE SAN PHAM — hieu ung xuong song
   SUA gia tri bong cu cua dvp-the-san-pham.css (khong chong them lop):
   nghi: 1 lop mong -> 2 lop --b1 nau am · re chuot: -3px -> -4px, bong 2 tang
   lan xa spread am. Kem vet mau mong quet tren mep the (teal #067686->#045864,
   ca hai deu la mau san co cua trang).
   ========================================================================== */

.evo-product-block-item.evo-product-block-item {
	box-shadow: 0 1px 2px rgba(24, 20, 12, .05), 0 1px 3px rgba(24, 20, 12, .05);
	transition: transform .22s var(--nhip), box-shadow .22s var(--nhip);
}

.evo-product-block-item.evo-product-block-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px -1px rgba(24, 20, 12, .08), 0 20px 34px -14px rgba(24, 20, 12, .20);
}

/* Vet mau 3px quet tu trai sang tren mep the — cham hon cu nhac (340ms vs 220ms)
   de mat doc ra 2 lop rieng. Nam duoi nhan giam gia (top:8px) nen khong dam nhau.
   The da co overflow:hidden nen goc bo 18px tu cat vet cho tron. */
.evo-product-block-item.evo-product-block-item::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(90deg, #067686, #045864);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .34s var(--nhip);
}

.evo-product-block-item.evo-product-block-item:hover::after {
	transform: scaleX(1);
}

/* ==========================================================================
   ⑪ NUT — thu nho cung phai co do day
   Nut mua: nghi co bong tiep xuc mong (nau am, trung tinh); re chuot nut day
   mau cam san co (#f9a41c) thi bong lan xa mang dung mau do + nhac 1px.
   Nut "Tuy chon"/"Lien he" day mau teal thi bong teal. Bam xuong (+1px) giu nguyen.
   ========================================================================== */

.evo-product-block-item.evo-product-block-item .product-buy-button {
	box-shadow: 0 1px 2px rgba(24, 20, 12, .05), 0 1px 3px rgba(24, 20, 12, .05);
	transition: background-color .18s var(--nhip), border-color .18s var(--nhip),
		color .18s var(--nhip), transform .18s var(--nhip), box-shadow .18s var(--nhip);
}

.evo-product-block-item.evo-product-block-item .product-buy-button:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 2px 3px rgba(24, 20, 12, .08), 0 8px 18px -6px rgba(249, 164, 28, .55);
}

.evo-product-block-item.evo-product-block-item .product-buy-button.is-options:hover,
.evo-product-block-item.evo-product-block-item .product-buy-button.is-contact:hover {
	box-shadow: 0 2px 3px rgba(24, 20, 12, .08), 0 8px 18px -6px rgba(6, 118, 134, .45);
}

/* Bam xuong: nut lun — bong thu ve sat (dung vat ly: cang gan mat cang it bong) */
.evo-product-block-item.evo-product-block-item .product-buy-button:active {
	box-shadow: 0 1px 2px rgba(24, 20, 12, .10);
}

/* Hai nut tron yeu thich/so sanh: chi lam sau them TRANG THAI DA HIEN
   (khi re vao the / khi bam) — trang thai nghi va co che an/hien tren may
   co chuot GIU NGUYEN nhu Dot 2c, khong dong vao. */
.evo-product-block-item.evo-product-block-item .product-icon-button:hover,
.evo-product-block-item.evo-product-block-item .product-icon-button:focus-visible,
.evo-product-block-item.evo-product-block-item .product-icon-button.added {
	box-shadow: 0 0 0 3px rgba(6, 118, 134, .22), 0 6px 14px -6px rgba(6, 118, 134, .50);
}

/* ==========================================================================
   ① DAI DIEU HUONG NGANH HANG — 10 o the so
   SUA bong cu: nghi 1 lop -> --b1 nau am · re chuot -2px -> -3px (o vuong nho),
   bong lan xa mang mau teal cua chinh con so trong o.
   ========================================================================== */

.dvp-dh .dvp-dh__o {
	box-shadow: 0 1px 2px rgba(24, 20, 12, .05), 0 1px 3px rgba(24, 20, 12, .05);
	transition: transform .22s var(--nhip), box-shadow .22s var(--nhip), border-color .22s var(--nhip);
}

.dvp-dh .dvp-dh__o:hover,
.dvp-dh .dvp-dh__o:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px -1px rgba(24, 20, 12, .08), 0 12px 22px -10px rgba(6, 118, 134, .35);
}

/* ==========================================================================
   ①⑤⑫ BIEN NHOM NGANH "Dem theo hang" — khoi lon noi khoi
   - Bong 2 tang mang mau toi cua CHINH tung hang (--h-bong da co san tung bien).
   - Re chuot: nhac -4px + bong no ra (giu nguyen dai mau truot san co).
   - Luoi cham trang mo tan dan (chi tren nen TOI — 3 nen dem deu dat).
   ========================================================================== */

.dvp-bien.dvp-bien {
	box-shadow: 0 1px 3px rgba(var(--h-bong), .35), 0 16px 34px -16px rgba(var(--h-bong), .60);
	transition: transform .22s var(--nhip), box-shadow .22s var(--nhip),
		background-position .5s ease, border-color .22s var(--nhip);
}

.dvp-bien.dvp-bien:hover,
.dvp-bien.dvp-bien:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 2px 5px rgba(var(--h-bong), .40), 0 24px 44px -18px rgba(var(--h-bong), .70);
}

/* Luoi cham 22px, trang .18, ro o goc tren-trai (gan nguon sang) roi tan dan.
   ::before cua bien da la quang sang — dung ::after, cung z-index:-1 nen cham
   nam TREN quang sang va DUOI chu (the cha co isolation:isolate). */
.dvp-bien.dvp-bien::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .42;
	background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000, transparent 72%);
	mask-image: radial-gradient(120% 90% at 20% 0%, #000, transparent 72%);
}

/* ==========================================================================
   ⑫ THU NOI TREN TRANG — gio nho tha xuong, menu danh muc, nut ve dau trang
   Cang noi cao bong cang xa cang mo, khong cang dam.
   ========================================================================== */

/* Gio hang nho + menu danh muc tha xuong: noi cao nhat man hinh -> --b3 */
.top-cart-content,
.evo-main-menu .nav-cate {
	box-shadow: var(--b3);
}

/* Nut ve dau trang: noi vua */
footer .back-to-top {
	box-shadow: var(--b2);
	transition: transform .22s var(--nhip), box-shadow .22s var(--nhip);
}

footer .back-to-top:hover {
	transform: translateY(-2px);
}

/* ==========================================================================
   ⑩ HIEN LAN LUOT LUC MO TRANG — chi dai dieu huong + bien chu (khoi tinh,
   khong dinh slick, khong dinh anh hero LCP). Lop .dvp-anim do
   dvp-chieu-sau.js gan MOT LAN truoc luot ve dau tien — ve lai sau loc/tim
   kiem khong co lop nay nen khong bao gio chay lai.
   ========================================================================== */

.dvp-anim {
	opacity: 0;
	transform: translateY(10px);
	animation: dvp-len .45s var(--nhip) forwards;
}

@keyframes dvp-len {
	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Loi thoat cho nguoi nhay chuyen dong — bong GIU NGUYEN, chi tat phan dong.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.evo-product-block-item.evo-product-block-item,
	.evo-product-block-item.evo-product-block-item::after,
	.evo-product-block-item.evo-product-block-item .product-buy-button,
	.dvp-dh .dvp-dh__o,
	.dvp-bien.dvp-bien,
	footer .back-to-top {
		transition: none;
	}

	.evo-product-block-item.evo-product-block-item:hover,
	.dvp-dh .dvp-dh__o:hover,
	.dvp-dh .dvp-dh__o:focus-visible,
	.dvp-bien.dvp-bien:hover,
	.dvp-bien.dvp-bien:focus-visible,
	footer .back-to-top:hover {
		transform: none;
	}

	.evo-product-block-item.evo-product-block-item:hover::after {
		transition: none;
	}

	.evo-product-block-item.evo-product-block-item .product-buy-button:hover {
		transform: none !important;
	}

	.dvp-anim {
		animation: none;
		opacity: 1;
		transform: none;
	}
}