/* === 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).
   Trang chu moi theo thiet ke khach 16/10: kem + reu dam + la non (cung ho mau voi mammo.css).
   Chot/cam cua anh Minh: ../DA-CHOT.md (doc truoc khi sua). */
:root{
 color-scheme:only light;
 --nen:#f4f1ea;     --nen-k:244 241 234;      /* nen trang: kem am */
 --the:#f9f6f1;     --vien:#dedbd0;   --vien-dam:#a9ad9c;          /* the noi tren nen */
 --chu:#2b3125;     --nhat:#5e6656;          /* chu chinh / chu phu */
 --chinh:#3e4a33;   --chinh-k:62 74 51;      /* reu: tieu de, nut */
 --reu-dam:#283524; --reu-dam-k:40 53 36;    /* nen khoi reu dam (Trai nghiem, Dong hanh) */
 --tren-reu:#f1efe6; --tren-reu-k:241 239 230; /* chu tren nen reu */
 --sage:#7c8b68;
 --tile:#eeebe3;     --mua-nen:#efece4;   /* o san pham / dai mua sam: nen nhat hon trang mot chut */
 --la-dam:#3f5a2a;   --lat-sang:#3a4f2c;  --lat-toi:#1d2a19; /* canh la + anh la mo (Dong hanh) */
 --tiktok:#111111;   --tiktok-xanh:#25f4ee; --tiktok-do:#fe2c55;  /* mau thuong hieu 3 san */
 --shopee:#ee4d2d;   --facebook:#1877f2;
 --la:#c5cfa8;      --tren-la:#2b3125;
 --buoi:#d6c04f;
 --anh-a:#c9d1b0;   --anh-b:#8a9a74;         /* o anh tam: chuyen mau nhe */
 --anh-c:#e1dccb;   --anh-d:#b9c29f;         /* o anh tam bien the (san pham) */
 --anh-e:#6f7d5b;   --anh-f:#3e4a33;         /* o anh tam bien the (toi) */
 --tren-anh:#f8f7f1; --tren-anh-k:248 247 241;
 --bong-k:43 49 37;
 --bong-noi:0 24px 48px -22px rgb(var(--bong-k) / .45),0 8px 18px -10px rgb(var(--bong-k) / .22);
 --bong-the:0 6px 18px -8px rgb(var(--bong-k) / .3);
 --bong-nut:0 12px 32px -8px rgb(var(--chinh-k) / .45);
 /* hero: anh tam + lop reu dam phu nua trai de chu sang doc duoc */
 --hero-du:#6f7d5b;
 --hero-phu-k:24 34 22; --hero-phu-trai:.72; --hero-phu-phai:.12;
 --hero-chu:#f8f7f1; --hero-chu-k:248 247 241;
 --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 = dien thoai, 1200px = may tinh. clamp(NHO, NHO - 400*(LON-NHO)/800 + (LON-NHO)/8 vw, LON) */
 --co-than:clamp(15px,14.5px + .125vw,16px);
 --co-nhan:clamp(13px,12.5px + .125vw,14px);
 --co-h3:clamp(17px,15.5px + .375vw,20px);
 --co-bai:clamp(18px,16px + .5vw,22px);
 --co-h2:clamp(28px,19px + 1.5vw,38px);
 --co-hero:clamp(40px,24px + 3.6vw,70px);
 --co-viet:clamp(22px,13px + 1.7vw,34px);
 --nut-cao:44px; --nut-nho:40px;
 --em:cubic-bezier(.22,1,.36,1);
 --em-vuot:cubic-bezier(.34,1.56,.64,1);
 --chu-tieu-de:"Noto Serif Display","Times New Roman",serif;
 --chu-than:"Be Vietnam Pro",system-ui,sans-serif;
}
/* === HET MAU-CHU === */

@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}

