:root{--cream:#fdfbec;--gold:#fdf6c2}
.sp1{display:block;line-height:0}
.sp1 img{width:100%;height:auto;display:block}
/* S2 */
.sp2{background:#04291a url(/assets/pages/sp-s2-bg.jpg) center/cover no-repeat;padding:100px 3% 71px;text-align:center;overflow:hidden;display:flex;flex-direction:column;align-items:center}
/* Đồng bộ khoảng cách tiêu đề->nội dung theo chuẩn S3 Kiến trúc */
.sp2 .rm-ct{margin:0 auto 2.4%}
.sp2-title{width:min(30%,430px);height:auto;margin:0 auto 2.4%;display:block}
.sp2-tabs{display:flex;justify-content:center;gap:1.8%;margin-bottom:0}
.sp2-tab{position:relative;border:0;outline:0;-webkit-appearance:none;appearance:none;font-family:'Gilroy',sans-serif;font-weight:300;letter-spacing:.03em;color:var(--cream);font-size:clamp(12px,1.15vw,17px);padding:.6em 1.7em;background:url(/assets/pages/sp-khung.png) center/100% 100% no-repeat;cursor:pointer;white-space:nowrap;transition:.3s;opacity:.72;line-height:1.4;text-transform:uppercase}
.sp2-tab.on{opacity:1;color:#eaf3b6;font-weight:600}
/* aspect-ratio theo bề rộng của chính stage (đã cap 1280) -> item không bao giờ
   dính tabs ở laptop/macbook (trước đây padding-% theo bề rộng sp2 nên lệch) */
.sp2-stage{position:relative;width:100%;max-width:1280px;margin:30px auto 0;aspect-ratio:1280/540}
.sp2-item{position:absolute;top:50%;left:50%;width:58%;aspect-ratio:16/10;border-radius:16px;overflow:hidden;transform:translate(-50%,-50%);transition:transform .65s cubic-bezier(.22,.61,.36,1),opacity .65s,filter .65s;will-change:transform;backface-visibility:hidden;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.sp2-item img{width:100%;height:100%;object-fit:cover;display:block}
.sp2-item.c{z-index:3}
.sp2-item.l{z-index:2;transform:translate(-50%,-50%) translateX(-48%) scale(.66);opacity:.48;filter:brightness(.52)}
.sp2-item.r{z-index:2;transform:translate(-50%,-50%) translateX(48%) scale(.66);opacity:.48;filter:brightness(.52)}
.sp2-item.l,.sp2-item.r{cursor:pointer}
.sp2-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:rgba(4,26,14,.6);color:var(--gold);font-size:22px;cursor:pointer;display:grid;place-items:center}
.sp2-btn.prev{left:1%}
.sp2-btn.next{right:1%}
/* S3 accordion */
.sp3{background:#04291a center/cover no-repeat;padding:30px 3% 71px}
.sp3-title{width:min(34%,500px);height:auto;margin:0 auto 3%;display:block}
.sp3 .rm-ct{margin:0 auto 71px}
.sp3-row{display:flex;gap:1.1%;max-width:1360px;margin:0 auto;height:clamp(360px,42vw,620px)}
.sp3-card{position:relative;flex:1;min-width:0;border-radius:14px;overflow:hidden;cursor:pointer;transition:flex .55s cubic-bezier(.4,0,.2,1)}
.sp3-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp3-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,18,12,0) 40%,rgba(2,18,12,.82));z-index:1}
.sp3-card:hover,.sp3-row:not(:hover) .sp3-card.on{flex:0 0 44%}
.sp3-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:6% 5%;text-align:left}
.sp3-cap h3{margin:0;font-family:'BlushingRoseVN','BlushingRose','Cormorant Garamond',Georgia,serif;font-weight:400;letter-spacing:.01em;font-size:clamp(calc(20px*var(--ov-sp3h,1)),calc(2vw*var(--ov-sp3h,1)),calc(34px*var(--ov-sp3h,1)));line-height:1.05;color:#fdf6c2}
.sp3-cap p{margin:.6em 0 0;font-family:'Gilroy',system-ui,Arial,sans-serif;font-weight:300;font-size:clamp(calc(12px*var(--ov-sp3p,1)),calc(.95vw*var(--ov-sp3p,1)),calc(16px*var(--ov-sp3p,1)));line-height:1.55;max-width:560px;background:linear-gradient(180deg,#fdfbec 0%,#efe7c4 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;opacity:0;max-height:0;overflow:hidden;transition:opacity .5s,max-height .5s}
.sp3-card:hover .sp3-cap p,.sp3-row:not(:hover) .sp3-card.on .sp3-cap p{opacity:1;max-height:260px}
@media(max-width:900px){
.sp2-stage{padding-bottom:60%}.sp2-item{width:80%}.sp2-item.l{transform:translate(-118%,-50%) scale(.8)}.sp2-item.r{transform:translate(18%,-50%) scale(.8)}
/* section 2 mobile: title +30% & equal spacing lề trên = tiêu đề→khung = lề dưới */
.sp2{min-height:auto;justify-content:flex-start;padding:8% 4%}.sp2-title{width:39%;margin:0 auto 8%}.sp2-tabs{margin:0 auto 8%}.sp2-stage{margin:0}
.sp3-row{flex-direction:column;height:auto}.sp3-card{flex:none;height:190px}.sp3-row:hover .sp3-card{flex:none}.sp3-card:hover,.sp3-row:not(:hover) .sp3-card.on{flex:none;height:320px}.sp3-cap p{opacity:1;max-height:200px}
/* mobile: title +50% & equal spacing lề trên = tiêu đề→ảnh = lề dưới */
.sp3{padding:8% 4%}.sp3-title{width:51%;margin:0 auto 8%}
}
.ftx{background:#062018 url(/assets/san-pham/7116154aaa72.jpg) center/cover no-repeat;margin:0;padding:0}
/* Mobile: chặn double-tap tự zoom khi bấm next/prev nhanh trên coverflow */
.sp2,.sp2-stage,.sp2-item,.sp2-btn,.sp2-tab{touch-action:manipulation}

/* ===== Sản phẩm: nền #001f11 (trừ hero), bỏ nền cũ S2->footer ===== */
.sp2,.sp3{background:#001f11 !important}
.rmft{background:#001f11 !important}
/* Hero S1: tiêu đề dạng ảnh */
.hb-titleimg{width:min(640px,82%);height:auto;display:block;margin:0 auto}
/* ===== Section 3: text căn giữa ở ĐÁY TRONG ảnh, trên panel gradient xanh (#001f11), hiện full ===== */
.sp3-card{box-shadow:none}
.sp3-card::after{display:none}
.sp3-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* gradient xanh #001f11 fade từ lề dưới ảnh lên, tới opaque ở đáy */
.sp3-fade{position:absolute;left:0;right:0;bottom:0;height:35%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(1,44,3,0) 0%,rgba(1,44,3,.72) 55%,rgba(1,44,3,1) 100%)}
/* caption ở đáy ảnh, căn giữa, tiêu đề + mô tả hiện luôn; màu #fdf6c2 đồng bộ ảnh tittle */
.sp3-cap{position:absolute;left:0;right:0;bottom:0;top:auto;z-index:2;padding:5% 6% 7%;text-align:center;display:flex;flex-direction:column;align-items:center}
.sp3-cap h3{text-align:center;width:100%;color:#fdf6c2;margin:0;text-shadow:0 2px 14px rgba(0,0,0,.9)}
/* mô tả: ẩn mặc định, hiện khi hover (card mở rộng) */
.sp3-cap p{text-align:center;width:100%;max-width:none;margin:0 auto;background:none;-webkit-text-fill-color:#fdf6c2;color:#fdf6c2;text-shadow:0 2px 12px rgba(0,0,0,.9)}
.sp3-card:hover .sp3-cap p,.sp3-row:not(:hover) .sp3-card.on .sp3-cap p{margin-top:.55em}

/* ===== Backdrop gradient xanh — bọc .sub-canvas từ S2↓ (hero + footer giữ nguyên) ===== */
body[data-page="san-pham"]{background:#011e10}
body[data-page="san-pham"] .sub-canvas{background:#011e10 url(/assets/sub/sub-bg-v1.jpg) top center/100% 100% no-repeat}
body[data-page="san-pham"] .sub-canvas>section{background-color:transparent!important;background-image:none!important}

/* Section 1 hero: gradient đáy theo thiết kế (Shape_1: #001f11, top 446/1080≈41%, cao 634/1080≈59%) */
body[data-page="san-pham"] .hb-grad-bot{height:59%;background:linear-gradient(0deg,#001f11 0%,rgba(0,31,17,.55) 42%,rgba(0,31,17,0) 100%)}

/* viền card để khung không chìm vào nền section */
.sp3-card{border:none;box-shadow:none}