/* === MAU-CHU — NOI DUY NHAT GHI MA MAU + CO CHU (luat design-website) ===
   Ngoai khoi nay CAM viet #hex / rgb() / rgba() / hsl() — chi dung var(--ten).
   Mau trong suot: khai bao kenh "--ten-k: R G B" roi viet rgb(var(--ten-k) / .5).
   Hai ban cho khach so sanh: mac dinh = SANG (vuon buoi buoi som), html[data-ban="toi"] = TOI (rung tra ve dem).
   Chot/cam cua anh Minh: ../DA-CHOT.md (doc truoc khi sua). */
:root{
 color-scheme:only light;   /* 'only' = khong cho trinh duyet tu ep toi (Android auto dark) */
 --nen:#ecede4;     --nen-k:236 237 228;   /* nen trang: kem ngả xanh la, khong vang */
 --the:#f6f6f0;     --vien:#d5d8c8;
 --chu:#2b3125;     --nhat:#5e6656;        /* chu chinh / chu phu */
 --chinh:#3e4a33;   --chinh-k:62 74 51;    /* reu: tieu de, dai dam */
 --sage:#7c8b68;                            /* dong thu hai cua tieu de 2 mau */
 --la:#c5cfa8;      --tren-la:#2b3125;     /* nut chinh (la non) + chu tren nut */
 --buoi:#d6c04f;                            /* vo buoi — diem nhan nho */
 --luu:#9b2f37;     --luu-k:155 47 55;     /* hat luu — chi o khoi Tay da chet */
 --dai-luu:#e7d9cf;                         /* nen khoi Luu */
 --anh-a:#a9b48f;   --anh-b:#6f7d5b;        /* o anh tam (gradient) */
 --bong-k:43 49 37;                         /* bong la tren nen */
 --tren-anh:#f6f6f0;  --tren-anh-k:246 246 240;  /* chu tren o anh */
 --phu-anh-k:34 42 28;                      /* lop toi phu len anh hero */
 /* Hero anh lon (khach gui mau 15/10 23:12; Ban A van SANG — chot HERO-BAN-SANG-SANG): anh doi che + lop kem phu */
 --hero-anh:url(anh/hero-sang.jpg); --hero-anh-dt:url(anh/hero-sang-dt.jpg);  /* ANH TAM CC0 — thay khi co anh that */
 --hero-du:#a9b48f;                          /* mau nen khi anh chua tai xong */
 --hero-phu-k:247 247 241; --hero-phu-tren:.62; --hero-phu-duoi:.93;  /* lop kem phu tren/duoi anh */
 --hero-phu-bat:22%; --hero-phu-day:56%;      /* lop duoi bat dau mo / day han (ban sang: nua duoi gan nhu kem) */
 --hero-chu:#2f3a27; --hero-chu-k:47 58 39; /* chu hero = reu dam */
 --hero-nut:#3e4a33; --hero-tren-nut:#f6f6f0; /* nut chinh tren hero */
 --hero-cham:#d6c04f;                        /* cham vang vo buoi o the nguyen lieu */
 /* Khoi noi (khach 15/10 23:46: moi khoi trong trang nhu dang noi len — bong den mo phia duoi) */
 --bong-noi:0 24px 48px -22px rgb(var(--bong-k) / .45),0 8px 18px -10px rgb(var(--bong-k) / .22);
 /* Khoi mua hang (mau avocado): the reu dam, dai nut 3 mau */
 --shop-nen:#3e4a33; --shop-chu:#f6f6f0; --shop-thanh-1:#323d29; --shop-nhan:#e3cf6a;
 /* Bang chuyen video review: quang sang sau the */
 --bc-quang-k:197 207 168; --bc-quang-a:.55;
 /* Nut nghieng 3D (lay tu trananhminh.com, anh 16/10 00:10): bong reu khi re chuot */
 --bong-nut:0 12px 32px -8px rgb(62 74 51 / .45);
 --la-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath d='M20 230 C80 170 120 120 220 20' stroke='black' stroke-width='3' fill='none'/%3E%3Cg fill='black'%3E%3Cellipse cx='70' cy='160' rx='34' ry='11' transform='rotate(-70 70 160)'/%3E%3Cellipse cx='96' cy='170' rx='34' ry='11' transform='rotate(10 96 170)'/%3E%3Cellipse cx='112' cy='110' rx='36' ry='12' transform='rotate(-80 112 110)'/%3E%3Cellipse cx='140' cy='120' rx='36' ry='12' transform='rotate(5 140 120)'/%3E%3Cellipse cx='158' cy='62' rx='32' ry='11' transform='rotate(-85 158 62)'/%3E%3Cellipse cx='186' cy='72' rx='32' ry='11' transform='rotate(0 186 72)'/%3E%3C/g%3E%3C/svg%3E");

 /* co chu co gian: <=400px = co dien thoai, >=1200px = co may tinh.
    cong thuc: clamp(NHO, NHO - 0.5*(LON-NHO) + (LON-NHO)/8 vw, LON) */
 --co-than:clamp(15px,14.5px + .125vw,16px);
 --co-nhan:13px;
 --co-vua:clamp(17px,16px + .25vw,19px);
 --co-h3:clamp(20px,17px + .75vw,26px);
 --co-h2:clamp(28px,16px + 3vw,52px);
 --co-hero:clamp(40px,22px + 4.5vw,76px);     /* tieu de lon goc duoi phai hero */
 --co-shop:clamp(34px,19px + 3.75vw,64px);     /* tieu de khoi mua hang */

 --nut-cao:44px;
 --em:cubic-bezier(.22,1,.36,1);        /* 09 Easing: nhanh roi cham dan */
 --em-vuot:cubic-bezier(.34,1.56,.64,1); /* 10 Overshoot: vuot dich roi bat ve */
 --chu-tieu-de:"Noto Serif Display","Times New Roman",serif;
 --chu-than:"Be Vietnam Pro",system-ui,sans-serif;
}
html[data-ban="toi"]{
 color-scheme:only dark;
 --nen:#1f2a1f;     --nen-k:31 42 31;
 --the:#2a372a;     --vien:#3d4b3b;
 --chu:#ecede4;     --nhat:#b7c0a8;
 --chinh:#e4e8d6;   --chinh-k:228 232 214;
 --sage:#9fb08a;
 --la:#c5cfa8;      --tren-la:#1f2a1f;
 --buoi:#e3cf6a;
 --luu:#d0626b;     --luu-k:208 98 107;
 --dai-luu:#3a2a2a;
 --anh-a:#4d5c43;   --anh-b:#2c382a;
 --hero-anh:url(anh/hero-toi.jpg); --hero-anh-dt:url(anh/hero-toi-dt.jpg);
 --hero-du:#2c382a;
 --hero-phu-k:16 22 16; --hero-phu-tren:.55; --hero-phu-duoi:.82;
 --hero-phu-bat:42%; --hero-phu-day:100%;
 --hero-chu:#f6f6f0; --hero-chu-k:246 246 240;
 --hero-nut:#c5cfa8; --hero-tren-nut:#1f2a1f;
 --hero-cham:#e3cf6a;
 --bong-noi:0 26px 52px -18px rgb(0 0 0 / .72),0 8px 18px -8px rgb(0 0 0 / .45);
 --shop-nen:#33432f; --shop-chu:#f6f6f0; --shop-thanh-1:#2a3727; --shop-nhan:#e3cf6a;
 --bc-quang-k:150 180 120; --bc-quang-a:.22;
 --bong-k:0 0 0;
 --bong-nut:0 12px 32px -8px rgb(0 0 0 / .6);
}
/* === HET MAU-CHU === */