/* ---------- nen tang ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nen);color:var(--chu);font:400 var(--co-than)/1.6 var(--chu-than);overflow-x:hidden}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
svg{display:block}
.kho-bt{position:absolute;width:0;height:0;overflow:hidden}
.dac{fill:currentColor;stroke:none}
.net-the{stroke:var(--the)}
.chu-the{fill:var(--the);stroke:none}
.tt-xanh{fill:var(--tiktok-xanh);stroke:none}
.tt-do{fill:var(--tiktok-do);stroke:none}
.cach{margin-top:20px}
.bieu-tuong{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--chinh);outline-offset:3px}
.khung{max-width:1144px;margin:0 auto;padding:0 16px}
.khung-rong{max-width:1186px}
@media (min-width:760px){.khung{padding:0 32px}}
section{scroll-margin-top:72px}
h2,h3{font-family:var(--chu-tieu-de);font-weight:400;color:var(--chinh);line-height:1.18}
h2{font-size:var(--co-h2)}
.nhan{font-size:var(--co-nhan);letter-spacing:.14em;text-transform:uppercase;color:var(--nhat);margin-bottom:12px}
.mo-ta{color:var(--nhat);margin-top:16px;max-width:46ch}

/* ---------- nut ---------- */
.nut{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--nut-cao);padding:0 26px;border:0;border-radius:999px;
 background:var(--chinh);color:var(--tren-reu);font-weight:500;font-size:15px;cursor:pointer;white-space:nowrap}
.nut-vien{background:transparent;color:var(--chu);box-shadow:inset 0 0 0 1px var(--vien-dam)}
.nut-nho{min-height:var(--nut-nho);padding:0 20px}
.nut-sang{background:var(--the);color:var(--chu)}
.tron{display:grid;place-items:center;width:var(--nut-nho);height:var(--nut-nho);border-radius:50%;border:0;background:transparent;color:var(--chu);box-shadow:inset 0 0 0 1px var(--vien-dam);cursor:pointer}
.tron svg{width:16px;height:16px}
.lien-ket{display:inline-flex;align-items:center;gap:8px;min-height:var(--nut-nho);font-weight:500;color:var(--chu)}
.lien-ket-sang{color:var(--tren-reu)}
.gach-chan{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px;text-decoration-color:rgb(var(--bong-k) / .35)}
.lien-ket-sang.gach-chan{text-decoration-color:rgb(var(--tren-reu-k) / .5)}

