:root{--xanh:#477B15;--xanh-dam:#2E500D;--vang:#FFC61A;--kem:#FAF6EA;--chu:#162706;--nhat:#F1F6EA;--vien:#DDEBC8;--phu:#3d4a30}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Nunito',sans-serif;color:var(--chu);background:var(--kem);line-height:1.65;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:'Baloo 2','Nunito',sans-serif;line-height:1.15;color:var(--xanh-dam);margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.hep{max-width:760px}
.nhan{font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--xanh)}
section{padding:72px 0}
.tieu-de{text-align:center;max-width:660px;margin:0 auto 40px}
.tieu-de h2{font-size:clamp(28px,4.5vw,42px);margin:6px 0 10px}
.tieu-de p{margin:0;color:var(--phu)}
.nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--xanh);color:#fff;text-decoration:none;font-weight:800;padding:13px 24px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-weight:800;transition:transform .15s,background .15s}
.nut:hover{background:var(--xanh-dam);transform:translateY(-2px)}
.nut.phu{background:#fff;color:var(--xanh-dam);border:2px solid var(--xanh)}
.nut.vang{background:var(--vang);color:var(--chu)}
.nut.cam{background:#EE4D2D}
.nut.den{background:#111}
.trang{background:#fff}
.ghi-chu{text-align:center;margin-top:22px;font-size:15px;color:var(--phu)}

/* Thanh trên */
.top-bar{background:var(--xanh-dam);color:#e6f0da;font-size:13.5px;text-align:center;padding:6px 12px}
.top-bar a{color:var(--vang);font-weight:800;text-decoration:none}
header{position:sticky;top:0;z-index:40;background:rgba(250,246,234,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--vien)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:'Baloo 2';font-weight:800;color:var(--xanh-dam);font-size:20px;white-space:nowrap}
.logo img{width:48px;height:48px}
nav ul{display:flex;gap:22px;align-items:center;list-style:none;margin:0;padding:0}
nav a{text-decoration:none;font-weight:700;font-size:15.5px}
nav a:hover,nav a.dang{color:var(--xanh)}
nav .nut{padding:9px 18px;font-size:15px}
.mo-menu{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:10px}
.mo-menu span{display:block;height:3px;background:var(--xanh-dam);border-radius:3px;margin:5px 0}
@media(max-width:900px){
  .mo-menu{display:block}
  nav{position:absolute;top:70px;left:0;right:0;background:var(--kem);border-bottom:1px solid var(--vien);display:none}
  nav.mo{display:block}
  nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 18px}
  nav li a{display:block;padding:12px 0;border-bottom:1px solid var(--vien)}
  nav li .nut{margin-top:12px;border:0}
}

/* Slider đầu trang */
.slider{position:relative;overflow:hidden;background:var(--kem)}
.slide{display:none;min-height:560px;align-items:center}
.slide.hien{display:flex;animation:mo .6s ease}
@keyframes mo{from{opacity:0}to{opacity:1}}
.slide .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;width:100%}
.slide h1,.slide h2{font-size:clamp(38px,6vw,68px);margin:10px 0 16px}
.slide h1 span,.slide h2 span{color:var(--xanh)}
.slide p{font-size:19px;max-width:520px;margin:0 0 26px}
.slide .anh{display:flex;justify-content:center}
.slide .anh img{height:min(460px,60vh);width:auto;filter:drop-shadow(0 24px 30px rgba(46,80,13,.25))}
.slide.nen-anh{background-size:cover;background-position:center;color:#fff}
.slide.nen-anh h2,.slide.nen-anh h2 span{color:#fff}
.slide.nen-anh .nhan{color:var(--vang)}
.slide.nen-anh .wrap{grid-template-columns:1fr}
.slide.vang{background:radial-gradient(circle at 75% 50%,#FFEDB0 0,#FFEDB0 28%,transparent 29%)}
.cac-nut{display:flex;flex-wrap:wrap;gap:12px}
.cham{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.cham button{width:12px;height:12px;border-radius:50%;border:2px solid var(--xanh);background:#fff;padding:0;cursor:pointer}
.cham button.dang{background:var(--xanh);width:30px;border-radius:8px}
@media(max-width:820px){
  .slide{min-height:auto;padding:30px 0 56px}
  .slide .wrap{grid-template-columns:1fr;text-align:center}
  .slide p{margin-inline:auto}.cac-nut{justify-content:center}
  .slide .anh{order:-1}.slide .anh img{height:230px}
  .slide.vang{background:radial-gradient(circle at 50% 22%,#FFEDB0 0,#FFEDB0 140px,transparent 141px)}
  .slide.nen-anh{min-height:460px}
}

/* Cam kết 4 ô */
.cam-ket{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cam-ket div{background:var(--nhat);border-radius:18px;padding:22px;text-align:center}
.cam-ket b{display:block;font-family:'Baloo 2';font-size:20px;color:var(--xanh-dam)}
.cam-ket span{font-size:15px}
@media(max-width:820px){.cam-ket{grid-template-columns:1fr 1fr}}

/* Hai cột ảnh chữ */
.ke{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ke img.bo{border-radius:24px;width:100%;aspect-ratio:4/3;object-fit:cover}
.ke h2{font-size:clamp(28px,4.5vw,42px);margin:6px 0 16px}
.ke p{margin:0 0 14px}
@media(max-width:820px){.ke{grid-template-columns:1fr;gap:26px}.ke.dao>:first-child{order:2}}

/* Lưới vị */
.luoi-vi{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vi{background:#fff;border-radius:22px;padding:18px 14px 20px;text-align:center;border:1px solid var(--vien);position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;text-decoration:none;display:block}
.vi:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(46,80,13,.12)}
.vi::before{content:"";position:absolute;left:50%;top:22px;width:150px;height:150px;transform:translateX(-50%);border-radius:50%;background:var(--mau);opacity:.28}
.vi img{position:relative;height:190px;width:auto;margin:0 auto 12px}
.vi h3{font-size:20px}
.vi .gia{font-weight:800;color:var(--xanh)}
.vi .xem{display:inline-block;margin-top:8px;font-size:14px;font-weight:800;color:var(--xanh-dam);border-bottom:2px solid var(--vang)}
.the{position:absolute;top:12px;left:12px;background:var(--vang);font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;z-index:2}
@media(max-width:900px){.luoi-vi{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.vi img{height:150px}.vi::before{width:120px;height:120px}}

/* Khối xanh */
.xanh-nen{background:var(--xanh);color:#fff}
.xanh-nen h2,.xanh-nen h3{color:#fff}
.xanh-nen .nhan{color:var(--vang)}
.xanh-nen .tieu-de p{color:#e6f0da}
.buoc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.buoc div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:24px}
.buoc b{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--vang);color:var(--chu);font-family:'Baloo 2';font-size:20px;margin-bottom:10px}
.buoc p{margin:6px 0 0;color:#eef5e6}
@media(max-width:820px){.buoc{grid-template-columns:1fr}}

/* Combo */
.luoi-combo{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.combo{background:#fff;border-radius:24px;padding:28px 24px;border:2px solid var(--vien);display:flex;flex-direction:column}
.combo.noi{border-color:var(--vang);box-shadow:0 16px 36px rgba(255,198,26,.25)}
.combo h3{font-size:26px;margin:6px 0 8px}
.combo p{margin:0 0 16px;flex:1}
.combo .gia{font-family:'Baloo 2','Nunito',sans-serif;font-size:34px;font-weight:800;color:var(--xanh-dam)}
.combo .gia s{font-family:'Nunito';font-size:16px;color:#7b8570;font-weight:400;margin-left:6px}
.combo .nut{margin-top:14px}
@media(max-width:900px){.luoi-combo{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

/* Thư viện ảnh nguồn gốc */
.thu-vien{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:220px 220px;gap:14px}
.thu-vien figure{margin:0;position:relative;border-radius:18px;overflow:hidden}
.thu-vien figure:first-child{grid-row:span 2}
.thu-vien img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.thu-vien figure:hover img{transform:scale(1.05)}
.thu-vien figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 10px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;font-weight:700;font-size:14.5px}
@media(max-width:820px){.thu-vien{grid-template-columns:1fr 1fr;grid-template-rows:auto}.thu-vien figure{aspect-ratio:4/3}.thu-vien figure:first-child{grid-column:span 2;grid-row:auto}}

/* Video */
.luoi-video{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.video{background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--vien)}
.video .khung{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer}
.video .khung img{width:100%;height:100%;object-fit:cover;opacity:.85}
.video .khung iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .phat{position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:50%;background:var(--vang);display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.video .phat::after{content:"";border-left:22px solid var(--chu);border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px}
.video .chu{padding:14px 18px}
.video h3{font-size:19px}
.video small{color:var(--phu)}
@media(max-width:720px){.luoi-video{grid-template-columns:1fr}}

/* KOC */
.luoi-koc{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.koc{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;text-decoration:none;color:#fff;display:block;background:linear-gradient(160deg,var(--m1),var(--m2))}
.koc img{width:100%;height:100%;object-fit:cover}
.koc .phat{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.koc .phat::after{content:"";border-left:18px solid var(--xanh-dam);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.koc .tt{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.koc .tt b{display:block;font-size:15px}
.koc .tt span{font-size:13px;opacity:.9}
.koc .luot{position:absolute;top:12px;left:12px;background:var(--vang);color:var(--chu);font-weight:800;font-size:12.5px;padding:3px 10px;border-radius:999px}
@media(max-width:900px){.luoi-koc{grid-template-columns:repeat(2,1fr)}}
.so{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center;margin-bottom:36px}
.so div{background:var(--nhat);border-radius:20px;padding:24px 16px}
.so strong{display:block;font-family:'Baloo 2','Nunito',sans-serif;font-size:clamp(32px,5vw,46px);color:var(--xanh);line-height:1}
.so span{font-size:15px}
@media(max-width:620px){.so{grid-template-columns:1fr}}

/* Sổ tay */
.luoi-bai{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bai{background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--vien);text-decoration:none;display:flex;flex-direction:column;transition:transform .2s}
.bai:hover{transform:translateY(-4px)}
.bai img{aspect-ratio:16/10;object-fit:cover;width:100%}
.bai div{padding:18px}
.bai h3{font-size:20px;margin:4px 0 6px}
.bai p{margin:0;font-size:15px;color:var(--phu)}
@media(max-width:900px){.luoi-bai{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* Kênh mua */
.luoi-kenh{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kenh{background:#fff;border-radius:20px;padding:20px 22px;text-decoration:none;display:flex;gap:14px;align-items:center;transition:transform .15s;border:1px solid var(--vien)}
.kenh:hover{transform:translateY(-3px)}
.kenh i{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:800;font-size:18px;font-family:'Baloo 2'}
.kenh h3{font-size:19px}
.kenh p{margin:0;font-size:14px;color:var(--phu)}
@media(max-width:900px){.luoi-kenh{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.luoi-kenh{grid-template-columns:1fr}}

/* Trang con */
.dau-trang{background:var(--xanh);color:#fff;padding:48px 0 44px}
.dau-trang h1{color:#fff;font-size:clamp(32px,5vw,50px)}
.dau-trang p{margin:8px 0 0;color:#e6f0da;max-width:640px}
.duong-dan{font-size:14px;color:#cfe0bb;margin-bottom:8px}
.duong-dan a{text-decoration:none}
.noi-dung h2{font-size:28px;margin:34px 0 10px}
.noi-dung h3{font-size:21px;margin:24px 0 8px}
.noi-dung p{margin:0 0 14px}
.noi-dung ul{padding-left:20px}
.noi-dung img{border-radius:18px;margin:18px 0}
.noi-dung .luu-y{background:#FFF4D1;border-left:4px solid var(--vang);padding:12px 16px;border-radius:8px;font-size:15px}
.nguon{font-size:12.5px;color:#7b8570}

/* Trang sản phẩm */
.sp{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.sp .hinh{border-radius:28px;padding:30px;display:flex;justify-content:center;background:radial-gradient(circle,var(--mau) 0,var(--mau) 45%,#fff 46%);}
.sp .hinh img{height:420px;width:auto;filter:drop-shadow(0 20px 26px rgba(0,0,0,.18))}
.sp h1{font-size:clamp(34px,5vw,52px);margin:6px 0 6px}
.sp .gia{font-family:'Baloo 2','Nunito',sans-serif;font-size:36px;font-weight:800;color:var(--xanh)}
.sp ul{padding-left:20px;margin:14px 0 22px}
.sp .cac-nut .nut{flex:1 1 160px}
@media(max-width:820px){.sp{grid-template-columns:1fr;gap:22px}.sp .hinh img{height:280px}}

footer{background:var(--xanh-dam);color:#dfe9d2;padding:48px 0 100px;font-size:15px}
footer .cot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
footer h4{font-family:'Baloo 2';color:#fff;font-size:18px;margin:0 0 10px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:6px 0}
footer a{color:#fff;text-decoration:none}
footer a:hover{text-decoration:underline}
footer .luu-y{border-top:1px solid rgba(255,255,255,.15);padding-top:16px;margin-top:28px;font-size:13.5px;color:#b9c9a6}
@media(max-width:820px){footer .cot{grid-template-columns:1fr 1fr}}
@media(max-width:480px){footer .cot{grid-template-columns:1fr}}

.goi-nhanh{display:none}
@media(max-width:820px){.goi-nhanh{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;gap:10px}.goi-nhanh a{flex:1;padding:13px 10px;box-shadow:0 8px 20px rgba(0,0,0,.18)}}

/* Dễ dùng bằng bàn phím, tôn trọng người tắt hiệu ứng */
a:focus-visible,button:focus-visible{outline:3px solid var(--vang);outline-offset:3px;border-radius:8px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Video phóng sự: video đầu to hơn */
.luoi-video .video:first-child{grid-column:span 2}
@media(max-width:720px){.luoi-video .video:first-child{grid-column:auto}}

/* QR Zalo */
.qr{display:flex;gap:24px;align-items:center;background:#fff;border-radius:22px;padding:20px 24px;margin-top:22px;border:1px solid var(--vien)}
.qr img{width:170px;flex:none;border-radius:12px}
.qr h3{font-size:22px;margin-bottom:6px}
.qr p{margin:0;color:var(--phu)}
@media(max-width:560px){.qr{flex-direction:column;text-align:center}}


/* ===== Bản 4: giỏ hàng, KOC, nhận xét, hỏi đáp, hiệu ứng ===== */
header .wrap{gap:12px}
.dau-phai{display:flex;align-items:center;gap:6px}
.nut-gio{position:relative;background:var(--xanh);color:#fff;border:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.nut-gio:hover{transform:scale(1.07)}
.so-gio{position:absolute;top:-4px;right:-4px;background:var(--vang);color:var(--chu);font-weight:800;font-size:12px;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
.so-gio.nay{animation:nay .5s ease}
@keyframes nay{30%{transform:scale(1.5)}60%{transform:scale(.9)}}
@media(min-width:901px){nav{margin-left:auto}}

/* Thẻ vị có nút giỏ */
.vi{display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s}
.vi-link{text-decoration:none;display:block;flex:1}
.vi .them{margin-top:10px;padding:10px 12px;font-size:14.5px;width:100%}
.them.lon{font-size:17px}
.chon-vi{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chon-vi select{flex:1 1 120px;font:inherit;font-size:15px;padding:9px 10px;border-radius:12px;border:1.5px solid var(--vien);background:#fff;color:var(--chu)}

/* Giỏ hàng trượt từ phải */
.gio{position:fixed;inset:0;z-index:60;pointer-events:none}
.gio-nen{position:absolute;inset:0;background:rgba(22,39,6,.45);opacity:0;transition:opacity .25s}
.gio-khung{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--kem);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease;box-shadow:-10px 0 30px rgba(0,0,0,.15)}
.gio.mo{pointer-events:auto}.gio.mo .gio-nen{opacity:1}.gio.mo .gio-khung{transform:none}
.gio-dau{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--vien)}
.gio-dau h3{font-size:22px}
.dong-gio,.dong-video{background:none;border:0;font-size:32px;line-height:1;cursor:pointer;color:var(--xanh-dam);width:44px;height:44px}
.gio-ds{flex:1;overflow-y:auto;padding:12px 20px}
.gio-mon{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--vien)}
.gio-mon img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:12px}
.gio-mon>div:nth-child(2){flex:1;min-width:0}
.gio-mon b{display:block;font-size:15px;line-height:1.3}
.gio-mon small{display:block;color:var(--phu);font-size:13px}
.gio-mon span{font-size:14px;color:var(--xanh);font-weight:800}
.sl{display:flex;align-items:center;gap:6px}
.sl button{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--xanh);background:#fff;color:var(--xanh-dam);font-weight:800;cursor:pointer}
.sl span{min-width:18px;text-align:center;color:var(--chu)}
.gio-trong{text-align:center;color:var(--phu);margin-top:40px}
.gio-cuoi{padding:14px 20px 20px;border-top:1px solid var(--vien);background:#fff}
.gio-tong{display:flex;justify-content:space-between;font-size:17px}
.gio-tong b{font-family:'Baloo 2','Nunito',sans-serif;font-size:22px;color:var(--xanh-dam)}
.gio-qua{margin:2px 0 10px;font-size:13.5px;color:var(--xanh);font-weight:700}
.form-dat{display:grid;gap:8px}
.form-dat input,.form-dat textarea{font:inherit;font-size:15px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--vien);background:var(--kem);width:100%}
.form-dat input:focus,.form-dat textarea:focus{outline:2px solid var(--vang);border-color:var(--vang)}
.form-dat .nho{margin:0;font-size:13px;color:var(--phu)}
.form-dat .bao{margin:0;font-size:14px;color:#B3261E;min-height:1em}
.an-di{position:absolute;left:-9999px;width:1px;height:1px}
.dat-xong{text-align:center;padding:40px 10px}
.dat-xong b{font-family:'Baloo 2';font-size:24px;color:var(--xanh-dam)}

/* KOC: thẻ bấm mở video */
.hang-koc{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 16px;-webkit-overflow-scrolling:touch}
.koc-the{flex:0 0 220px;scroll-snap-align:start;aspect-ratio:9/14;border:0;border-radius:22px;cursor:pointer;position:relative;overflow:hidden;color:#fff;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:18px 12px;background:radial-gradient(circle at 50% 35%,var(--mau) 0,var(--mau) 30%,#2E500D 75%);transition:transform .25s}
.koc-the:hover{transform:translateY(-6px) rotate(-1deg)}
.koc-anh{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:62%}
.koc-anh img{width:100%;height:auto;filter:drop-shadow(0 12px 16px rgba(0,0,0,.3))}
.koc-the .phat{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:nhip 2s infinite}
.koc-the .phat::after{content:"";border-left:18px solid var(--xanh-dam);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
@keyframes nhip{70%{box-shadow:0 0 0 16px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.koc-the b{font-family:'Baloo 2','Nunito',sans-serif;font-size:19px;position:relative}
.koc-the small{font-size:13px;opacity:.9;position:relative}
@media(max-width:560px){.koc-the{flex-basis:62%}}

/* Cửa sổ video */
.video-mo{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:16px}
.video-mo.mo{display:flex}
.video-mo-nen{position:absolute;inset:0;background:rgba(0,0,0,.75)}
.video-mo-khung{position:relative;width:min(900px,100%);display:flex;flex-direction:column;align-items:center;gap:10px}
.video-mo.doc .video-mo-khung{width:min(380px,100%)}
.video-mo-chua{width:100%;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden}
.video-mo.doc .video-mo-chua{aspect-ratio:9/16;max-height:78vh}
.video-mo-chua iframe{width:100%;height:100%;border:0}
.dong-video{position:absolute;top:-48px;right:0;color:#fff}
.mo-tiktok{color:#fff;font-weight:800;text-decoration:none;border-bottom:2px solid var(--vang)}

/* Ô video trong thư viện ảnh */
.o-video{cursor:pointer}
.nho-phat{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:var(--vang);display:grid;place-items:center}
.nho-phat::after{content:"";border-left:18px solid var(--chu);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}

/* Dải ảnh chạy: cách ăn */
.dai-anh{overflow:hidden;margin-top:44px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.dai-chay{display:flex;gap:16px;width:max-content;animation:chay-ngang 45s linear infinite}
.dai-anh:hover .dai-chay{animation-play-state:paused}
.dai-chay figure{margin:0;width:260px;flex:none;position:relative;border-radius:20px;overflow:hidden;background:#fff}
.dai-chay img{width:260px;height:200px;object-fit:cover}
.dai-chay figcaption{position:absolute;left:10px;bottom:10px;background:var(--vang);color:var(--chu);font-weight:800;font-size:14px;padding:4px 12px;border-radius:999px}
@keyframes chay-ngang{to{transform:translateX(calc(-50% - 8px))}}
@media(max-width:560px){.dai-chay figure,.dai-chay img{width:200px}.dai-chay img{height:160px}}

/* Nhận xét khách */
.luoi-nx{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.nx{margin:0;background:var(--kem);border-radius:22px;padding:22px;border:1px solid var(--vien);position:relative}
.nx::before{content:"“";position:absolute;top:-6px;right:18px;font-family:'Baloo 2';font-size:80px;color:var(--vang);line-height:1}
.sao{color:#F5A623;letter-spacing:2px}
.nx blockquote{margin:8px 0 14px;font-size:16.5px}
.nx figcaption b{display:block;color:var(--xanh-dam)}
.nx figcaption span{font-size:13.5px;color:var(--phu)}
@media(max-width:900px){.luoi-nx{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.luoi-nx{grid-template-columns:1fr}}

/* Hỏi đáp */
.hoi-dap details{background:#fff;border:1px solid var(--vien);border-radius:16px;margin-bottom:10px;padding:0 18px}
.hoi-dap summary{cursor:pointer;font-weight:800;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.hoi-dap summary::after{content:"+";font-size:22px;color:var(--xanh);transition:transform .2s}
.hoi-dap details[open] summary::after{transform:rotate(45deg)}
.hoi-dap p{margin:0 0 16px;color:var(--phu)}

/* Bọt biển bay nhẹ */
.slider,.dau-trang{position:relative;overflow:hidden}
.bot{position:absolute;inset:0;pointer-events:none;z-index:0}
.bot i{position:absolute;bottom:-40px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,.2) 60%,transparent 70%);border:1px solid rgba(255,255,255,.6);animation:bot-bay 12s linear infinite;opacity:.8}
.slider .bot i{background:radial-gradient(circle at 30% 30%,#fff,rgba(71,123,21,.25) 60%,transparent 70%);border-color:rgba(71,123,21,.3)}
.bot i:nth-child(1){left:8%;animation-delay:0s}.bot i:nth-child(2){left:22%;width:10px;height:10px;animation-delay:3s;animation-duration:9s}.bot i:nth-child(3){left:47%;width:26px;height:26px;animation-delay:6s;animation-duration:15s}.bot i:nth-child(4){left:68%;animation-delay:1.5s}.bot i:nth-child(5){left:85%;width:12px;height:12px;animation-delay:4.5s;animation-duration:10s}.bot i:nth-child(6){left:93%;width:22px;height:22px;animation-delay:8s}
@keyframes bot-bay{to{transform:translateY(-700px) translateX(30px);opacity:0}}
.slide,.dau-trang .wrap{position:relative;z-index:1}
.slide .anh img{transition:transform .2s ease-out}

/* Hiện dần khi lướt */
.co-hien .hien-dan{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.co-hien .hien-dan.da-hien{opacity:1;transform:none}

/* Con trỏ chuột */
.tro-chuot{position:fixed;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid var(--xanh);background:rgba(255,198,26,.25);pointer-events:none;z-index:90;opacity:0;transition:opacity .2s,width .2s,height .2s,left .2s,top .2s,background .2s;mix-blend-mode:multiply}
.tro-chuot.hien{opacity:1}
.tro-chuot.to{width:52px;height:52px;left:-26px;top:-26px;background:rgba(255,198,26,.4)}

/* Nút nhạc */
.nut-nhac{position:fixed;right:16px;bottom:16px;z-index:35;width:48px;height:48px;border-radius:50%;border:0;background:var(--xanh-dam);display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:14px 12px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.nut-nhac span{width:4px;height:6px;background:var(--vang);border-radius:2px}
.nut-nhac.dang span{animation:song .8s ease-in-out infinite alternate}
.nut-nhac.dang span:nth-child(2){animation-delay:.2s}.nut-nhac.dang span:nth-child(3){animation-delay:.4s}
@keyframes song{to{height:20px}}
@media(max-width:820px){.nut-nhac{bottom:76px;right:12px;width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.dai-chay{animation:none}.bot{display:none}}
.gio-khung{overflow-y:auto}.gio-ds{flex:0 0 auto;overflow:visible;min-height:90px}.gio-cuoi{margin-top:auto}
.so-gio[hidden],.gio-cuoi[hidden]{display:none}.video-mo-chua{position:relative}.tt-cham{position:absolute;left:16px;right:16px;bottom:16px;background:var(--vang);color:var(--chu);text-decoration:none;text-align:center;padding:14px;border-radius:14px;font-size:14px}.tt-cham b{font-size:17px}