/* Lớp thương hiệu DNAI, nạp SAU deck.css. Đổi bảng màu gốc (navy) sang xanh DNAI. */
:root{
  --navy:#0b4a30;--navy2:#07331f;--blue:#12704a;--sky:#e9f5ef;
  --ink:#122a21;--muted:#5b7268;--line:#d8e8e0;--bg:#f4f9f6;
  --orange:#d98a00;--red:#cf4646;--green:#0f5134;--yellow:#f5d000;
  --dnai:#0f5134;--dnai-mid:#12704a;--dnai-deep:#04251a;--gold:#f5d000;
}
html,body{background:#04251a}
.slide h1{color:var(--dnai)}
.slide h1 em{color:var(--dnai-mid)}
.kicker .k-brand{height:30px}
.foot{color:#8ba79a}
.foot .no{color:var(--dnai)}
.list li:before{background:var(--dnai-mid);top:.38em}
.list.v li:before{color:var(--dnai-mid)}
.card.navy{background:linear-gradient(140deg,#0f5134,#07331f)}
.card.navy .n{color:#8fe0b8}
.card.navy p{color:#c8e6d7}
.card.good{background:#eef8f2;border-color:#bfe0cd}
.card.good h3{color:#0b5c3a}.card.good .n{color:#0f5134}
.card.warn{background:#fff8e8;border-color:#ffe2ac}
.card.warn h3{color:#8a5a00}.card.warn .n{color:#b57a00}
.card.bad{background:#fdf0f0;border-color:#f3cdcd}
.card.bad h3{color:#9e2f2f}.card.bad .n{color:var(--red)}
.pill{background:var(--dnai)}
.pill.b{background:var(--dnai-mid)}.pill.g{background:#0f5134}
.pill.o{background:var(--orange)}.pill.r{background:var(--red)}
.pill.l{background:var(--sky);color:var(--dnai)}
.pill.gold{background:var(--gold);color:#4a3a00}
.big{color:var(--dnai)}.big small{color:var(--dnai-mid)}
.statement b{color:var(--dnai-mid)}
.note-line{border-left-color:var(--gold);background:#fffaea;color:#6b4b00}
.steps-tl>div{border-left-color:var(--c,var(--dnai-mid))}
.steps-tl>div.on{background:var(--sky);box-shadow:inset 0 0 0 2px var(--dnai)}
.split25>div{background:var(--dnai)}
.divider{background:radial-gradient(circle at 85% 20%,#12704a 0,#12704a00 45%),linear-gradient(135deg,#0b4a30,#04251a)}
.divider .num{color:#ffffff1c}
.divider .lede{color:#c8e6d7}
.divider .chips span{background:#ffffff14}

/* --- bìa DNAI --- */
.slide.dnai-cover{padding:0;background:linear-gradient(150deg,#0f5134 0%,#0b4a30 44%,#04251a 100%);overflow:hidden}
.dnai-cover .wrap{position:relative;z-index:2;height:100%;padding:74px 90px 60px;display:flex;flex-direction:column;color:#fff}
.dnai-cover .brandline{display:flex;align-items:center;gap:22px}
.dnai-cover .brandline .lg{height:52px;display:block}
.dnai-cover .brandline .sep{width:1px;height:44px;background:#ffffff33}
.dnai-cover .brandline .bn{font-size:17px;font-weight:700;letter-spacing:.1em;color:#9fdcbe}
.dnai-cover .eyebrow{margin:auto 0 0;font-size:18px;font-weight:800;letter-spacing:.16em;color:var(--gold)}
.dnai-cover h1{margin:20px 0 0;font-size:74px;line-height:1.1;font-weight:800;color:#fff;letter-spacing:-.015em}
.dnai-cover h1 em{font-style:normal;color:#8fe0b8}
.dnai-cover .sub{margin:26px 0 0;font-size:25px;line-height:1.5;color:#c8e6d7;max-width:1150px}
.dnai-cover .chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.dnai-cover .chips span{padding:12px 22px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;font-size:19px;font-weight:600;color:#eafaf1}
.dnai-cover .meta{margin-top:auto;padding-top:34px;font-size:19px;color:#9fdcbe;line-height:1.6}
.dnai-cover .ring{position:absolute;right:0;bottom:0;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle at 100% 100%,#f5d00026 0,#f5d00000 68%);z-index:1}
.dnai-cover .rule{position:absolute;left:90px;right:90px;top:150px;height:2px;background:linear-gradient(90deg,#f5d00066,#f5d00000);z-index:1}
.dnai-cover .deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}

/* --- trang 3 mới: Bento Gallery hoạt động thực tế trên slide --- */
.slide-gallery-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px;flex-wrap:nowrap}
.slide-gallery-top .sg-pills{display:flex;gap:8px;flex-wrap:nowrap}
.slide-gallery-top .sg-pills span{padding:6px 13px;border-radius:999px;background:var(--sky);border:1px solid #bfe0cd;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.slide-gallery-top .sg-pills span b{color:var(--dnai);font-weight:800}
.slide-gallery-top .sg-hint{font-size:14px;font-weight:700;color:var(--dnai-mid);white-space:nowrap}

.slide-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,158px);gap:12px}
.slide figure.sb-item{position:relative;margin:0;border-radius:15px;overflow:hidden;background:#072d1d;cursor:pointer;border:1.5px solid #0f513426;box-shadow:0 6px 18px #082c1d1a;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,border-color .4s ease}
.slide figure.sb-item.w2{grid-column:span 2}
.slide figure.sb-item img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;transition:transform .65s cubic-bezier(.22,1,.36,1)}
.slide figure.sb-item:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,37,26,.04) 0%,rgba(4,37,26,.12) 46%,rgba(4,37,26,.88) 100%);pointer-events:none}
.slide figure.sb-item:before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-24deg);z-index:2;pointer-events:none;transition:left .75s ease}
.slide figure.sb-item:hover{transform:translateY(-4px);box-shadow:0 16px 32px #072d1d3b;border-color:var(--gold)}
.slide figure.sb-item:hover img{transform:scale(1.07)}
.slide figure.sb-item:hover:before{left:140%}
.slide figure.sb-item.is-spot{border-color:#f5d000;box-shadow:0 0 0 2.5px #f5d00099,0 14px 28px #0f513433}
.sb-tag{position:absolute;top:10px;left:11px;z-index:3;padding:4px 10px;border-radius:999px;background:rgba(15,81,52,.86);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.26);color:#8fe0b8;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.sb-zoom{position:absolute;top:10px;right:11px;z-index:3;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;opacity:0;transform:scale(.85);transition:opacity .25s ease,transform .25s ease}
.slide figure.sb-item:hover .sb-zoom{opacity:1;transform:scale(1)}
.slide figure.sb-item figcaption.sb-cap{position:absolute;left:12px;right:12px;bottom:10px;z-index:3;color:#fff;background:transparent!important;padding:0!important;margin:0!important;border:0!important;backdrop-filter:none!important}
.sb-cap strong{display:block;font-size:14.5px;line-height:1.25;font-weight:700;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.75)}
.sb-cap span{display:block;margin-top:2px;font-size:12.5px;line-height:1.28;color:#dff5ea;text-shadow:0 1px 4px rgba(0,0,0,.65)}
.slide figure.sb-item:not(.w2) .sb-cap span{display:none}

.slide-gallery-foot{margin-top:10px;padding:8px 15px;border-radius:11px;background:#f2faf6;border:1px dashed #b5dac6;display:flex;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--muted)}
.slide-gallery-foot b{color:var(--dnai)}

/* --- Lightbox trên slide --- */
.lb-modal{position:fixed;inset:0;z-index:9999;background:rgba(4,28,19,.92);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .25s ease}
.lb-modal.open{opacity:1;pointer-events:auto}
.lb-box{position:relative;max-width:1060px;width:100%;background:#082c1d;border:1px solid #235c43;border-radius:18px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.65);transform:scale(.95);transition:transform .28s cubic-bezier(.22,1,.36,1)}
.lb-modal.open .lb-box{transform:scale(1)}
.lb-img-wrap{position:relative;background:#041a11;display:flex;align-items:center;justify-content:center;max-height:74vh}
.lb-img-wrap img{max-width:100%;max-height:74vh;object-fit:contain;display:block}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;background:#0b3b27;color:#fff}
.lb-meta .lb-tag{display:inline-block;padding:3px 10px;border-radius:999px;background:#12704a;color:#8fe0b8;font-size:11.5px;font-weight:800;letter-spacing:.05em;margin-bottom:4px}
.lb-meta h4{margin:0;font-size:17px;color:#fff}
.lb-meta p{margin:3px 0 0;font-size:14px;color:#c8e6d7}
.lb-nav{display:flex;align-items:center;gap:8px;flex-shrink:0}
.lb-btn{width:40px;height:40px;border-radius:10px;border:1px solid #2b6e50;background:#0f5134;color:#fff;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-btn:hover{background:#12704a;border-color:var(--gold)}
.lb-count{font-size:14px;font-weight:700;color:#9fdcbe;min-width:52px;text-align:center}
.lb-close{position:absolute;top:12px;right:12px;z-index:4;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:19px;cursor:pointer}
.lb-close:hover{background:#cf4646}

/* --- trang 4: bốn nội dung hỗ trợ + đề cương 120p + khung chương trình --- */
.compact3 .asklist{gap:11px}
.compact3 .asklist>div{padding:14px 18px;grid-template-columns:44px 1fr;gap:14px}
.compact3 .asklist b.n{width:38px;height:38px;line-height:38px;font-size:17px;border-radius:10px}
.compact3 .asklist h3{font-size:19.5px;margin-bottom:4px}
.compact3 .asklist p{font-size:15.5px;line-height:1.4}
.compact3 .steps-tl{gap:6px}
.compact3 .steps-tl>div{padding:8px 13px;grid-template-columns:76px 1fr;gap:10px}
.compact3 .steps-tl b{font-size:16px;white-space:nowrap}
.compact3 .steps-tl p{font-size:15px;line-height:1.34}
.compact3 .steps-tl p small{font-size:13.5px;white-space:nowrap}

/* --- trang 4: bảng giá gọn, hai cột --- */
.compact4 table{width:100%;border-collapse:collapse}
.compact4 table th,.compact4 table td{padding:11px 12px;font-size:15.5px;line-height:1.42;border:1px solid var(--line);text-align:left;vertical-align:top}
.compact4 table th{background:var(--bg);color:var(--dnai);font-size:14.5px;font-weight:700}
.compact4 table td.r{text-align:right;white-space:nowrap}
.compact4 table tr.tot td{background:var(--dnai);color:#fff;border-color:var(--dnai);font-weight:800}
.compact4 table tr.tot td.dim{color:#c8e6d7;font-weight:500}
.compact4 .price-hero{padding:18px 26px}
.compact4 .price-hero .amt{font-size:52px}
.compact4 .price-hero .note{font-size:17px;max-width:500px}
.compact4 .mini h3{margin:0 0 6px;font-size:15.5px;letter-spacing:.03em;text-transform:uppercase}
.compact4 .mini{padding:12px 16px;border-radius:14px;border:1px solid var(--line)}
.compact4 .mini.inc{border-color:#bfe0cd;background:#f2faf6}
.compact4 .mini.inc h3{color:#0b5c3a}
.compact4 .mini.exc{border-color:#f0d9d9;background:#fdf6f6}
.compact4 .mini.exc h3{color:#9e2f2f}
.compact4 .mini ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.compact4 .mini li{position:relative;padding-left:22px;font-size:15px;line-height:1.34;color:var(--ink)}
.compact4 .mini li:before{position:absolute;left:2px;top:0;font-weight:800}
.compact4 .mini.inc li:before{content:"✓";color:#0f5134}
.compact4 .mini.exc li:before{content:"✕";color:var(--red)}


/* thẻ số thứ tự lớn cho phần nội dung triển khai */
.asklist{display:flex;flex-direction:column;gap:12px}
.asklist>div{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:16px 20px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.asklist b.n{width:44px;height:44px;border-radius:12px;background:var(--dnai);color:#fff;font-size:20px;font-weight:800;line-height:44px;text-align:center}
.asklist h3{margin:0 0 6px;font-size:23px;color:var(--dnai)}
.asklist p{margin:0;font-size:19px;line-height:1.45;color:var(--muted)}

/* bảng giá */
.price-hero{display:flex;align-items:center;gap:26px;padding:24px 30px;border-radius:20px;background:linear-gradient(120deg,#0f5134,#07331f);color:#fff}
.price-hero .lbl{font-size:17px;font-weight:800;letter-spacing:.08em;color:#8fe0b8}
.price-hero .amt{font-size:58px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.price-hero .amt small{font-size:24px;font-weight:700;color:#8fe0b8;margin-left:8px}
.price-hero .note{margin-left:auto;font-size:18px;color:#c8e6d7;text-align:right;line-height:1.5;max-width:430px}