/* ---------- anh tam ---------- */
.anh-tam{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--anh-a),var(--anh-b));color:var(--tren-anh);border-radius:6px;display:flex;align-items:flex-end}
.anh-tam::before{content:"";position:absolute;inset:-12% -22% auto auto;width:80%;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-tam .nhan-tam{position:relative;margin:10px;padding:2px 8px;border-radius:999px;background:rgb(var(--bong-k) / .5);font-size:13px;line-height:1.5}
.anh-toi{background:linear-gradient(165deg,var(--anh-e),var(--anh-f))}
.phat{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center;
 background:rgb(var(--bong-k) / .2);box-shadow:inset 0 0 0 2px rgb(var(--tren-anh-k) / .9);color:var(--tren-anh);border:0;padding:0;cursor:pointer}
.phat svg{width:24px;height:24px;fill:currentColor;stroke:none;margin-left:3px}

/* ---------- dau trang ---------- */
.dau{background:var(--nen);position:relative;z-index:30}
.dau-trong{display:grid;grid-template-columns:auto 1fr auto;gap:8px 16px;align-items:center;max-width:1280px;margin:0 auto;padding:10px 16px}
.logo{display:grid;justify-items:center;line-height:1;color:var(--chu)}
.logo b{font:400 42px/1 var(--chu-tieu-de)}
.logo small{font-size:13px;letter-spacing:.2em;margin-top:2px}
.menu{grid-column:1 / -1;order:3;display:grid;grid-template-columns:repeat(3,1fr);gap:0 8px}
.menu a{display:grid;place-items:center;min-height:var(--nut-nho);font-size:14px;color:var(--chu)}
.dau-phai{display:flex;align-items:center;gap:2px;grid-column:3;justify-self:end}
.bt-bieu{display:grid;place-items:center;width:var(--nut-nho);height:var(--nut-nho);border:0;background:transparent;border-radius:50%;cursor:pointer;color:var(--chu)}
.bt-bieu .bieu-tuong{width:20px;height:20px}
.dau-phai .nut{margin-left:10px;padding:0 22px;background:var(--reu-dam);min-height:42px;font-size:14px}
@media (max-width:420px){.dau-phai .nut{padding:0 14px;margin-left:4px}.dau-trong{gap:8px}}
@media (min-width:900px){
 .dau{position:sticky;top:0}
 .dau-trong{padding:6px 64px;grid-template-columns:1fr auto 1fr}
 .menu{grid-column:auto;order:0;display:flex;gap:clamp(18px,2.6vw,36px)}
 .dau-phai{grid-column:auto}
}

/* ---------- hero ---------- */
.hero{position:relative;color:var(--hero-chu);background:var(--hero-du);overflow:hidden;min-height:clamp(520px,43vw,560px);display:grid;align-items:center}
.hero-anh{position:absolute;inset:0;z-index:0}
.hero-anh img{width:100%;height:100%;object-fit:cover;display:block}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgb(var(--hero-phu-k) / var(--hero-phu-trai)),rgb(var(--hero-phu-k) / var(--hero-phu-phai)))}
.hero-noi{position:relative;z-index:2;width:100%;padding-top:56px;padding-bottom:44px}
.hero-chu{max-width:400px}
.hero-nhan{font-size:var(--co-nhan);letter-spacing:.2em;margin-bottom:10px;opacity:.9}
.hero h1{font:400 var(--co-hero)/1.04 var(--chu-tieu-de);color:var(--hero-chu)}
.hero-mo-ta{margin:18px 0 26px;font-size:var(--co-than);max-width:22.5em;line-height:1.55}
.hero-cham{display:flex;align-items:center;gap:12px;margin-top:30px;font-size:15px}
.hero-cham i{display:block;width:34px;height:1px;background:rgb(var(--hero-chu-k) / .7)}
.hero-cham b{font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.hero-viet{margin-top:28px;font:italic 300 var(--co-viet)/1.3 var(--chu-tieu-de);color:var(--hero-chu);text-align:center;max-width:6.4em;margin-left:auto;margin-right:3%;rotate:-15deg}
.nhan-hero{position:absolute;right:16px;bottom:12px;z-index:3;padding:2px 10px;border-radius:999px;background:rgb(var(--bong-k) / .5);font-size:13px}
@media (min-width:900px){
 .hero-noi{display:grid;grid-template-columns:1fr 1fr;align-items:end;padding-left:max(32px,calc((100% - 1080px) / 2));padding-right:max(32px,calc((100% - 1080px) / 2));max-width:1280px;margin:0 auto;padding-top:60px;padding-bottom:44px}
 .hero-viet{margin:0 1% 0 auto;align-self:center}
}

/* ---------- san pham ---------- */
.muc{padding:clamp(32px,24px + 2vw,44px) 0 clamp(28px,20px + 2vw,36px)}
.muc-dau{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:end;margin-bottom:clamp(20px,2.5vw,32px)}
.ba-the{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:900px){.ba-the{grid-template-columns:repeat(4,1fr);gap:20px}}
@media (min-width:1260px){.ba-the{margin-inline:-52px}}
.the-sp{background:var(--tile);border-radius:6px;display:flex;flex-direction:column;padding:16px 14px 20px}
.anh-sp{flex:1;aspect-ratio:1 / 1;background:linear-gradient(180deg,var(--anh-c),var(--anh-d));border-radius:6px;margin-bottom:16px}
.anh-sp::before{inset:auto -18% -10% auto;width:60%}
.the-sp-chu{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.the-sp h3{font:400 clamp(16px,15px + .3vw,19px)/1.35 var(--chu-than);color:var(--chu)}
.the-sp p{color:var(--nhat);font-size:15px;line-height:1.45;max-width:30ch;min-height:2.9em}
.the-sp .tron{margin-top:12px}
@media (min-width:900px){.anh-sp{aspect-ratio:auto;min-height:236px}}

/* ---------- cau chuyen ---------- */
.cau-chuyen{display:grid;gap:0}
.cc-video{aspect-ratio:16 / 10;border-radius:0}
.cc-chu{padding:28px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--the)}
.cc-chu h2{margin-bottom:8px}
.cc-chu .mo-ta{margin:0 0 14px;font-size:15px;line-height:1.55}
.cc-anh{aspect-ratio:16 / 9;border-radius:0}
@media (min-width:900px){
 .cau-chuyen{grid-template-columns:48fr 30fr 22fr}
 .cc-video{aspect-ratio:auto;min-height:360px}
 .cc-chu{justify-content:center;padding:24px 30px 24px 40px;background:var(--nen)}
 .cc-anh{aspect-ratio:auto}
}

/* ---------- nguyen lieu ---------- */
.nguyen-lieu{display:grid;gap:24px;align-items:center}
.cap{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 14px}
.cap h3{font:500 16px/1.3 var(--chu-than);color:var(--chu);margin-top:8px}
.cap p{color:var(--nhat);font-size:15px;line-height:1.4}
.cap .anh-tam{aspect-ratio:128 / 75;border-radius:4px}
@media (min-width:900px){
 .nguyen-lieu{grid-template-columns:36fr 64fr;gap:48px}
 .cap{grid-template-columns:repeat(3,1fr);gap:26px 36px}
}

.nguyen-lieu h2{font-size:clamp(28px,19px + 1.7vw,42px)}

/* ---------- trai nghiem: video hang ngang (VIDEO-HANG-NGANG-MAU) ---------- */
.trai-nghiem{display:grid}
.tn-anh{min-height:240px;border-radius:0}
.tn-bang{background:var(--reu-dam);color:var(--tren-reu);min-width:0;display:grid;padding:28px 0 18px}
.tn-chu{padding:0 20px 18px}
.tn-chu .nhan{color:rgb(var(--tren-reu-k) / .8)}
.tn-chu h2{color:var(--tren-reu);font-size:clamp(24px,16px + 1.2vw,30px);max-width:15em}
.tn-chu .lien-ket{margin-top:14px}
.tn-hang{position:relative;min-width:0;padding:0 20px;--tn-gap:12px}
.tn-ray{display:flex;gap:var(--tn-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 0}
.tn-ray::-webkit-scrollbar{display:none}
.tn-khung{position:relative;margin:0;flex:0 0 clamp(130px,46vw,170px);aspect-ratio:9 / 20;border-radius:12px;overflow:hidden;scroll-snap-align:start;
 border:1px solid rgb(var(--tren-reu-k) / .5);background:linear-gradient(165deg,var(--anh-a),var(--anh-b));display:flex;align-items:flex-end}
.tn-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}
.tn-phat{position:absolute;left:50%;top:50%;width:56%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;box-shadow:inset 0 0 0 1.5px rgb(var(--tren-anh-k) / .9)}
.tn-phat::after{content:"";position:absolute;left:38%;top:30%;border-left:.9em solid var(--tren-anh);border-top:.62em solid transparent;border-bottom:.62em solid transparent;font-size:15px}
.tn-khung .nhan-tam{position:relative;margin:8px;padding:0 6px;border-radius:999px;background:rgb(var(--bong-k) / .5);font-size:13px;line-height:1.5}
.tn-tiep{position:absolute;right:6px;top:calc(50% - 22px);z-index:3;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--the);color:var(--chu);cursor:pointer;box-shadow:0 4px 14px -4px rgb(var(--bong-k) / .5)}
.tn-tiep svg{width:18px;height:18px}
.tn-dem{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px;padding-right:20px;font-size:15px;letter-spacing:.08em;color:rgb(var(--tren-reu-k) / .8)}
.tn-dem::before{content:"";width:16px;height:1px;background:rgb(var(--tren-reu-k) / .6)}
@media (min-width:900px){
 .trai-nghiem{grid-template-columns:39fr 61fr;min-height:300px}
 .tn-anh{min-height:0}
 .tn-bang{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center;padding:30px 0 22px}
 .tn-chu{padding:0 0 0 38px}
 .tn-hang{padding:0 48px 0 0;--tn-gap:16px}
 .tn-khung{flex:0 0 calc((100% - 3 * var(--tn-gap)) / 4)}
 .tn-tiep{right:24px}
 .tn-dem{grid-column:1 / -1;padding-right:44px;margin-top:0}
}