/* nen tang chong tran chu — giu nguyen khi chep */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nen);color:var(--chu);font-size:var(--co-than);line-height:1.6;overflow-wrap:anywhere;font-family:var(--chu-than)}
img,svg,video{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;min-height:var(--nut-cao)}

@font-face{font-family:"Noto Serif Display";src:url(font/nsd-vietnamese.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Noto Serif Display";src:url(font/nsd-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Serif Display";src:url(font/nsd-vietnamese-i.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Noto Serif Display";src:url(font/nsd-latin-i.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";src:url(font/bvp-vietnamese-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";src:url(font/bvp-latin-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";src:url(font/bvp-vietnamese-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";src:url(font/bvp-latin-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- khung chung ---------- */
.khung{max-width:1200px;margin:0 auto;padding:0 16px}
@media (min-width:760px){.khung{padding:0 32px}}
section{padding:clamp(56px,40px + 4vw,120px) 0}
h1,h2,h3{font-family:var(--chu-tieu-de);font-weight:400;color:var(--chinh);margin:0}
h2{font-size:var(--co-h2);line-height:1.12;text-transform:uppercase;letter-spacing:.01em}
h2 .phu{color:var(--sage);display:block}
h3{font-size:var(--co-h3);line-height:1.25}
p{margin:0 0 1em;max-width:62ch}
.nhan{font-size:var(--co-nhan);color:var(--nhat);letter-spacing:.04em;margin:0 0 14px}
.giua{text-align:center}
.giua p{margin-left:auto;margin-right:auto}
.dau-song{display:block;font-family:var(--chu-tieu-de);color:var(--sage);font-size:22px;line-height:1;margin:0 0 18px}
.dau-song::before{content:"~"}

.nut{display:inline-flex;align-items:center;justify-content:center;min-height:var(--nut-cao);padding:0 24px;border-radius:999px;
 background:var(--la);color:var(--tren-la);text-decoration:none;font-weight:500;font-size:15px}
.nut-vien{background:transparent;color:var(--chinh);box-shadow:inset 0 0 0 1px var(--sage)}
.nut:focus-visible{outline:2px solid var(--chinh);outline-offset:3px}
.hang-nut{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.giua .hang-nut{justify-content:center}

/* o anh tam: gradient + bong la, nhan chu "anh that se thay" */
.anh{position:relative;overflow:hidden;border-radius:14px;background:linear-gradient(160deg,var(--anh-a),var(--anh-b));min-height:220px}
.anh::before{content:"";position:absolute;inset:-10% -10% auto auto;width:70%;aspect-ratio:1;background:rgb(var(--bong-k) / .16);
 -webkit-mask:var(--la-svg) center/contain no-repeat;mask:var(--la-svg) center/contain no-repeat}
.anh::after{content:attr(data-anh);position:absolute;left:12px;bottom:12px;right:12px;font-size:13px;line-height:1.4;
 color:var(--tren-anh);background:rgb(var(--phu-anh-k) / .55);padding:6px 10px;border-radius:8px;width:fit-content;max-width:calc(100% - 24px)}

/* ---------- dau trang + hero: anh lon tran khung bo goc (khach gui mau 15/10 23:12) ---------- */
.hero{position:relative;display:flex;flex-direction:column;margin:8px;border-radius:22px;overflow:hidden;isolation:isolate;
 min-height:max(560px,calc(100svh - 136px));  /* chua cho nut Gop y noi goc duoi */color:var(--hero-chu);padding:0 16px 14px;
 background:linear-gradient(180deg,rgb(var(--hero-phu-k) / var(--hero-phu-tren)) 0,rgb(var(--hero-phu-k) / 0) 24%,
  rgb(var(--hero-phu-k) / 0) var(--hero-phu-bat),rgb(var(--hero-phu-k) / var(--hero-phu-duoi)) var(--hero-phu-day)),var(--hero-anh-dt) center/cover no-repeat,var(--hero-du)}
@media (min-width:760px){
 .hero{margin:10px;padding:0 32px 20px;min-height:min(max(600px,calc(100svh - 136px)),860px);
  background:linear-gradient(180deg,rgb(var(--hero-phu-k) / var(--hero-phu-tren)) 0,rgb(var(--hero-phu-k) / 0) 20%,
   rgb(var(--hero-phu-k) / 0) var(--hero-phu-bat),rgb(var(--hero-phu-k) / var(--hero-phu-duoi)) var(--hero-phu-day)),var(--hero-anh) center/cover no-repeat,var(--hero-du)}
}
.menu{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 8px;padding-top:6px}
.menu a{color:var(--hero-chu);text-decoration:none;font-size:13px;min-height:44px;display:inline-flex;align-items:center}
.menu .logo{font-family:var(--chu-tieu-de);font-size:22px;letter-spacing:.01em}
.menu-giua{order:3;flex-basis:100%;display:flex;justify-content:space-between}
.menu .lien-he-nhanh{padding:0 18px;border-radius:999px;background:rgb(var(--hero-chu-k) / .14);box-shadow:inset 0 0 0 1px rgb(var(--hero-chu-k) / .35);
 backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (min-width:760px){
 .menu{flex-wrap:nowrap;padding-top:10px}
 .menu-giua{order:0;flex-basis:auto;gap:28px}
 .menu-giua a{font-size:14px}
}
.hero-than{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:22px;padding-top:40px}
.ten-lon{order:-1;font-family:var(--chu-tieu-de);font-weight:400;font-size:var(--co-hero);line-height:1.04;letter-spacing:-.01em;
 margin:0;color:var(--hero-chu)}
.the-tu{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0}
.the-tu li{font-size:13px;line-height:1;padding:7px 11px;border-radius:999px;background:rgb(var(--hero-chu-k) / .10);
 box-shadow:inset 0 0 0 1px rgb(var(--hero-chu-k) / .30)}
.the-tu li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--hero-cham);margin-right:7px;vertical-align:1px}
.khau-hieu{font-size:var(--co-vua);line-height:1.5;margin:0;max-width:30ch}
.hero .hang-nut{margin-top:18px}
.hero .nut:not(.nut-vien){background:var(--hero-nut);color:var(--hero-tren-nut)}
.hero .nut-vien{color:var(--hero-chu);box-shadow:inset 0 0 0 1px rgb(var(--hero-chu-k) / .7)}
.hero-day{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 16px;margin-top:18px;padding-top:6px;
 border-top:1px solid rgb(var(--hero-chu-k) / .22)}
.ghi-anh-hero{font-size:13px;margin:0;opacity:.85}
.the-hero{color:var(--hero-chu);font-size:14px;font-weight:500;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:8px}
@media (min-width:860px){
 .hero-than{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:end;gap:48px}
 .ten-lon{order:0;text-align:right}
}

/* ---------- 02 Tra Buoi ---------- */
.hai-cot{display:grid;gap:32px;align-items:center}
@media (min-width:860px){.hai-cot{grid-template-columns:1fr 1fr;gap:56px}.dao > :first-child{order:2}}
.hai-cot .anh{min-height:clamp(320px,200px + 20vw,560px)}
.loi-ich{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:18px}
.loi-ich li{border-top:1px solid var(--vien);padding-top:16px}
.loi-ich b{display:block;font-family:var(--chu-tieu-de);font-weight:500;font-size:var(--co-vua);color:var(--chinh);margin-bottom:4px}
.loi-ich span{color:var(--nhat)}
.ten-sp{font-family:var(--chu-tieu-de);font-style:italic;font-size:var(--co-h3);color:var(--sage);margin:14px 0 0}

/* ---------- 03 Tra & Buoi ---------- */
.nen-the{background:var(--the);border-radius:22px;margin:0 8px}
@media (min-width:760px){.nen-the{margin:0 16px}}
.cap{display:grid;gap:20px;margin-top:40px;text-align:left}
@media (min-width:760px){.cap{grid-template-columns:1fr 1fr}}
.cap article{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:start}
.cap .anh{min-height:88px;border-radius:50%}
.cap .anh::after{display:none}
.cap p{margin:6px 0 0;color:var(--nhat)}
.ket{font-family:var(--chu-tieu-de);font-style:italic;font-size:var(--co-vua);color:var(--chinh);margin:40px auto 0;max-width:40ch}

/* ---------- 04 cong thuc ---------- */
.ba-y{display:grid;gap:14px;margin-top:36px}
@media (min-width:860px){.ba-y{grid-template-columns:repeat(3,1fr)}}
.ba-y article{background:var(--the);border:1px solid var(--vien);border-radius:16px;padding:22px}
.ba-y h3{font-size:var(--co-vua);font-weight:500;margin-bottom:8px}
.ba-y p{color:var(--nhat);margin:0}

/* ---------- hero 2: Luu cam gao ---------- */
.khoi-luu{background:var(--dai-luu)}
.khoi-luu h2{color:var(--luu)}
.khoi-luu h2 .phu{color:var(--chinh)}
.khoi-luu .loi-ich li{border-top-color:rgb(var(--luu-k) / .3)}
.khoi-luu .anh{background:linear-gradient(160deg,rgb(var(--luu-k) / .55),var(--anh-b))}

/* ---------- 05 the gioi san pham (the kieu Zolotoe) ---------- */
.ba-the{display:grid;gap:14px;margin-top:40px}
@media (min-width:700px){.ba-the{grid-template-columns:repeat(3,1fr)}}
.the-sp{border-radius:16px;overflow:hidden;background:var(--sage);color:var(--tren-anh);text-decoration:none;display:flex;flex-direction:column}
.the-sp .anh{border-radius:0;min-height:260px}
.the-sp .chu{padding:16px 18px 18px;text-align:center}
.the-sp small{font-size:13px;opacity:.9;display:block}
.the-sp strong{display:block;font-family:var(--chu-tieu-de);font-weight:400;font-size:var(--co-h3);text-transform:uppercase;margin:4px 0 6px}
.the-sp span{font-size:15px;line-height:1.5;display:block;opacity:.95}
.the-sp em{font-style:normal;font-weight:500;font-size:14px;display:inline-flex;min-height:44px;align-items:center}

/* ---------- 06 Mam Mo chon gi: the de len anh ---------- */
.de-anh{position:relative;padding:clamp(40px,24px + 4vw,96px) 16px;border-radius:22px;margin:0 8px;overflow:hidden;
 background:linear-gradient(200deg,var(--anh-a),var(--anh-b))}
@media (min-width:760px){.de-anh{margin:0 16px}}
.de-anh::before{content:"";position:absolute;left:-8%;bottom:-12%;width:min(80vw,620px);aspect-ratio:1;background:rgb(var(--bong-k) / .18);
 -webkit-mask:var(--la-svg) center/contain no-repeat;mask:var(--la-svg) center/contain no-repeat;transform:scaleX(-1)}
.de-anh .ghi{position:absolute;right:16px;top:14px;font-size:13px;color:var(--tren-anh);opacity:.9;max-width:60%;text-align:right}
.the-noi{position:relative;max-width:640px;margin:0 auto;background:var(--the);border-radius:6px;padding:clamp(28px,20px + 2vw,48px)}
.the-noi .y{border-top:1px solid var(--vien);padding-top:16px;margin-top:16px}
.the-noi .y b{display:block;font-family:var(--chu-tieu-de);font-weight:500;font-size:var(--co-vua);color:var(--chinh)}
.the-noi .y p{margin:4px 0 0;color:var(--nhat)}

/* ---------- 07 khoang cham minh ---------- */
.tho{font-family:var(--chu-tieu-de);font-style:italic;font-size:var(--co-vua);line-height:1.7;color:var(--chinh);margin:22px auto 0}
.ba-khoang{display:grid;gap:22px;margin-top:44px;text-align:left}
@media (min-width:860px){.ba-khoang{grid-template-columns:repeat(3,1fr)}}
.ba-khoang .anh{min-height:300px;margin-bottom:14px}
.ba-khoang h3{font-size:var(--co-vua);font-weight:500;margin-bottom:6px}
.ba-khoang p{color:var(--nhat);margin:0}

/* ---------- 08 Journal kieu tap chi ---------- */
.dau-journal{display:grid;gap:12px;align-items:end}
@media (min-width:860px){.dau-journal{grid-template-columns:1.2fr 1fr;gap:56px}}
.bai-chinh{display:grid;gap:22px;margin-top:40px;border-top:1px solid var(--chinh);padding-top:28px}
@media (min-width:860px){.bai-chinh{grid-template-columns:1.4fr 1fr;gap:48px}}
.bai-chinh .anh{min-height:clamp(260px,160px + 18vw,460px)}
.bai .muc{font-size:13px;color:var(--sage);letter-spacing:.06em;margin:0 0 10px}
.bai h3{font-size:clamp(24px,18px + 1.5vw,36px);line-height:1.2;margin-bottom:12px}
.bai p{color:var(--nhat)}
.bai a{color:var(--chinh);font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.bai-phu{display:grid;gap:22px;margin-top:28px}
@media (min-width:760px){.bai-phu{grid-template-columns:1fr 1fr;gap:48px}}
.bai-phu .bai{border-top:1px solid var(--vien);padding-top:20px}
.bai-phu h3{font-size:var(--co-h3)}

/* ---------- 09 noi mua: the kieu "avocado" (khach gui mau 15/10 23:46) ---------- */
.the-shop{display:grid;border-radius:22px;overflow:hidden;background:var(--shop-nen);color:var(--shop-chu)}
.shop-anh .anh{height:100%;min-height:240px;border-radius:0 0 28px 0;background:linear-gradient(160deg,var(--la),var(--anh-a))}
.shop-chu{padding:28px 20px 30px}
.nhan-shop{font-size:14px;margin:0 0 8px;opacity:.85}
.the-shop h2{color:var(--shop-chu);font-size:var(--co-shop);text-transform:none;line-height:1.05}
.the-shop h2 .phu{color:var(--shop-chu);opacity:.8;font-style:italic;font-size:.5em;line-height:1.3;margin-top:8px}
.shop-chu p:last-child{margin:18px 0 0}
.shop-nhan{color:var(--shop-nhan)}
.shop-thanh{display:grid}
.shop-thanh a{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:12px 20px;text-decoration:none;color:var(--shop-chu);background:var(--shop-thanh-1)}
.shop-thanh a:nth-child(2){background:var(--la);color:var(--tren-la)}
.shop-thanh a:nth-child(3){background:var(--buoi);color:var(--tren-la)}
.shop-thanh b{font-weight:500;font-size:var(--co-vua)}
.shop-thanh span{font-size:13px;opacity:.85}
.shop-thanh a:focus-visible{outline:2px solid var(--shop-chu);outline-offset:-4px}
@media (min-width:860px){
 .the-shop{grid-template-columns:1fr 1.1fr}
 .shop-anh .anh{min-height:380px}
 .shop-chu{padding:48px 48px 40px 40px;align-self:center}
 .shop-thanh{grid-column:1 / -1;grid-template-columns:repeat(3,1fr)}
}
.sap-co{opacity:.85}

/* ---------- 09b video review: bang chuyen 5 the doc (khach gui mau 15/10 23:46) ---------- */
.khoi-review{position:relative;overflow:hidden}
.khoi-review::before{content:"";position:absolute;left:50%;top:58%;width:min(110vw,900px);aspect-ratio:1.6;transform:translate(-50%,-50%);
 background:radial-gradient(closest-side,rgb(var(--bc-quang-k) / var(--bc-quang-a)),rgb(var(--bc-quang-k) / 0));pointer-events:none}
.khoi-review > *{position:relative}
.bang-chuyen{position:relative;margin-top:36px;--bc-rong:clamp(190px,160px + 7.5vw,250px);--bc-buoc:clamp(92px,8px + 21vw,260px)}
.bc-ray{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 16px 28px}
.bc-the{flex:0 0 var(--bc-rong);margin:0;scroll-snap-align:center;cursor:pointer}
.bc-khung{position:relative;aspect-ratio:9 / 16;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
 background:linear-gradient(165deg,var(--anh-a),var(--anh-b));color:var(--tren-anh);text-align:left;padding:14px}
.bc-khung::before{content:"";position:absolute;inset:-10% -30% auto auto;width:90%;aspect-ratio:1;background:rgb(var(--bong-k) / .16);
 -webkit-mask:var(--la-svg) center/contain no-repeat;mask:var(--la-svg) center/contain no-repeat}
.bc-phat{position:absolute;left:50%;top:44%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgb(var(--tren-anh-k) / .88)}
.bc-phat::after{content:"";position:absolute;left:22px;top:17px;border-left:16px solid var(--anh-b);border-top:11px solid transparent;border-bottom:11px solid transparent}
.bc-khung figcaption{position:relative;font-size:15px;font-weight:500;line-height:1.35}
.bc-khung small{display:block;font-size:13px;font-weight:400;opacity:.85}
.bc-nut,.bc-cham{display:none}
.bang-chuyen.bc-3d .bc-ray{display:block;position:relative;overflow:hidden;height:calc(var(--bc-rong) * 16 / 9 + 40px);padding:0;
 perspective:1100px;touch-action:pan-y}
.bc-3d .bc-the{position:absolute;left:50%;top:20px;width:var(--bc-rong);margin-left:calc(var(--bc-rong) / -2);
 transform:translateX(calc(var(--vi) * var(--bc-buoc))) translateZ(calc(var(--xa) * -110px)) rotateY(calc(var(--vi) * 16deg));
 opacity:calc(1 - var(--xa) * .12)}
.bc-3d .bc-the.dang-xem{cursor:default}
.bc-3d .bc-the:not(.dang-xem) .bc-khung{filter:saturate(.8) brightness(.92)}
.bc-3d .bc-nut{display:flex;align-items:center;justify-content:center;position:absolute;top:calc(20px + var(--bc-rong) * 8 / 9 - 22px);z-index:20;
 width:44px;height:44px;border:0;border-radius:50%;background:var(--the);color:var(--chinh);font-size:28px;line-height:1;cursor:pointer;box-shadow:var(--bong-noi)}
.bc-lui{left:max(8px,calc(50% - 600px))}
.bc-toi{right:max(8px,calc(50% - 600px))}
.bc-3d .bc-cham{display:flex;justify-content:center;gap:2px;margin-top:6px}
.bc-cham button{width:38px;height:38px;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.bc-cham button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sage);opacity:.5}
.bc-cham button[aria-current="true"]::before{opacity:1;width:22px;border-radius:999px;background:var(--chinh)}
.bc-nut:focus-visible,.bc-cham button:focus-visible{outline:2px solid var(--chinh);outline-offset:2px}
.ghi-video{font-size:13px;color:var(--nhat);margin:18px auto 0}
@media (prefers-reduced-motion:no-preference){
 .bc-3d .bc-the{transition:transform .55s var(--em),opacity .55s var(--em)}
}

/* ---------- khoi noi: moi khoi trong trang co bong mo phia duoi (khach 15/10 23:46) ---------- */
.hero,.nen-the,.de-anh,.the-sp,.ba-y article,.the-noi,.anh,.khoi-luu,footer,.the-shop,.bc-khung{box-shadow:var(--bong-noi)}
.the-sp .anh,.cap .anh,.shop-anh .anh,.the-noi .anh{box-shadow:none}
.khoi-luu,footer{border-radius:22px;margin-left:8px;margin-right:8px}
footer{margin-bottom:8px}
@media (min-width:760px){.khoi-luu,footer{margin-left:16px;margin-right:16px}footer{margin-bottom:16px}}

/* ---------- 10 chan trang ---------- */
footer{background:var(--chinh);color:var(--nen);padding:56px 0 28px;margin-top:clamp(40px,24px + 4vw,96px)}
html[data-ban="toi"] footer{background:var(--the);color:var(--chu)}
.chan-ten{font-family:var(--chu-tieu-de);font-weight:300;font-size:clamp(40px,20px + 5vw,80px);line-height:1.05;margin:0}
.chan-cot{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
@media (min-width:860px){.chan-cot{grid-template-columns:repeat(5,1fr)}}
.chan-cot h3{font-family:var(--chu-than);font-size:13px;font-weight:500;letter-spacing:.06em;color:inherit;opacity:.7;margin-bottom:8px}
.chan-cot a{display:flex;align-items:center;min-height:38px;color:inherit;text-decoration:none;font-size:15px}
.chan-cot p{font-size:15px;margin:0 0 6px}
.chan-cuoi{border-top:1px solid rgb(var(--nen-k) / .25);margin-top:32px;padding-top:18px;font-size:13px;opacity:.8}
html[data-ban="toi"] .chan-cuoi{border-top-color:var(--vien)}

/* thanh doi ban A/B o dau trang (khong co dinh: tranh nut gop y goc duoi) */
.doi-ban{margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 14px;padding:4px 16px;
 background:var(--the);color:var(--chinh);border-bottom:1px solid var(--vien);font-size:14px;text-align:center;max-width:none}
.doi-ban a{color:inherit;font-weight:500;min-height:44px;display:inline-flex;align-items:center}
html[data-ban="toi"] .doi-ban{background:var(--la);color:var(--tren-la)}

/* ---------- chuyen dong (khung/chuyen-dong.md) — may tat chuyen dong thi hien thang ---------- */
.nut{position:relative;overflow:hidden;isolation:isolate}
@media (prefers-reduced-motion:no-preference){
 /* vao trang 1 lan, tong <=0,8 giay: 05 Mask reveal chu Mam Mo + 02 Stagger khau hieu, nut, the */
 .ten-lon{animation:mm-mask .8s var(--em) both}
 .khau-hieu{animation:mm-noi .6s var(--em) .12s both}
 .hero .hang-nut{animation:mm-noi .6s var(--em) .18s both}
 .the-hero{animation:mm-noi .6s var(--em) .2s both}
 @keyframes mm-mask{from{clip-path:inset(0 0 100% 0);transform:translateY(28px)}to{clip-path:inset(-40% -5% -40% -5%);transform:none}}
 @keyframes mm-noi{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

 /* nut: 10 Overshoot khi re chuot, 22 Light sweep 1 lan moi lan re, an xuong khi bam */
 .nut{transition:transform .35s var(--em-vuot),box-shadow .25s var(--em)}
 .nut::after{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-120%);
  background:linear-gradient(110deg,transparent 30%,rgb(var(--tren-anh-k) / .55) 50%,transparent 70%)}
 .nut:active{transform:scale(.97);transition-duration:.1s}
 @media (hover:hover){
  .nut:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--bong-nut)}
  .nut-vien:hover{box-shadow:inset 0 0 0 1px var(--sage),var(--bong-nut)}
  .hero .nut-vien:hover{box-shadow:inset 0 0 0 1px rgb(var(--hero-chu-k) / .7),var(--bong-nut)}
  /* nghieng 3D theo chuot: nghieng.js ghi transform khi re (the shop chi nghieng, khong nhac len) */
  .shop-thanh a{position:relative}
  .shop-thanh a:hover{z-index:1;box-shadow:var(--bong-nut)}
  .nut:hover::after{transform:translateX(120%);transition:transform .7s var(--em)}
  .the-sp,.the-sp .anh{transition:transform .45s var(--em)}
  .the-sp:hover{transform:translateY(-4px)}
  .the-sp:hover .anh{transform:scale(1.04)}
 }

 /* cuon toi dau hien toi do: 02 Stagger cac the/muc (chuyen-dong.js gan .lo; JS hong thi khong an gi) */
 .js-cd .lo{opacity:0;transform:translateY(18px)}
 .js-cd .lo.da-hien{opacity:1;transform:none;transition:opacity .6s var(--em),transform .6s var(--em);transition-delay:calc(var(--tre,0) * 80ms)}
}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.cach{margin-top:20px}
section.sat-tren{padding-top:0}