/* ---------- noi mua ---------- */
.noi-mua{position:relative;display:grid;gap:20px;align-items:center;background:var(--mua-nen);padding:28px 16px;overflow:hidden}
.noi-mua h2{font-size:clamp(24px,18px + 1.4vw,30px)}
.noi-mua .mo-ta{font-size:15px;margin-top:10px}
.ba-khoang{display:grid;gap:12px;position:relative;z-index:1}
.the-mua{background:var(--the);border-radius:8px;box-shadow:var(--bong-the);padding:18px 14px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:500;color:var(--chu)}
.the-mua svg{width:46px;height:46px;fill:currentColor;stroke:none}
.mau-tiktok svg{color:var(--tiktok)}
.mau-shopee svg{color:var(--shopee)}
.mau-shopee span{color:var(--shopee)}
.mau-fb svg{color:var(--facebook)}
/* dien thoai: la that o goc phai tren dai Mua sam (anh 16/10 22:1x "tren dien thoai mat cai la") */
.la-trang-tri{display:block;position:absolute;right:0;top:0;width:118px;height:150px;background:url(anh/mau/la.jpg) right top/contain no-repeat;mix-blend-mode:multiply;pointer-events:none}
.noi-mua > div:first-child{position:relative;z-index:1;padding-right:92px}
@media (min-width:900px){
 .noi-mua{grid-template-columns:minmax(260px,.85fr) 2.2fr;gap:28px;padding:26px max(32px,calc((100% - 1080px) / 2 + 76px)) 26px max(32px,calc((100% - 1080px) / 2 - 8px))}
 .ba-khoang{grid-template-columns:repeat(3,1fr);gap:18px}
 /* la that cat tu anh mau khach (16/10 22:0x anh: "chi can doan la"); da can nen ve trang ⇒ multiply hoa vao nen dai */
 .noi-mua > div:first-child{padding-right:0}
 .la-trang-tri{display:block;position:absolute;right:0;top:0;bottom:0;width:200px;height:auto;background:url(anh/mau/la.jpg) right center/cover no-repeat;mix-blend-mode:multiply}
}

/* ---------- dong hanh ---------- */
.hop-tac{display:grid;background:var(--nen)}
.ht-trai{position:relative;background:
 radial-gradient(60% 70% at 20% 15%,var(--lat-sang) 0,transparent 70%),
 radial-gradient(55% 60% at 85% 85%,var(--lat-toi) 0,transparent 70%),
 linear-gradient(160deg,var(--reu-dam),var(--lat-toi));color:var(--tren-reu);padding:32px 20px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:14px}
.ht-trai::before{content:"";position:absolute;inset:auto -20% -30% auto;width:70%;aspect-ratio:1;background:rgb(var(--tren-reu-k) / .09);
 -webkit-mask:var(--la-svg) center/contain no-repeat;mask:var(--la-svg) center/contain no-repeat}
.ht-trai > *{position:relative}
.ht-trai h2{color:var(--tren-reu);font-size:clamp(26px,19px + 1.5vw,34px)}
.ht-trai p{font-size:15px;line-height:1.55;max-width:34ch}
.ba-y{display:grid;gap:0}
.ba-y article{padding:22px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;border-top:1px dotted var(--vien-dam)}
.ba-y h3{font-family:var(--chu-than);font-weight:400;font-size:clamp(16px,15px + .35vw,19px);color:var(--chu)}
.ba-y p{color:var(--nhat);font-size:15px;line-height:1.5;flex:1;margin-bottom:10px}
.ba-y .bieu-tuong{width:34px;height:34px;color:var(--chu);stroke-width:1.1}
@media (min-width:900px){
 .hop-tac{grid-template-columns:36fr 64fr}
 .ht-trai{padding:36px 36px 36px max(32px,calc((100vw - 1122px) / 2))}
 .ba-y{grid-template-columns:repeat(3,1fr);align-items:stretch}
 .ba-y article{border-top:0;border-left:1px dotted var(--vien-dam);padding:36px 24px}
 .ba-y article:first-child{border-left:0;padding-left:44px}
}

/* ---------- bai viet ---------- */
.bai-phu{display:grid;gap:22px}
.bai-phu article{display:flex;flex-direction:column;gap:10px}
.bai-phu .anh-tam{aspect-ratio:16 / 8;border-radius:3px}
.bai-phu h3{font-size:var(--co-bai);line-height:1.3;color:var(--chu)}
.bai-phu .lien-ket{font-size:15px;min-height:var(--nut-nho)}
#journal h2{font-size:clamp(26px,18px + 1.5vw,33px)}
@media (min-width:760px){.bai-phu{grid-template-columns:repeat(3,1fr);gap:24px}.bai-phu .anh-tam{aspect-ratio:358 / 140}}

/* ---------- cam ket ---------- */
.cam-ket{background:var(--the)}
.loi-ich{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 16px;padding:28px 0}
.loi-ich li{display:flex;align-items:center;gap:14px;font-size:15px;line-height:1.4}
.loi-ich .bieu-tuong{width:34px;height:34px;flex:none;color:var(--chu);stroke-width:1.2}
@media (min-width:900px){.loi-ich{grid-template-columns:repeat(4,1fr);gap:24px;padding:40px 0}}

/* ---------- chan trang ---------- */
.chan{padding:clamp(28px,3vw,40px) 0 18px;background:var(--the)}
.chan-luoi{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 20px}
.chan-ten{grid-column:1 / -1}
.chan-ten .logo{justify-items:start}
.chan-ten p{margin:10px 0 10px;color:var(--nhat)}
.mxh{display:flex;gap:0;margin-left:-5px}
.mxh .bt-bieu{width:38px;height:38px}
.mxh .bt-bieu span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--chu);color:var(--the)}
.mxh .bieu-tuong{width:16px;height:16px}
.chan h3{font:500 15px/1.3 var(--chu-than);color:var(--chu);margin-bottom:8px}
.chan li{color:var(--nhat);font-size:15px;line-height:1.4;min-height:34px;display:flex;align-items:center;padding:2px 0}
.chan li a{display:inline-flex;align-items:center;min-height:38px;color:var(--nhat)}
.nhan-tin{grid-column:1 / -1}
.o-email{display:flex;gap:8px;align-items:center}
.o-email input{flex:1;min-width:0;height:var(--nut-cao);padding:0 18px;border-radius:999px;border:1px solid var(--vien-dam);background:var(--the);font:inherit;font-size:15px;color:var(--chu)}
.o-email input::placeholder{color:var(--nhat)}
.o-email .nut{width:var(--nut-cao);padding:0;background:var(--reu-dam)}
.chan-cuoi{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;margin-top:24px;padding-top:14px;color:var(--nhat);font-size:15px}
.chan-cuoi span+span{display:flex;flex-wrap:wrap;gap:4px 14px}
@media (min-width:900px){.chan-cuoi span span+span::before{content:"|";margin-right:14px;color:var(--vien-dam)}}
@media (min-width:900px){
 .chan-luoi{grid-template-columns:.9fr 1fr 1.1fr 1.25fr 1.35fr;gap:0}
 .chan-luoi > div{padding:6px 22px}
 .chan-luoi > div+div{border-left:1px solid var(--vien)}
 .chan-luoi > .chan-ten{padding-left:0}
 .chan-ten,.nhan-tin{grid-column:auto}
}

/* ---------- chuyen dong (24 ten): 05 Mask reveal tieu de hero + 02 Stagger; chay 1 lan <=0,8s ---------- */
.hero a:focus-visible,.hero button:focus-visible{outline-color:var(--hero-chu)}
.tn-bang :focus-visible,.ht-trai :focus-visible{outline-color:var(--tren-reu)}
@media (prefers-reduced-motion:no-preference){
 .hero h1{animation:mm-mask .8s var(--em) both}
 .hero-nhan{animation:mm-noi .6s var(--em) both}
 .hero-mo-ta{animation:mm-noi .6s var(--em) .12s both}
 .hero .nut{animation:mm-noi .6s var(--em) .18s both}
 .hero-viet,.hero-cham{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{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) / .5) 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:hover::after{transform:translateX(120%);transition:transform .7s var(--em)}
  .the-sp{transition:transform .45s var(--em)}
  .the-sp:hover{transform:translateY(-4px)}
 }
 .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}}
@media (max-width:899px){
 .hero::after{background:rgb(var(--hero-phu-k) / .58)}
 .hero-viet{margin-right:0;margin-top:36px}
}

/* ---------- may tinh: cac khoi tran ngang nhu mau khach (dien thoai xep doc) ---------- */
@media (min-width:900px){
 #cau-chuyen > .khung,#trai-nghiem > .khung,#hop-tac > .khung,#noi-mua > .khung{max-width:none;padding:0}
}