/* =============================================================================
   iPOS INVENTORY — WEB PRESENT
   Khung 16:9 cố định 1280×720, scale bằng transform. Không bao giờ có scrollbar.
   ========================================================================== */

/* ── Font Be Vietnam Pro (nhúng cục bộ, không cần mạng) ─────────────────── */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/bvp-400-vi.woff2) format('woff2');
  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';font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/bvp-400-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/bvp-400-latin.woff2) format('woff2');
  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';font-style:normal;font-weight:500;font-display:swap;
  src:url(../assets/fonts/bvp-500-vi.woff2) format('woff2');
  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';font-style:normal;font-weight:500;font-display:swap;
  src:url(../assets/fonts/bvp-500-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;
  src:url(../assets/fonts/bvp-500-latin.woff2) format('woff2');
  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';font-style:normal;font-weight:600;font-display:swap;
  src:url(../assets/fonts/bvp-600-vi.woff2) format('woff2');
  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';font-style:normal;font-weight:600;font-display:swap;
  src:url(../assets/fonts/bvp-600-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url(../assets/fonts/bvp-600-latin.woff2) format('woff2');
  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';font-style:normal;font-weight:700;font-display:swap;
  src:url(../assets/fonts/bvp-700-vi.woff2) format('woff2');
  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';font-style:normal;font-weight:700;font-display:swap;
  src:url(../assets/fonts/bvp-700-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;
  src:url(../assets/fonts/bvp-700-latin.woff2) format('woff2');
  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}

/* ── Token ─────────────────────────────────────────────────────────────── */
:root{
  --blue:#1b6fe0;  --blue-d:#0b3f8f;  --blue-xd:#0b2c6b;  --blue-l:#4fa3f7;
  --tint:#f2f7fe;  --tint-2:#e6f0fd;  --line-b:#cfe0f7;
  --orange:#f5871f; --orange-d:#d96f0c; --orange-t:#fff6ec; --orange-b:#fbdcb6;
  --ink:#0e1a2b;   --body:#35455e;    --muted:#7d8ba0;
  --line:#e6ebf3;  --paper:#ffffff;
  --acc:var(--blue); --acc-d:var(--blue-d); --acc-t:var(--tint); --acc-b:var(--line-b);
  --fs:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --sh-1:0 1px 2px rgba(14,26,43,.05),0 4px 14px rgba(14,26,43,.06);
  --sh-2:0 6px 18px rgba(14,26,43,.09),0 22px 48px rgba(14,26,43,.10);
}
body[data-deck="pro"]{ --acc:var(--orange); --acc-d:var(--orange-d); --acc-t:var(--orange-t); --acc-b:var(--orange-b); }
/* Bộ so sánh / tính năng — lấy xanh than */
body[data-deck="cmp"], body[data-deck="tinhnang"]{ --slate:#3f5573; --slate-d:#2b3d57; --slate-t:#f0f3f8; --slate-b:#c9d5e6;
  --acc:var(--slate); --acc-d:var(--slate-d); --acc-t:var(--slate-t); --acc-b:var(--slate-b); }
/* Bộ V3 lấy xanh ngọc để phân biệt hẳn với Plus xanh dương và Pro cam */
body[data-deck="v3"]{ --teal:#12988c; --teal-d:#0f6d64; --teal-t:#eef9f7; --teal-b:#bfe4de;
  --acc:var(--teal); --acc-d:var(--teal-d); --acc-t:var(--teal-t); --acc-b:var(--teal-b); }

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--fs); color:var(--body); background:#0d1622;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  user-select:none;
}
img{display:block;max-width:100%}
b,strong{font-weight:700;color:var(--ink)}
em.hl{font-style:normal;color:var(--orange-d);font-weight:600}

/* ── Khung ứng dụng ────────────────────────────────────────────────────── */
.app{position:fixed;inset:0;display:flex;flex-direction:column;background:
  radial-gradient(1100px 620px at 18% -10%,#1a3055 0%,transparent 60%),
  radial-gradient(900px 560px at 92% 108%,#16283f 0%,transparent 62%),#0d1622}

/* Thanh công cụ */
.bar{flex:0 0 46px;display:flex;align-items:center;gap:14px;padding:0 14px;
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);color:#c9d6e8;font-size:12.5px}
.bar .brand{display:flex;align-items:center;gap:9px;font-weight:700;color:#fff;letter-spacing:-.2px}
.bar .brand img{height:25px;width:auto;opacity:.98}
.seg{display:flex;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:9px;padding:2.5px;gap:2px}
.seg button{font:inherit;font-size:11.5px;font-weight:600;color:#a9bbd2;background:none;border:0;
  padding:5px 13px;border-radius:6.5px;cursor:pointer;transition:.16s;white-space:nowrap}
.seg button:hover{color:#fff}
.seg button i{font-style:normal}
.seg button.on{background:var(--blue);color:#fff;box-shadow:0 1px 6px rgba(27,111,224,.5)}
.seg button[data-deck="pro"].on{background:var(--orange);box-shadow:0 1px 6px rgba(245,135,31,.5)}
.seg button[data-deck="cmp"].on{background:#3f5573;box-shadow:0 1px 6px rgba(63,85,115,.5)}
.seg button[data-deck="v3"].on{background:#12988c;box-shadow:0 1px 6px rgba(18,152,140,.5)}
body[data-deck="pro"] .seg button.on{background:var(--orange);box-shadow:0 1px 6px rgba(245,135,31,.5)}
body[data-deck="cmp"] .seg button.on{background:#3f5573;box-shadow:0 1px 6px rgba(63,85,115,.5)}

/* Menu thả chọn bộ — chỉ hiện trên điện thoại, thay cho .seg (xem khối MÀN HÌNH
   HẸP). Chấm màu theo bộ; màu slate của bộ So sánh sáng lên cho nổi trên nền tối. */
.dsw{display:none;position:relative;min-width:0}
.dsw-btn{font:inherit;font-size:12.5px;font-weight:600;color:#fff;display:flex;align-items:center;
  gap:7px;min-width:0;max-width:100%;height:32px;padding:0 8px 0 10px;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  -webkit-tap-highlight-color:transparent}
/* color phải khai lại: luật chung b,strong{color:var(--ink)} nhuộm tên bộ thành xám tối trên nền tối */
.dsw-btn b{font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dsw-btn svg{flex:0 0 auto;width:15px;height:15px;fill:none;stroke:#8fa3bd;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.dsw.open .dsw-btn{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.22)}
.dsw.open .dsw-btn svg{transform:rotate(180deg)}
.dsw-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--dc,#2f82f2);
  box-shadow:0 0 0 3px rgba(255,255,255,.07)}
body[data-deck="plus"] .dsw-btn,.dsw-it[data-deck="plus"]{--dc:#2f82f2}
body[data-deck="pro"] .dsw-btn,.dsw-it[data-deck="pro"]{--dc:#f5871f}
body[data-deck="cmp"] .dsw-btn,.dsw-it[data-deck="cmp"]{--dc:#8ea3c0}
body[data-deck="v3"] .dsw-btn,.dsw-it[data-deck="v3"]{--dc:#19b0a2}
.dsw-list{position:absolute;top:calc(100% + 8px);left:-4px;z-index:70;width:280px;
  max-width:calc(100vw - 16px);padding:6px;border-radius:14px;background:#15243a;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 44px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px) scale(.98);
  transform-origin:top left;transition:opacity .16s,transform .16s,visibility 0s .16s}
.dsw.open .dsw-list{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .16s,transform .16s}
.dsw-it{font:inherit;width:100%;display:flex;align-items:center;gap:12px;min-height:50px;
  padding:7px 12px;border:0;border-radius:10px;background:none;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.dsw-it+.dsw-it{margin-top:2px}
.dsw-it:active{background:rgba(255,255,255,.1)}
.dsw-it.on{background:rgba(255,255,255,.07)}
.dsw-it .dsw-dot{width:10px;height:10px}
.dsw-it span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dsw-it b{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.1px}
.dsw-it small{font-size:11.5px;color:#7f93ad}
.dsw-it svg{flex:0 0 auto;width:17px;height:17px;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.dsw-it .dsw-ok{stroke:var(--dc)}
.dsw-it .dsw-lk{width:15px;height:15px;stroke:#7f93ad;stroke-width:2.2}

.bar .sp{flex:1}
.bar .cnt{font-variant-numeric:tabular-nums;font-weight:600;color:#e5eefb;letter-spacing:.4px}
.bar .cnt i{font-style:normal;color:#6f8099;font-weight:500}
.tbtn{font:inherit;font-size:12px;font-weight:600;color:#b9c9dd;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 11px;cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:.16s;white-space:nowrap}
.tbtn:hover{background:rgba(255,255,255,.13);color:#fff}
.tbtn.on{background:var(--orange);border-color:var(--orange);color:#fff}
.tbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* Sân khấu */
/* Thu phóng bằng `zoom` chứ không phải `transform:scale`. transform chỉ kéo giãn
   lớp đã vẽ nên ảnh bị nhoè khi khung phóng to; `zoom` bố trí lại thật, trình
   duyệt vẽ nội dung đúng độ phân giải. Nhờ zoom mà .stage chiếm chỗ thật nên
   canh giữa bằng flex là đủ, không cần toạ độ. */
.stagewrap{flex:1;position:relative;display:flex;align-items:center;
  justify-content:center;overflow:hidden;min-height:0}
.stage{width:1280px;height:720px;zoom:var(--sc,1);position:relative;
  border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.5);
  flex:0 0 auto}

/* Nút lật */
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:44px;height:44px;
  border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);
  color:#dce7f5;cursor:pointer;display:grid;place-items:center;transition:.18s;backdrop-filter:blur(6px)}
.arrow:hover{background:var(--blue);border-color:var(--blue);color:#fff}
body[data-deck="pro"] .arrow:hover{background:var(--orange);border-color:var(--orange)}
body[data-deck="cmp"] .arrow:hover{background:#3f5573;border-color:#3f5573}
body[data-deck="v3"] .arrow:hover{background:#12988c;border-color:#12988c}
.arrow:disabled{opacity:.22;cursor:default;background:rgba(255,255,255,.05)}
.arrow.prev{left:16px} .arrow.next{right:16px}
.arrow svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* Tiến độ */
.prog{flex:0 0 3px;background:rgba(255,255,255,.08)}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-l));
  transition:width .3s cubic-bezier(.4,0,.2,1)}
body[data-deck="pro"] .prog i{background:linear-gradient(90deg,var(--orange-d),var(--orange))}
body[data-deck="cmp"] .prog i{background:linear-gradient(90deg,#2b3d57,#5a739b)}
body[data-deck="v3"] .prog i{background:linear-gradient(90deg,#0f6d64,#2fc0b1)}

/* =============================================================================
   SLIDE — bộ khung chung
   ========================================================================== */
.slide{position:absolute;inset:0;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;color:var(--body);font-size:15px;line-height:1.6}
.slide.in{animation:sl var(--d-fast,.46s) var(--ease,cubic-bezier(.22,.72,.24,1)) both}

/* nền trang trí nhạt */
.slide::before{content:'';position:absolute;right:-180px;top:-200px;width:520px;height:520px;
  border-radius:50%;background:var(--acc-t);opacity:.85;pointer-events:none}
.slide.nodeco::before{display:none}

/* Đầu slide */
.s-head{position:relative;z-index:2;padding:40px 58px 0;flex:0 0 auto}
.kicker{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--acc);margin-bottom:11px}
.kicker .sep{color:var(--muted);opacity:.55;font-weight:400}
/* Tên riêng có chữ thường, ví dụ iOne — bọc <b> để khỏi bị viết hoa hết */
.kicker b{text-transform:none;font-weight:inherit;color:inherit}
.kicker .pill{background:var(--acc-t);border:1px solid var(--acc-b);color:var(--acc-d);
  padding:3px 10px;border-radius:999px;letter-spacing:.7px}
.s-title{font-size:34px;font-weight:700;line-height:1.24;letter-spacing:-.7px;color:var(--ink);
  padding-bottom:2px}
.s-title.up{text-transform:uppercase}
/* Tên riêng bọc <b> thì thoát khỏi in hoa: iONE chứ không phải IONE */
.s-title b{text-transform:none;font-weight:inherit;color:inherit}
.rule{width:70px;height:4px;border-radius:3px;background:var(--orange);margin-top:14px}
.s-sub{font-size:14.5px;color:var(--muted);margin-top:10px;max-width:820px}

/* Thân slide */
.s-body{position:relative;z-index:2;flex:1;min-height:0;padding:26px 58px 54px;
  display:grid;grid-template-columns:1fr;grid-template-rows:1fr;overflow:hidden}
.s-body>*{min-width:0;min-height:0;max-height:100%}

/* Chân slide */
.slide.bare .s-foot{display:none}
.s-foot{position:absolute;left:0;right:0;bottom:0;height:34px;z-index:5;
  display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 58px;
  border-top:1px solid var(--line)}
.s-foot::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--blue-xd),var(--blue) 48%,var(--orange))}
.s-foot .no{font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.s-foot .lg{height:15px;opacity:.9}

/* ── Bìa ───────────────────────────────────────────────────────────────── */
.cv{position:absolute;inset:0}
.cv>img{width:100%;height:100%;object-fit:cover}
.cv-tx{position:absolute;left:572px;top:430px;width:643px;height:160px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.cv-tx b{display:block;font-size:37px;font-weight:700;line-height:1.22;color:#fff;letter-spacing:-.5px;
  text-shadow:0 2px 10px rgba(0,0,0,.13)}
.cv-tx b.sm{font-size:31px}
.cv-tx span{font-size:16px;font-weight:600;color:#fff;margin-top:5px;opacity:.96}

/* Bìa nền tranh, chữ bên trái */
.cvl{position:absolute;inset:0;background:#eef4f9;overflow:hidden}
.cvl img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.cvl .tx{position:absolute;left:88px;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:620px}
.cvl .tx img.lg{height:40px;width:auto;max-height:40px;object-fit:contain}
.cvl h1{font-size:46px;font-weight:700;line-height:1.16;letter-spacing:-1.6px;
  color:#0b3f8f;padding-bottom:4px;white-space:nowrap}
.cvl .rule{width:104px;height:6px;border-radius:3px;background:var(--orange);margin:0}
/* Thẻ "Plus" lấy đúng màu badge trong logo-ivt-plus.png (#0560a6, màu đặc) */
.cvl h1 .bdg{display:inline-block;vertical-align:10px;margin-left:15px;
  padding:7px 22px 9px;border-radius:999px;font-size:28px;font-weight:700;
  letter-spacing:-.3px;color:#fff;line-height:1;background:#0560a6;
  box-shadow:0 4px 12px rgba(5,96,166,.28)}

/* ── Bìa chia đôi: chữ bên trái, tranh bên phải ───────────────────────── */
.cvs{position:absolute;inset:0;background:#fff;overflow:hidden}
.cvs .tx{position:absolute;left:88px;top:0;bottom:0;width:552px;z-index:2;
  display:flex;flex-direction:column;justify-content:center;gap:30px}
.cvs h1{font-size:56px;font-weight:700;letter-spacing:-1.9px;color:var(--ink);
  line-height:1.16;padding-bottom:3px}
.cvs .rule{width:100px;height:6px;border-radius:3px;background:var(--orange);margin-top:18px}
/* Mục lục trên bìa Nội dung: cùng ngôn ngữ với `.agn2` của slide mục lục —
   trục dọc, mốc số tròn, dòng kẻ chân. Trước là bốn thẻ trắng mà thẻ nào cũng
   chỉ chứa mỗi một cái tên ngắn. */
.cvs .ag{position:relative;display:flex;flex-direction:column}
.cvs .ag::before{content:'';position:absolute;left:22px;top:32px;bottom:32px;width:2px;
  border-radius:2px;background:linear-gradient(180deg,var(--acc),var(--acc-b))}
.cvs .ag>div{display:flex;align-items:center;gap:19px}
.cvs .ag i{flex:0 0 46px;height:46px;border-radius:50%;background:#fff;z-index:1;
  border:2px solid var(--acc-b);color:var(--acc-d);display:grid;place-items:center;
  font-style:normal;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;
  box-shadow:0 8px 20px rgba(9,44,78,.10)}
/* display:block chu dung flex — flex bien chu va the badge thanh hai muc rieng,
   an mat dau cach giua chung */
.cvs .ag>div>span{flex:1;min-width:0;display:block;padding:17px 0;
  font-size:19.5px;font-weight:700;letter-spacing:-.35px;color:var(--ink)}
.cvs .ag>div+div>span{border-top:1px solid var(--line)}
/* Tranh full chiều cao, mờ dần về trái để không tạo mép cứng giữa slide */
.cvs .art{position:absolute;right:0;top:0;bottom:0;width:660px;z-index:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.cvs .art img{width:100%;height:100%;object-fit:cover;object-position:right center;
  max-width:none}

/* Ảnh web ngang — dùng lại khung của slide video */
.vid .fr.shot{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);padding:8px}
.vid .fr.shot img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:8px;cursor:zoom-in}

/* Bìa Pro — chữ chìm + 3 thiết bị xếp lớp, mọi toạ độ tính trên khung 1280×720 */
.cvd{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(180deg,#fcfdff 0%,#eff5fc 60%,#e1ebf7 100%)}
.cvd .wm{position:absolute;left:0;right:0;top:-58px;z-index:0;text-align:center;
  font-size:166px;font-weight:800;letter-spacing:-6px;color:#e7f0fa;line-height:1;
  white-space:nowrap;user-select:none;pointer-events:none}
.cvd .hd{position:absolute;left:0;right:0;top:94px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:13px}
.cvd .hd img.lg{height:30px;width:auto;max-height:30px;object-fit:contain}
.cvd .hd h1{font-size:50px;font-weight:700;letter-spacing:-1.7px;color:#0b3f8f;
  line-height:1.16;padding-bottom:3px;text-align:center}
.cvd .hd .rule{width:96px;height:5px;border-radius:3px;background:var(--orange);margin:0}
/* Bìa bộ V3 dùng chung khuôn với bìa Pro, chỉ đổi màu thẻ và chữ chìm */
body[data-deck="v3"] .cvd{background:linear-gradient(150deg,#eaf7f5,#f4fbfa 55%,#eef9f7)}
body[data-deck="v3"] .cvd .wm{color:rgba(18,152,140,.10)}

/* ── Bìa iPOS Accounting — cùng khuôn .cvd, cảnh dưới là màn hình + hai cửa sổ ── */
.cvacc{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(180deg,#fcfdff 0%,#eff5fc 60%,#e1ebf7 100%)}
.cvacc .wm{position:absolute;left:0;right:0;top:-26px;z-index:0;text-align:center;
  font-size:124px;font-weight:800;letter-spacing:-6px;color:#e7f0fa;line-height:1;
  white-space:nowrap;user-select:none;pointer-events:none}
.cvacc .hd{position:absolute;left:0;right:0;top:74px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.cvacc .hd img.lg{height:82px;width:auto;max-height:82px;object-fit:contain}
.cvacc .hd h1{font-size:44px;font-weight:700;letter-spacing:-1.3px;color:#0b3f8f;
  line-height:1.2;padding-bottom:3px;text-align:center;text-transform:uppercase}
.cvacc .hd h1 b{text-transform:none;color:inherit;font-weight:inherit}
.cvacc .hd .rule{width:96px;height:5px;border-radius:3px;background:var(--orange);margin:0}
.cvacc .hd p{font-size:17px;font-weight:600;color:var(--muted);letter-spacing:.3px}
.cvacc .scene{position:absolute;left:0;right:0;bottom:0;height:400px;z-index:2}
.cvacc .scene .mon{position:absolute;left:50%;bottom:14px;width:560px;height:auto;
  max-width:none;transform:translateX(-50%);z-index:3;
  filter:drop-shadow(0 18px 28px rgba(11,44,107,.18))}
.cvacc .scene .win{position:absolute;z-index:1;background:#fff;padding:6px;border-radius:10px;
  border:1px solid var(--line);box-shadow:var(--sh-2)}
.cvacc .scene .win img{display:block;width:100%;height:auto;border-radius:6px}
.cvacc .scene .w0{left:96px;bottom:74px;width:400px;transform:rotate(-4deg)}
.cvacc .scene .w1{right:104px;bottom:62px;width:340px;transform:rotate(4deg)}
body[data-deck="v3"] .cvd .hd h1{color:#0f5a55}
body[data-deck="v3"] .cvd .hd h1 .pro{background:linear-gradient(180deg,#0f7a72,#17a89a);
  box-shadow:0 5px 15px rgba(15,122,114,.28);color:#fff}
/* Bìa Plus: thẻ xanh đặc #0560a6 như logo-ivt-plus.png, chữ chìm và nền giữ như Pro */
body[data-deck="plus"] .cvd .hd h1 .pro{background:#0560a6;box-shadow:0 4px 12px rgba(5,96,166,.28)}
/* Thẻ "Pro" lấy đúng kiểu badge vàng trong logo-ivt-pro.png */
.cvd .hd h1 .pro{display:inline-block;vertical-align:12px;margin-left:16px;
  padding:7px 24px 9px;border-radius:999px;font-size:31px;font-weight:700;
  letter-spacing:-.4px;color:#fff;line-height:1;
  background:linear-gradient(180deg,#9c7220 0%,#ac8129 46%,#cdb46e 100%);
  box-shadow:0 4px 12px rgba(138,107,22,.26)}

/* Dải 3 thiết bị dùng cho slide Giới thiệu — toạ độ tính trên khung 1280×460 */
.hero .pic.dvb{flex:0 0 460px;max-height:460px;overflow:hidden;position:relative;
  background:
    radial-gradient(660px 300px at 16% -6%,rgba(255,255,255,.7),transparent 64%),
    radial-gradient(620px 460px at 90% 106%,rgba(72,148,226,.30),transparent 70%),
    linear-gradient(178deg,#dcecfb 0%,#cbe1f7 46%,#b3d4f2 100%)}
.hero .pic.dvb::before{content:'';position:absolute;left:-70px;top:-150px;
  width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none}
.hero .pic.dvb::after{content:'';position:absolute;right:-10%;top:-45%;width:52%;height:190%;
  transform:rotate(19deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent)}
.dvband{position:relative;width:1280px;height:460px}
.dvband .dv{position:absolute;background:#fff;
  box-shadow:0 18px 40px rgba(9,44,78,.18),0 3px 9px rgba(9,44,78,.09)}
.dvband .dv img{width:100%;height:auto;display:block;cursor:zoom-in;max-width:none}
.dvband .scr{width:760px;left:260px;bottom:-34px;z-index:1;padding:8px;border-radius:17px}
.dvband .scr img{border-radius:10px}
.dvband .ph{z-index:2;padding:6px;border-radius:24px;transform-origin:50% 100%}
.dvband .ph img{border-radius:18px}
.dvband .ph.l{width:162px;left:112px;bottom:-50px;transform:rotate(-3deg)}
.dvband .ph.r{width:175px;right:120px;bottom:-26px;transform:rotate(3deg)}

.cvd .dv{position:absolute;background:#fff;
  box-shadow:0 22px 48px rgba(9,44,78,.19),0 4px 10px rgba(9,44,78,.10)}
.cvd .dv img{width:100%;height:auto;display:block;cursor:zoom-in;max-width:none}
.cvd .scr{width:940px;left:170px;bottom:-46px;z-index:1;padding:8px;border-radius:19px}
.cvd .scr img{border-radius:12px}
.cvd .ph{z-index:2;padding:6px;border-radius:27px;transform-origin:50% 100%}
.cvd .ph img{border-radius:21px}
.cvd .ph.l{width:200px;left:52px;bottom:-70px;transform:rotate(-3deg)}
.cvd .ph.r{width:216px;right:52px;bottom:-40px;transform:rotate(3deg)}

/* Bìa Pro */
.cvp{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff}
.cvp .ph{flex:0 0 390px;position:relative;overflow:hidden}
.cvp .ph img{width:100%;height:100%;object-fit:cover}
/* Ảnh minh hoạ ở bìa Pro: hiện đủ hình thay vì cắt */
/* Gradient lấy đúng từ pixel nền của ảnh nên không lộ mép ảnh */
.cvp .ph.contain{background:linear-gradient(180deg,#dfedf8 0%,#e0eef7 25%,
  #ecf5fc 50%,#eff6fc 74%,#f4f9fd 100%)}
.cvp .ph.contain img{object-fit:contain;object-position:right center}
.cvp .ph .lg{position:absolute;left:34px;top:26px;height:40px;filter:brightness(0) invert(1);opacity:.95}
.cvp .bt{flex:1;display:grid;grid-template-columns:390px 1fr;gap:34px;padding:36px 58px 52px;align-items:center}
.cvp h1{font-size:52px;font-weight:700;letter-spacing:-1.4px;color:var(--ink);line-height:1.16;
  padding-bottom:3px}
.cvp .rule{margin-top:16px;width:96px}
.cvp .ag{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cvp .ag div{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);
  border-radius:13px;background:#fff;box-shadow:var(--sh-1);font-size:15px;font-weight:600;color:var(--ink)}
.cvp .ag i{flex:0 0 30px;height:30px;border-radius:9px;background:var(--acc-t);color:var(--acc-d);
  display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:700}

/* ── Kết thúc ──────────────────────────────────────────────────────────── */
.endimg{position:absolute;inset:0;background:#fff;display:flex;align-items:center;justify-content:center}
.endimg img{width:100%;height:100%;object-fit:contain}

/* ── Mục lục ───────────────────────────────────────────────────────────────
   Một trục dọc bên trái, mỗi mục một mốc số. Trước là lưới thẻ hai cột: thẻ nào
   cũng chỉ chứa một cái tên ngắn nên hở một mảng trắng bên phải, và bốn mục thì
   nửa dưới slide trống hẳn. */
.agn2{position:relative;width:100%;align-self:stretch;display:flex;
  flex-direction:column}
/* Trục nối các mốc: chạy từ tâm mốc đầu tới tâm mốc cuối, nằm dưới mốc */
.agn2::before{content:'';position:absolute;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--acc),var(--acc-b))}
.agn2 .it{flex:1;min-height:0;position:relative;display:flex;align-items:center}
.agn2 .nd{border-radius:50%;background:#fff;z-index:1;border:2px solid var(--acc-b);
  display:grid;place-items:center;box-shadow:0 8px 20px rgba(9,44,78,.10)}
.agn2 .nd b{color:var(--acc-d);font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:.4px}
/* Số slide ở lề phải: neo dòng kẻ lại cả hai đầu, không thì nửa phải hụt hẫng */
.agn2 .pnl{flex:1;min-width:0;display:flex;align-items:center;gap:22px}
.agn2 .pnl .tx{flex:1;min-width:0}
.agn2 .pnl>em{flex:0 0 auto;font-style:normal;font-weight:700;color:var(--acc-b);
  font-variant-numeric:tabular-nums;letter-spacing:.5px}
.agn2 .pnl .tx>span{display:block;font-weight:700;color:var(--ink);
  line-height:1.25;letter-spacing:-.45px}

/* Dạng thẻ — mục có mục con nên thẻ đủ chữ để lấp, chạy hết bề ngang */
.agn2.the{gap:14px}
.agn2.the::before{left:28px;top:56px;bottom:56px}
.agn2.the .it{gap:22px}
.agn2.the .nd{flex:0 0 58px;height:58px}
.agn2.the .nd b{font-size:18.5px}
.agn2.the .pnl{position:relative;overflow:hidden;padding:15px 26px;border-radius:15px;
  border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1)}
.agn2.the .pnl::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--acc)}
.agn2.the .pnl .tx>span{font-size:22px}
.agn2.the .pnl>em{font-size:19px}
.agn2.the .pnl .tx>small{display:block;margin-top:6px;font-size:15px;color:var(--muted);
  line-height:1.5}
.agn2.the .pnl .tx>small i{font-style:normal;color:var(--acc-b);margin:0 9px}

/* Dạng dòng kẻ — danh sách phẳng, mỗi mục chỉ một cái tên ngắn. Bọc thẻ thì
   thẻ nào cũng hở một mảng trống bên phải, nên bỏ thẻ, chừa dòng kẻ chân. */
.agn2.ke::before{left:24px;top:34px;bottom:34px}
.agn2.ke .it{gap:20px}
.agn2.ke .nd{flex:0 0 50px;height:50px}
.agn2.ke .nd b{font-size:16.5px}
.agn2.ke .it+.it .pnl{border-top:1px solid var(--line)}
.agn2.ke .pnl{align-self:stretch}
.agn2.ke .pnl .tx>span{font-size:23px}
.agn2.ke .pnl>em{font-size:19px}

/* ── Thẻ định nghĩa ────────────────────────────────────────────────────── */
.defs{display:flex;flex-direction:column;gap:22px;width:100%;justify-content:center;align-self:stretch}
.defs .row{flex:1;min-height:0}
.defs .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.defs .c{padding:32px 28px;border:1px solid var(--line);border-radius:16px;background:#fff;
  box-shadow:var(--sh-1);display:flex;flex-direction:column;justify-content:center;gap:11px}
.defs .c h3{font-size:20px;font-weight:700;color:var(--acc-d);letter-spacing:-.2px;
  display:flex;align-items:center;gap:9px}
.defs .c h3::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--acc);flex:0 0 8px}
.defs .c p{font-size:19px;line-height:1.72;color:var(--body)}
.defs .fx{border-radius:16px;padding:28px 28px;background:linear-gradient(120deg,var(--blue-xd),var(--blue) 62%,var(--blue-l));
  color:#fff;display:flex;align-items:center;gap:22px;box-shadow:var(--sh-2)}
.defs .fx h3{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  opacity:.78;flex:0 0 150px;line-height:1.4}
.defs .fx p{font-size:24.5px;font-weight:600;letter-spacing:-.3px}
.defs .fx p b{color:var(--orange);font-weight:700;padding:0 3px}

/* ── Chuyển mục ────────────────────────────────────────────────────────── */
.sect{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;
  background:linear-gradient(120deg,var(--blue-xd) 0%,var(--blue-d) 55%,var(--blue) 100%)}
body[data-deck="pro"] .sect{background:linear-gradient(120deg,#7a3c05 0%,#c2660a 55%,var(--orange) 100%)}
.sect .l{padding:0 0 0 76px;display:flex;flex-direction:column;justify-content:center;gap:20px;position:relative;z-index:2}
.sect .num{font-size:15px;font-weight:700;letter-spacing:3px;color:rgba(255,255,255,.6)}
.sect h1{font-size:46px;font-weight:700;line-height:1.22;letter-spacing:-1.2px;color:#fff;padding-bottom:3px}
/* Luật chung b,strong{color:var(--ink)} nhuộm chữ iPOS thành xanh đen, chìm hẳn
   vào nền xanh. Tên sản phẩm bọc ~~…~~ thì lên màu cam sáng, đọc rõ trên nền tối. */
.sect h1 b{color:inherit;font-weight:inherit;text-transform:none}
.sect h1 em.hl{color:#ffa53b;font-weight:inherit;white-space:nowrap}
.sect .ln{width:82px;height:4px;border-radius:3px;background:var(--orange)}
body[data-deck="pro"] .sect .ln{background:#fff}
.sect p{font-size:16px;color:rgba(255,255,255,.82);max-width:430px;line-height:1.62}
.sect .r{position:relative;overflow:hidden}
.sect .r i{position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}
.sect .r i:nth-child(1){width:400px;height:400px;right:-110px;top:-90px}
.sect .r i:nth-child(2){width:250px;height:250px;right:180px;bottom:-70px;background:rgba(255,255,255,.05)}
.sect .r b{position:absolute;right:64px;top:50%;transform:translateY(-50%);font-size:250px;
  font-weight:700;color:rgba(255,255,255,.1);letter-spacing:-10px;line-height:1}

/* ── Bullet 2 cột ──────────────────────────────────────────────────────── */
.bl{display:grid;grid-template-columns:minmax(0,1fr);gap:42px;width:100%;
  align-items:center;align-self:center}
.bl .lft h1{font-size:38px;font-weight:700;line-height:1.22;letter-spacing:-.9px;
  color:var(--ink);text-transform:uppercase;padding-bottom:3px}
.bl.sm .lft h1{font-size:32px;letter-spacing:-.7px}
.bl .lft h1 b{text-transform:none;color:inherit;font-weight:inherit}
/* Câu dẫn dưới tiêu đề */
.bl .bl-lead{margin-top:18px;font-size:19px;font-weight:600;line-height:1.5;color:var(--ink)}
.bl .bl-lead b{color:inherit}
/* pain:1 — slide nêu vấn đề của phần mềm kế toán không chuyên F&B */
.bl.pain .bl-lead{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;
  border-radius:10px;background:#fef3f2;border:1px solid #fecdca;color:#b42318;
  font-size:15px;font-weight:700;letter-spacing:.2px;line-height:1.4}
.bl.pain li{border-left:3px solid #f5a39a}
.bl.pain li i{position:relative;flex:0 0 22px;height:22px;margin-top:3px;border-radius:50%;
  background:#fdeceb}
.bl.pain li i::before{content:'×';position:absolute;inset:0;display:grid;place-items:center;
  font-style:normal;font-size:17px;font-weight:700;line-height:1;color:#d64532}
/* Cột trái kèm tranh minh hoạ nền trong suốt */
/* Tiêu đề chiếm hàng trên, hàng dưới là bốn ô chữ bên trái và tranh bên phải —
   hai khối cùng một dải ngang nên tâm trùng nhau, không còn lệch. */
.bl.hasart{grid-template-columns:minmax(0,1fr) var(--aw,372px);
  grid-template-rows:auto minmax(0,1fr);gap:26px 46px;align-items:center}
.bl.hasart .lft{grid-column:1 / -1;grid-row:1}
.bl.hasart ul{grid-column:1;grid-row:2;align-self:center}
.bl.hasart .art{grid-column:2;grid-row:2;align-self:stretch;
  display:flex;align-items:center;justify-content:center;min-height:0}
.bl.hasart .art img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.bl .lft .num{font-size:13px;font-weight:700;letter-spacing:2.6px;color:var(--acc);margin-bottom:12px}
.bl .lft .ln{width:74px;height:4px;border-radius:3px;background:var(--orange);margin-top:18px}
.bl ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.bl li{display:flex;gap:14px;align-items:flex-start;padding:15px 19px;border-radius:14px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);
  font-size:17.6px;line-height:1.58;color:var(--body)}
.bl.sm li{font-size:14.5px;padding:13px 17px;line-height:1.6}
.bl li i{flex:0 0 9px;height:9px;border-radius:50%;background:var(--acc);margin-top:8px}
.bl.sm li i{margin-top:7px}

/* ── Hero (ảnh trên + chữ dưới) ────────────────────────────────────────── */
.hero{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff}
.hero .pic{flex:0 0 auto;position:relative;overflow:hidden;background:var(--tint);max-height:482px}
.hero .pic.wide{max-height:520px}
.hero .pic.wide+.tx{padding:14px 58px 42px;gap:32px}
.hero .pic img{width:100%;height:auto;max-height:482px;object-fit:contain}
.hero .tx{flex:1;min-height:0;display:grid;grid-template-columns:340px minmax(0,1fr);gap:36px;
  padding:20px 58px 46px;align-items:center}
.hero h1{font-size:33px;font-weight:700;line-height:1.22;letter-spacing:-.8px;color:var(--ink);
  text-transform:uppercase;padding-bottom:2px}
.hero .num{font-size:13px;font-weight:700;letter-spacing:2.6px;color:var(--acc);margin-bottom:9px}
.hero .ln{width:70px;height:4px;border-radius:3px;background:var(--orange);margin-top:14px}
.hero p{font-size:16.6px;line-height:1.72;color:var(--body);text-align:justify}
.hero p+p{margin-top:11px}
.hero ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.hero li{display:flex;gap:13px;align-items:flex-start;font-size:16.6px;line-height:1.62}
.hero li i{flex:0 0 8px;height:8px;border-radius:50%;background:var(--acc);margin-top:8px}

/* ── Banner hero dựng bằng HTML (thay ảnh ghép) ────────────────────────── */
.bnr{position:relative;width:1280px;height:520px;overflow:hidden;
  background:linear-gradient(166deg,#eef8fd 0%,#d5edf9 40%,#a3d3ef 100%)}
.bnr .orb{position:absolute;border-radius:50%;pointer-events:none}
.bnr .orb.a{width:440px;height:440px;left:-140px;top:-210px;background:rgba(255,255,255,.42)}
.bnr .orb.b{width:320px;height:320px;right:-90px;top:-140px;background:rgba(255,255,255,.28)}
.bnr .wave{position:absolute;left:0;right:0;bottom:0;height:230px;pointer-events:none;
  background:radial-gradient(135% 100% at 50% 120%,rgba(255,255,255,.62),transparent 66%)}
/* .hero .pic img đặt width:100% — phải thắng nó bằng img.lg cùng độ ưu tiên.
   File logo có nền trắng sẵn nên bọc thành thẻ trắng bo góc cho ra chủ ý. */
/* Tên sản phẩm canh giữa phía trên, cùng kiểu chữ + thẻ với slide bìa */
.bnr .brand,.dvband .brand{position:absolute;left:0;right:0;top:14px;z-index:5;
  display:flex;align-items:center;justify-content:center;gap:13px}
.bnr .brand .nm,.dvband .brand .nm{font-size:27px;font-weight:700;letter-spacing:-.9px;color:#0b3f8f;
  line-height:1.16}
.bnr .brand .bdg,.dvband .brand .bdg{padding:5px 15px 6px;border-radius:999px;font-size:16px;font-weight:700;
  letter-spacing:-.2px;color:#fff;line-height:1;background:#0560a6;
  box-shadow:0 3px 9px rgba(5,96,166,.26)}
.bnr .beam{position:absolute;left:-10%;top:-40%;width:60%;height:190%;pointer-events:none;
  transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent)}
/* Nhãn bám ngay trên đầu máy của nó, không phải một hàng rời ở trên cùng */
.bnr .cap{position:absolute;z-index:4;display:flex;gap:8px;align-items:flex-start;padding-right:8px}
.bnr .cap::before{content:'';flex:0 0 7px;height:7px;border-radius:50%;background:var(--orange);
  margin-top:6px;box-shadow:0 0 0 3px rgba(245,135,31,.18)}
.bnr .cap span{font-size:15px;font-weight:600;line-height:1.42;color:#0f3559;letter-spacing:-.1px;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.bnr .ph{position:absolute;padding:6px;border-radius:27px;background:#fff;
  transform-origin:50% 100%;box-shadow:0 20px 44px rgba(9,44,78,.20),0 3px 9px rgba(9,44,78,.10)}
.bnr .ph::after{content:'';position:absolute;left:12%;right:12%;bottom:-16px;height:16px;
  border-radius:50%;background:rgba(9,44,78,.13);filter:blur(7px);z-index:-1}
.bnr .ph img{width:100%;height:auto;border-radius:21px;display:block;cursor:zoom-in}
/* Dải thiết bị slide Giới thiệu Pro dùng lại tên sản phẩm của banner. Đặt SAU
   `.bnr .brand` vì cùng độ ưu tiên: chữ giữa khoảng trống trên màn hình (mép
   trên màn ở y=112), thẻ vàng như logo-ivt-pro.png */
.dvband .brand{top:40px}
.dvband .brand .bdg{background:linear-gradient(180deg,#9c7220 0%,#ac8129 46%,#cdb46e 100%);
  box-shadow:0 3px 9px rgba(138,107,22,.26)}

/* Thẻ Plus / Pro trong tiêu đề — cùng màu với logo sản phẩm */
.tbdg{display:inline-block;vertical-align:5px;margin:0 2px;padding:4px 14px 5px;
  border-radius:999px;font-size:.62em;font-weight:700;letter-spacing:-.2px;
  color:#fff;line-height:1;white-space:nowrap;text-transform:none}
.kicker .tbdg{font-size:9.5px;padding:2.5px 8px 3px;vertical-align:1px;margin:0 1px}
/* Trong đoạn văn thì thẻ phải nhỏ lại, không thì phá nhịp dòng */
.hero p .tbdg,.hero li .tbdg{font-size:11.5px;padding:3px 9px 4px;vertical-align:1px;margin:0 2px}
.tbdg.standard{background:#5b6675;box-shadow:0 3px 9px rgba(91,102,117,.24)}
.tbdg.plus{background:#0560a6;box-shadow:0 3px 9px rgba(5,96,166,.24)}
.tbdg.v3{background:linear-gradient(180deg,#0f7a72,#17a89a);
  box-shadow:0 3px 9px rgba(15,122,114,.26)}
.tbdg.pro{background:linear-gradient(180deg,#9c7220 0%,#ac8129 46%,#cdb46e 100%);
  box-shadow:0 3px 9px rgba(138,107,22,.24)}

/* Slide khai `plain` thì tên gói viết thẳng, chỉ lấy màu. Dùng cho mấy slide bàn
   riêng về gói bản quyền: một câu có tới ba bốn tên gói, bọc thẻ hết thì rối
   mắt. Đặt tên class khác hẳn chứ không đè lên .tbdg — đè thì phải thắng cả
   đống luật chỉnh cỡ thẻ theo ngữ cảnh. */
.tnm{font-weight:700;text-transform:none;white-space:nowrap}
.tnm.standard{color:#5b6675}
.tnm.plus{color:#0560a6}
.tnm.v3{color:#0f7a72}
.tnm.pro{color:#9c7220}

/* ── Lưới thẻ phân hệ ──────────────────────────────────────────────────── */
.mgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;width:100%;
  align-self:stretch;grid-auto-rows:1fr}
.mgrid.auto{grid-auto-rows:auto;align-content:center}
.mgrid .m{grid-column:span var(--sp,4);position:relative;overflow:hidden;
  padding:20px 22px;border-radius:18px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:14px}
.mgrid .m{--mc:var(--acc)}
.mgrid .m::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--mc),color-mix(in srgb,var(--mc) 45%,#fff))}
.mgrid .m .no{position:absolute;right:18px;top:10px;font-size:46px;font-weight:700;
  color:var(--mc);opacity:.13;line-height:1;letter-spacing:-2.4px;
  font-variant-numeric:tabular-nums}
.mgrid .m .hd{display:flex;align-items:center;gap:13px;position:relative;z-index:1}
.mgrid .m .hd i{flex:0 0 42px;height:42px;border-radius:13px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(140deg,color-mix(in srgb,var(--mc) 78%,#000),var(--mc));
  box-shadow:0 4px 12px color-mix(in srgb,var(--mc) 32%,transparent)}
.mgrid .m .hd i svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.mgrid .m .hd b{font-size:19.5px;font-weight:700;color:var(--ink);line-height:1.25}
.mgrid .m ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.mgrid .m.wide ul{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px}
.mgrid .m li{display:flex;gap:10px;font-size:15.6px;line-height:1.5;color:var(--body)}
.mgrid .m li::before{content:'';flex:0 0 6px;height:6px;border-radius:50%;
  background:var(--mc);margin-top:6px;opacity:.65}
/* Thẻ nhấn — dùng cho phân hệ không có mục con */
.mgrid .m.hi{border-color:transparent;justify-content:center;
  background:linear-gradient(140deg,var(--blue-d),var(--blue));
  box-shadow:0 8px 24px rgba(27,111,224,.26)}
body[data-deck="pro"] .mgrid .m.hi{background:linear-gradient(140deg,var(--orange-d),var(--orange));
  box-shadow:0 8px 24px rgba(245,135,31,.26)}
.mgrid .m.hi::before{display:none}
.mgrid .m.hi .no{color:#fff;opacity:.18}
.mgrid .m.hi .hd i{background:rgba(255,255,255,.2);box-shadow:none}
.mgrid .m.hi .hd b{color:#fff}
.mgrid .m.hi li{color:rgba(255,255,255,.86)}
.mgrid .m.hi li::before{background:#fff;opacity:.6}

/* ── Ba thẻ ảnh máy + mô tả ────────────────────────────────────────────── */
.trio{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  grid-template-rows:minmax(0,1fr) auto;gap:16px 24px;width:100%;
  align-self:stretch;min-height:0}
.trio .c{display:contents}
.trio .ph{min-height:0;display:flex;align-items:flex-end;justify-content:center}
.trio .ph img{max-height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:20px;
  box-shadow:0 16px 36px rgba(9,44,78,.18),0 3px 8px rgba(9,44,78,.09);cursor:zoom-in}
.trio .ph .pf{height:100%;padding:6px;background:#fff;border-radius:26px;display:flex;
  box-shadow:0 16px 36px rgba(9,44,78,.18),0 3px 8px rgba(9,44,78,.09)}
.trio .ph .pf img{height:100%;width:auto;max-width:none;max-height:none;border-radius:21px;
  box-shadow:none;object-fit:contain}
/* Ảnh web ngang thấp hơn hẳn cột: canh giữa cho khoảng trống chia đều hai
   đầu, không dồn hết lên trên như khi canh chân. */
.trio .ph .brw{max-height:100%;margin:auto 0}
.trio .ph .brw img{width:100%;height:auto;max-height:100%;border-radius:0;box-shadow:none;
  object-fit:contain}
.trio .tx{display:flex;flex-direction:column;gap:6px}
.trio .tx b{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;
  color:var(--ink);line-height:1.3}
.trio .tx b i{flex:0 0 26px;height:26px;border-radius:8px;background:var(--acc);color:#fff;
  display:grid;place-items:center;font-style:normal;font-size:11.5px;font-weight:700}
.trio .tx span{font-size:14.2px;line-height:1.55;color:var(--body)}

/* ── Khung trình duyệt + điểm nhấn ─────────────────────────────────────── */
.wg{display:grid;gap:32px;width:100%;min-height:0;align-items:center}
.wg.row{grid-template-columns:392px minmax(0,1fr)}
.wg.col{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:1fr}
.brw{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 26px 60px rgba(9,44,78,.22),0 5px 14px rgba(9,44,78,.11);
  display:flex;flex-direction:column;max-height:100%;min-height:0}
.brw .bar3{flex:0 0 28px;display:flex;align-items:center;gap:6px;padding:0 13px;
  background:#f2f6fb;border-bottom:1px solid var(--line)}
.brw .bar3 i{width:9px;height:9px;border-radius:50%}
.brw .bar3 i:nth-child(1){background:#f2a09a}
.brw .bar3 i:nth-child(2){background:#f5cf8e}
.brw .bar3 i:nth-child(3){background:#a8dcae}
.brw img{width:100%;height:auto;max-width:100%;object-fit:contain;cursor:zoom-in;display:block}
/* Ảnh trong khung trình duyệt phải co vừa phần còn lại, không thì bị khung
   cắt mất đáy. max-height theo % không ăn ở đây nên dùng flex cho chắc. */
.wg.col .brw{display:flex;flex-direction:column;min-height:0}
.wg.col .brw img{flex:1;min-height:0;width:100%;height:auto;max-width:100%;
  object-fit:contain;object-position:center top}
.wg .pts{display:grid;gap:12px;align-content:center}
.wg .pts.c2{grid-template-columns:1fr 1fr}
.wg .pts .p{display:flex;gap:13px;align-items:flex-start;padding:14px 17px;border-radius:14px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.wg .pts .p b{flex:0 0 28px;height:28px;border-radius:9px;background:var(--acc-t);
  color:var(--acc-d);display:grid;place-items:center;font-size:12px;font-weight:700}
.wg .pts .p span{font-size:15.4px;line-height:1.5;color:var(--body);padding-top:2px}

/* ── Sơ đồ luồng ───────────────────────────────────────────────────────── */
.flow{position:relative;width:1164px;height:480px;align-self:center;margin:0 auto}
.flow .ln{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.flow .ln path{fill:none;stroke:#33507a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow .ln text{font:600 11.5px var(--fs);fill:#5b6b80;letter-spacing:.2px}
.flow .nd{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;padding:8px 11px;border-radius:15px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh-1);text-align:center}
.flow .nd i{flex:0 0 32px;width:32px;height:32px;border-radius:10px;
  background:var(--acc-t);color:var(--acc-d);display:grid;place-items:center}
.flow .nd i svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.flow .nd span{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.32}
.flow .nd.alt{background:linear-gradient(140deg,var(--blue-d),var(--blue));border-color:transparent;
  box-shadow:0 6px 18px rgba(27,111,224,.28)}
.flow .nd.alt i{background:rgba(255,255,255,.22);color:#fff}
.flow .nd.alt span{color:#fff}

/* ── Ảnh toàn slide ────────────────────────────────────────────────────── */
.imgfull{display:flex;align-items:center;justify-content:center;min-height:0;height:100%;
  padding:2px 0 6px;overflow:hidden}
.imgfull img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:10px;cursor:zoom-in}
/* shadow:1 — ảnh chụp phần mềm: khung trắng + bóng như webshot. Khung cha phải mở
   overflow, không thì bóng bị cắt cụt thành mép thẳng (bẫy §18) */
.imgfull.dsh{overflow:visible;padding:4px 0 16px}
.imgfull.dsh img{background:#fff;border:1px solid var(--line);padding:8px;border-radius:14px;
  box-shadow:var(--sh-2)}

/* ── Cây tính năng ─────────────────────────────────────────────────────── */
.tree{display:grid;grid-template-columns:306px minmax(0,1fr);gap:34px;width:100%;
  align-items:center;align-self:center}
.tree .lft h1{font-size:34px;font-weight:700;line-height:1.24;letter-spacing:-.8px;color:var(--ink);
  padding-bottom:2px}
.tree .lft .num{font-size:13px;font-weight:700;letter-spacing:2.6px;color:var(--acc);margin-bottom:11px}
.tree .lft .ln{width:70px;height:4px;border-radius:3px;background:var(--orange);margin-top:16px}
.tree .gs{display:flex;flex-direction:column;gap:10px}
.tree .g{display:grid;grid-template-columns:236px 1fr;gap:12px;align-items:center}
.tree .g>b{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;
  background:linear-gradient(120deg,var(--blue-d),var(--blue));color:#fff;font-size:14.5px;font-weight:600;
  box-shadow:0 3px 10px rgba(27,111,224,.25);min-height:44px}
body[data-deck="pro"] .tree .g>b{background:linear-gradient(120deg,var(--orange-d),var(--orange));
  box-shadow:0 3px 10px rgba(245,135,31,.3)}
.tree .g>b::before{content:'';width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.75);flex:0 0 7px}
.tree .g .sub{display:flex;flex-wrap:wrap;gap:7px}
.tree .g .sub span{padding:8px 12px;border-radius:9px;background:#fff;border:1px solid var(--line);
  font-size:13px;font-weight:500;color:var(--body);box-shadow:var(--sh-1);white-space:nowrap}
.tree .g.solo>b{grid-column:1 / -1}

/* ── Thiết bị: ảnh + danh sách + ghi chú ───────────────────────────────── */
.dev{display:grid;grid-template-columns:var(--cw,400px) minmax(0,1fr);gap:40px;width:100%;
  min-height:0;align-items:stretch}
.dev.right{grid-template-columns:minmax(0,1fr) var(--cw,400px)}
.dev.right .shots{order:2}
.dev .shots{display:flex;align-items:center;justify-content:center;gap:14px;min-height:0}
.dev .shots img{max-height:100%;width:auto;object-fit:contain;border-radius:16px;
  box-shadow:var(--sh-2);cursor:zoom-in;background:#fff}
/* Khung máy cho ảnh chụp thô (chưa có viền sẵn).
   Phải neo chiều cao 100% — để auto thì ảnh lấy kích thước gốc và khung tràn cột. */
.dev .shots .brw{flex:0 1 auto;min-width:0;min-height:0;max-height:100%;
  /* bóng mặc định của .brw dài 86px xuống dưới, khung cao hết cột thì .s-body (lề
     dưới 54px) cắt ngang thành một đường thẳng. Dùng đúng bóng của khung điện thoại
     .pf đứng cạnh (V3 slide 13, 20) */
  box-shadow:0 18px 40px rgba(9,44,78,.20),0 3px 8px rgba(9,44,78,.10)}
.dev .shots .brw img{flex:0 1 auto;min-height:0;width:100%;height:auto;
  max-height:100%;object-fit:contain;border-radius:0;box-shadow:none}
.dev .shots .pf{height:100%;padding:6px;background:#fff;border-radius:26px;display:flex;
  box-shadow:0 18px 40px rgba(9,44,78,.20),0 3px 8px rgba(9,44,78,.10)}
.dev .shots .pf img{height:100%;width:auto;max-width:none;max-height:none;
  border-radius:21px;box-shadow:none;background:none;object-fit:contain}
.dev .side{display:flex;flex-direction:column;gap:12px;justify-content:center;min-height:0}
.lst{display:grid;gap:8px}
.lst.c2{grid-template-columns:1fr 1fr}
.lst .it{display:flex;gap:12px;align-items:flex-start;padding:10px 15px;border-radius:12px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
/* Chỉ bắt số thứ tự (con trực tiếp). `.lst .it b` từng bắt luôn <b>iPOS</b> trong câu,
   biến chữ iPOS thành ô số nằm chỏng chơ trên đầu dòng. */
.lst .it>b{flex:0 0 24px;height:24px;border-radius:7px;background:var(--acc-t);color:var(--acc-d);
  display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:1px}
.lst .it .tx{flex:1;min-width:0}
.lst .it .tx>span{display:block;font-size:16.4px;font-weight:600;color:var(--ink);line-height:1.4}
.lst .it .tx>small{display:block;font-size:14.4px;color:var(--muted);margin-top:2px;line-height:1.45}
.note{display:flex;gap:12px;padding:12px 16px;border-radius:13px;background:var(--acc-t);
  border:1px solid var(--acc-b);font-size:16.4px;line-height:1.62;color:var(--body)}
.note i{flex:0 0 17px;height:17px;margin-top:2px;color:var(--acc-d)}
.note i svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* ── Video ─────────────────────────────────────────────────────────────── */
/* Ảnh cao, tỉ lệ hẹp thì để khung tự do sẽ thừa hai dải trắng hai bên. Khai
   `imgw` để ghim bề ngang cột ảnh, phần dư trả hết cho cột chữ. */
.vid.fixw{grid-template-columns:var(--iw) minmax(300px,1fr)}
.vid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;width:100%;
  min-height:0;align-items:stretch}
.vid .fr{position:relative;border-radius:16px;overflow:hidden;background:#0b1420;
  box-shadow:var(--sh-2);min-height:0;height:100%;display:flex;align-items:center;justify-content:center}
.vid video{width:100%;height:100%;object-fit:contain;display:block;background:#0b1420;
  cursor:pointer}
.vid .tag{position:absolute;left:13px;top:13px;z-index:3;display:flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;background:rgba(8,16,26,.62);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.6px;backdrop-filter:blur(6px)}
.vid .tag i{width:6px;height:6px;border-radius:50%;background:#ff5f56;
  animation:bl 1.4s ease-in-out infinite}
@keyframes bl{50%{opacity:.25}}
.vid .side{display:flex;flex-direction:column;gap:14px;justify-content:center;min-height:0}

/* ── 3 trụ cột ─────────────────────────────────────────────────────────── */
.pil{display:grid;grid-template-columns:repeat(var(--pc,3),1fr);gap:20px;width:100%;
  align-items:center;align-self:center;max-height:100%}
/* Bốn thẻ chữ dài thì vẫn cho cao bằng nhau */
.pil[style*="--pc:2"]{align-items:stretch;align-self:stretch}
/* Slide ít thẻ thì đừng kéo cao hết khung, thẻ rỗng ruột nhìn rất trơ */
.pil.fit{align-items:stretch;align-self:center}
.pil.fit .c{padding:30px 28px 28px;gap:14px;justify-content:flex-start}
.pil.fit .c p{font-size:20.5px;line-height:1.6}
.pil .c{--mc:var(--acc)}
.pil .c{position:relative;padding:34px 28px 30px;border-radius:18px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh-1);display:flex;flex-direction:column;
  gap:18px;justify-content:center;overflow:hidden}
.pil .c::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,var(--mc),color-mix(in srgb,var(--mc) 45%,#fff))}
.pil .c b{font-size:52px;font-weight:700;letter-spacing:-2.4px;line-height:1;
  color:var(--mc);opacity:.3;font-variant-numeric:tabular-nums}
.pil .c p{font-size:19px;font-weight:600;line-height:1.5;color:var(--ink);letter-spacing:-.3px}
.pil .c p strong{color:#c8402c}
.pil[style*="--pc:4"] .c{padding:26px 24px 24px;gap:12px}
.pil[style*="--pc:2"] .c p{font-size:19.5px;font-weight:500;line-height:1.62;color:var(--body)}
.pil[style*="--pc:4"] .c p{font-size:15px;font-weight:500;line-height:1.55;color:var(--body)}
.pil[style*="--pc:4"] .c b{font-size:42px}
/* dense:1 — thẻ 2 cột mà chữ dài tới 5 dòng: cao hơn hàng 243px thì số bị đẩy cụt mép trên,
   chữ chạm đáy thẻ, auto-fit không kêu vì thẻ tự overflow:hidden */
.pil.dense .c{padding:24px 28px 22px;gap:10px}
.pil.dense .c b{font-size:40px}
.pil.dense .c p{font-size:18px;line-height:1.55}
.pil .c .dot{width:34px;height:4px;border-radius:3px;background:var(--mc);opacity:.55}
/* hl:1 — thẻ nổi bật: cao bằng nhau, số trong vòng tròn đặc màu thẻ, chữ đậm.
   Đặt sau các luật --pc:4 cùng độ ưu tiên nên thắng nhờ đứng sau. */
.pil.hl{align-items:stretch;align-self:center}
.pil.hl .c{justify-content:flex-start;gap:18px;padding:30px 24px 28px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--mc) 8%,#fff) 0,#fff 55%);
  border-color:color-mix(in srgb,var(--mc) 22%,var(--line))}
.pil.hl .c::before{height:6px}
.pil.hl .c b{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  font-size:21px;letter-spacing:0;opacity:1;color:#fff;
  background:linear-gradient(140deg,color-mix(in srgb,var(--mc) 78%,#000),var(--mc));
  box-shadow:0 6px 16px color-mix(in srgb,var(--mc) 32%,transparent)}
.pil.hl .c p{font-size:18px;font-weight:600;line-height:1.55;color:var(--ink);letter-spacing:-.2px}

/* ── Giá trị chi tiết ──────────────────────────────────────────────────── */
.val{display:grid;grid-template-columns:392px 1fr;gap:40px;width:100%;min-height:0;align-items:stretch}
.val .rail{display:flex;flex-direction:column;gap:9px;justify-content:center;min-height:0}
.val .rail .r{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;border-radius:13px;
  border:1px solid var(--line);background:#fff;transition:.2s;opacity:.5}
.val .rail .r b{flex:0 0 30px;height:30px;border-radius:9px;background:var(--tint-2);color:var(--blue-d);
  display:grid;place-items:center;font-size:12.5px;font-weight:700}
.val .rail .r span{font-size:15px;line-height:1.45;color:var(--body);padding-top:5px}
.val .rail .r.on{opacity:1;border-color:var(--acc-b);background:var(--acc-t);
  box-shadow:0 4px 14px rgba(14,26,43,.07)}
.val .rail .r.on b{background:var(--acc);color:#fff}
.val .rail .r.on span{font-size:17.5px;font-weight:600;color:var(--ink);padding-top:3px}
.val .shots{display:flex;align-items:center;justify-content:center;gap:22px;min-height:0}
.val .shots img{max-height:100%;width:auto;object-fit:contain;border-radius:16px;
  box-shadow:var(--sh-2);cursor:zoom-in}
.val .shots.fr{gap:22px}
/* Tranh minh hoạ nền trong suốt: bỏ khung và đổ bóng cho khỏi lộ mép chữ nhật */
.val .shots.art img{box-shadow:none;border-radius:0;background:none;max-height:100%}
.val .shots .pf{height:100%;padding:6px;background:#fff;border-radius:26px;display:flex;
  box-shadow:0 18px 40px rgba(9,44,78,.20),0 3px 8px rgba(9,44,78,.10)}
.val .shots .pf img{height:100%;width:auto;max-width:none;max-height:none;
  border-radius:21px;box-shadow:none;object-fit:contain}
.val .blank{display:grid;place-items:center;min-height:0;width:100%;height:100%;
  border:2px dashed var(--line-b);border-radius:18px;background:var(--tint);
  color:var(--muted);font-size:14px;text-align:center;padding:26px;gap:8px}
.val .blank b{display:block;font-size:15px;color:var(--acc-d);margin-bottom:4px}

/* ── Chân dung khách hàng ──────────────────────────────────────────────── */
.prof{display:flex;flex-direction:column;gap:16px;width:100%;justify-content:center;align-self:stretch}
.prof .p{flex:1;display:flex;gap:22px;align-items:center;padding:26px 30px;border-radius:16px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);position:relative;overflow:hidden}
.prof .p::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--acc)}
.prof .p i{flex:0 0 48px;height:48px;border-radius:14px;background:var(--acc-t);color:var(--acc-d);
  display:grid;place-items:center}
.prof .p i svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.prof .p span{font-size:17px;line-height:1.5;color:var(--body)}

/* Chân dung có tranh minh hoạ bên phải */
.profwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:38px;width:100%;
  align-items:center;align-self:center}
.profwrap .prof{align-self:center}
.profwrap .art{display:flex;align-items:center;justify-content:center;height:100%;min-height:0}
.profwrap .art img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.prof .p .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.prof .p .tx>span{font-size:17.8px;font-weight:600;color:var(--ink);line-height:1.4}
.prof .p .tx>small{font-size:14.6px;color:var(--body);line-height:1.55}

/* ── Bảng so sánh Plus / Pro ───────────────────────────────────────────── */
.cmp{display:flex;flex-direction:column;width:100%;align-self:stretch;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh-1)}
.cmp .hd,.cmp .rw{display:grid;grid-template-columns:minmax(0,1fr) 190px 190px;align-items:stretch}
.cmp .hd>div,.cmp .rw>div{padding:21px 22px;display:flex;align-items:center;
  border-bottom:1px solid var(--line)}
.cmp .rw{flex:1}
.cmp .rw:last-child>div{border-bottom:0}
.cmp .hd{background:#f7f9fc}
.cmp .hd>div{font-size:14px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--ink);justify-content:center}
.cmp .hd>div:first-child{justify-content:flex-start;color:var(--muted)}
.cmp .hd .c0{background:var(--tint-2)}
.cmp .hd .c1{background:#fdecd6}
/* Tên cột lấy đúng thẻ trên logo sản phẩm: Plus xanh đặc, Pro vàng kim */
.cmp .hd .bdg{display:inline-block;padding:7px 21px 8px;border-radius:999px;
  font-size:15.5px;font-weight:700;letter-spacing:-.2px;line-height:1;
  text-transform:none;color:#fff}
.cmp .hd .c0 .bdg{background:#0560a6;box-shadow:0 3px 10px rgba(5,96,166,.30)}
.cmp .hd .c1 .bdg{background:linear-gradient(180deg,#9c7220 0%,#ac8129 46%,#cdb46e 100%);
  box-shadow:0 3px 10px rgba(156,114,32,.30)}
.cmp .rw>div:first-child{font-size:19px;color:var(--body);line-height:1.45}
.cmp .rw .c0,.cmp .rw .c1{justify-content:center}
.cmp .rw .c0{background:#eef5fe}
.cmp .rw .c1{background:#fff7ec}
.cmp .mk{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;color:#fff}
.cmp .mk svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round}
.cmp .mk.y{background:#22a565;box-shadow:0 2px 6px rgba(34,165,101,.32)}
.cmp .mk.n{background:#e8514c;box-shadow:0 2px 6px rgba(232,81,76,.30)}

/* ── Trang cảm ơn ──────────────────────────────────────────────────────── */
.thx{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff}
.thx .top{flex:0 0 322px;position:relative;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(122deg,var(--blue-xd) 0%,var(--blue-d) 52%,var(--blue) 100%)}
body[data-deck="pro"] .thx .top{background:linear-gradient(122deg,#7a3c05,#c2660a 52%,var(--orange))}
.thx .top .o{position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}
.thx .top .o.a{width:420px;height:420px;left:-120px;top:-180px}
.thx .top .o.b{width:300px;height:300px;right:-70px;bottom:-160px;background:rgba(255,255,255,.06)}
.thx .top .o.c{width:170px;height:170px;right:220px;top:-70px;background:rgba(255,255,255,.05)}
.thx .top .in{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:16px}
.thx .top .lg{height:30px;width:auto;max-height:30px;filter:brightness(0) invert(1);opacity:.92}
.thx h1{font-size:62px;font-weight:700;color:#fff;letter-spacing:-2px;line-height:1.18;
  padding-bottom:4px}
.thx .top p{font-size:16px;color:rgba(255,255,255,.85)}
.thx .bot{flex:1;min-height:0;padding:26px 58px 44px;display:flex;flex-direction:column;
  gap:20px;justify-content:center;
  --thx-b:#12569f;   /* xanh iPOS cho các dòng tiêu đề */
  --thx-o:#e5871a}   /* cam cho toàn bộ thông tin liên hệ */
.thx .co{display:flex;align-items:baseline;gap:26px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid #f3d9b4}
.thx .co>b{font-size:19.5px;font-weight:700;color:var(--thx-b)}
.thx .ct{display:flex;gap:22px;flex-wrap:wrap}
.thx .ct span{font-size:15.5px;font-weight:600;color:var(--thx-o)}
.thx .offs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.thx .offs>div{display:flex;flex-direction:column;gap:5px}
.thx .offs b{font-size:15px;font-weight:700;color:var(--thx-b)}
.thx .offs span{font-size:14px;line-height:1.5;color:var(--thx-o)}
.thx .more{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.thx .more b{font-size:14.5px;font-weight:700;color:var(--thx-b)}
.thx .more span{font-size:14px;color:var(--thx-o);line-height:1.5}

/* ── Hỏi đáp ───────────────────────────────────────────────────────────── */
.qa{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(120deg,var(--blue-xd),var(--blue-d) 58%,var(--blue))}
body[data-deck="pro"] .qa{background:linear-gradient(120deg,#7a3c05,#c2660a 58%,var(--orange))}
body[data-deck="v3"] .qa{background:linear-gradient(120deg,#0a4a45,#0f6d64 58%,#17a89a)}
.qa .in{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:18px}
.qa .num{font-size:14px;font-weight:700;letter-spacing:3.4px;color:rgba(255,255,255,.6)}
.qa h1{font-size:74px;font-weight:700;color:#fff;letter-spacing:-2.4px;line-height:1.16;padding-bottom:4px}
.qa .ln{width:88px;height:4px;border-radius:3px;background:var(--orange)}
body[data-deck="pro"] .qa .ln{background:#fff}
.qa p{font-size:17px;color:rgba(255,255,255,.8)}
.qa .mk{position:absolute;font-weight:700;color:rgba(255,255,255,.07);line-height:1;user-select:none}
.qa .mk:nth-of-type(1){font-size:330px;left:78px;top:44px}
.qa .mk:nth-of-type(2){font-size:250px;right:104px;bottom:24px}

/* ── Bộ phận sử dụng (Pro s4) ──────────────────────────────────────────── */
.dept{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;
  align-content:center;align-self:center}
.dept .d{padding:19px 20px;border-radius:14px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:9px}
.dept .d:last-child:nth-child(odd){grid-column:1 / -1}
.dept .d h3{display:flex;align-items:center;gap:11px;font-size:14.6px;font-weight:700;
  letter-spacing:.5px;color:var(--acc-d);text-transform:uppercase;line-height:1.25}
.dept .d h3 i{flex:0 0 34px;height:34px;border-radius:10px;border:1.5px solid var(--acc-b);
  background:var(--acc-t);color:var(--acc-d);display:grid;place-items:center}
.dept .d h3 i svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.dept .d ul{list-style:none;display:flex;flex-direction:column;gap:5px;padding-left:2px}
/* Chấm đầu dòng vẽ bằng toạ độ, KHÔNG dùng flex: chữ có <strong> hay <em> mà
   để flex thì mỗi mẩu inline thành một ô riêng, câu vỡ vụn từng khúc. */
.dept .d li{position:relative;padding-left:15px;font-size:14.2px;line-height:1.55;color:var(--body)}
.dept .d li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--orange)}
/* Chiếu cho khách xem từ xa: chữ lên 16px, thẻ nới đệm (bộ kế toán, 21/09/2026) */
.dept{gap:18px}
.dept .d{padding:22px 24px;gap:12px}
.dept .d h3{font-size:16.5px}
.dept .d ul{gap:7px}
.dept .d li{font-size:16px;padding-left:17px}
.dept .d li::before{top:10px;width:6px;height:6px}

/* ── Bản đồ chức năng (Pro s5) ─────────────────────────────────────────── */
.mod{display:grid;grid-template-columns:300px minmax(0,1fr);gap:38px;width:100%;
  align-items:center;align-self:center}
.mod .lft h1{font-size:33px;font-weight:700;line-height:1.24;letter-spacing:-.8px;color:var(--ink);
  padding-bottom:2px}
.mod .lft .ln{width:70px;height:4px;border-radius:3px;background:var(--orange);margin-top:16px}
.mod .gr{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mod .m{padding:15px 17px;border-radius:15px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:10px}
.mod .m h3{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--ink)}
.mod .m h3 b{flex:0 0 26px;height:26px;border-radius:8px;background:var(--acc);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700}
.mod .m ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.mod .m li{display:flex;gap:9px;font-size:13.2px;line-height:1.48;color:var(--body)}
.mod .m li::before{content:'';flex:0 0 5px;height:5px;border-radius:50%;background:var(--acc);
  margin-top:7px;opacity:.55}

/* ── Quy trình đặt hàng (Pro s6) ───────────────────────────────────────── */
.oflow{display:grid;grid-template-columns:430px minmax(0,1fr);gap:34px;width:100%;
  min-height:0;align-items:stretch}
.oflow .pic{display:flex;align-items:center;justify-content:center;min-height:0;height:100%}
.oflow .pic img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in}
.oflow .st{display:flex;flex-direction:column;gap:8px;justify-content:center;min-height:0}
.oflow .s{display:grid;grid-template-columns:auto 1fr;gap:13px;padding:11px 15px;border-radius:13px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.oflow .s .dot{width:13px;height:13px;border-radius:50%;margin-top:4px;
  box-shadow:0 0 0 4px rgba(0,0,0,.045)}
.oflow .s h4{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
.oflow .s ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.oflow .s li{display:flex;gap:8px;font-size:14px;line-height:1.48;color:var(--body)}
.oflow .s li::before{content:'–';color:var(--muted);flex:0 0 auto}
/* Dải thuật ngữ RO / PO / PI */
.oflow .terms{display:flex;gap:10px;margin-top:2px}
.oflow .terms>div{flex:1;display:flex;flex-direction:column;gap:3px;padding:10px 12px;
  border-radius:12px;background:var(--acc-t);border:1px solid var(--acc-b)}
.oflow .terms b{font-size:16px;font-weight:700;color:var(--acc-d);letter-spacing:.4px}
.oflow .terms span{font-size:12.8px;line-height:1.35;color:var(--body)}

/* ── Sơ chế – chế biến (Pro s10) ───────────────────────────────────────── */
.prod{display:flex;flex-direction:column;gap:16px;width:100%;min-height:0}
.prod .chk{display:flex;align-items:center;gap:22px;padding:14px 20px;border-radius:14px;
  background:var(--tint);border:1px solid var(--line-b);flex:0 0 auto}
.prod .chk h4{font-size:13px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--blue-d);flex:0 0 auto}
.prod .chk .row{display:flex;gap:26px;flex-wrap:wrap}
.prod .chk .row span{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:500;color:var(--body)}
.prod .chk .row span i{flex:0 0 19px;height:19px;border-radius:5px;background:var(--blue);
  display:grid;place-items:center;color:#fff}
.prod .chk .row span i svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round}
.prod .cols{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:18px;min-height:0}
.prod .c{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--sh-1);
  padding:16px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;
  justify-items:start;min-height:0;overflow:hidden}
.prod .c .bd{align-self:flex-start;padding:6px 15px;border-radius:999px;font-size:12px;font-weight:700;
  letter-spacing:1.1px;background:var(--acc);color:#fff}
.prod .c .im{min-height:0;height:100%;display:flex;align-items:center;justify-content:center;
  width:100%;overflow:hidden}
.prod .c .im img{max-width:100%;max-height:100%;object-fit:contain}
.prod .c p{font-size:14.6px;line-height:1.55;color:var(--body)}

/* ── Hai kho + các làn nghiệp vụ nối chúng ─────────────────────────────── */
.twol{display:grid;grid-template-columns:168px minmax(0,1fr) 168px;gap:24px;width:100%;
  align-items:center;align-self:center}
.twol .site{display:flex;flex-direction:column;align-items:center;gap:13px;
  padding:30px 16px 26px;border-radius:20px;text-align:center;background:#fff;
  border:1px solid var(--line);box-shadow:0 12px 30px rgba(14,26,43,.10);
  position:relative;overflow:hidden}
.twol .site::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,var(--acc),var(--acc-b))}
.twol .site i{width:56px;height:56px;border-radius:18px;background:var(--acc-t);
  border:1px solid var(--acc-b);display:grid;place-items:center}
.twol .site i svg{width:28px;height:28px;stroke:var(--acc-d);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.twol .site b{font-size:21px;font-weight:700;letter-spacing:-.3px;color:var(--ink)}
.twol .site span{font-size:12.5px;font-weight:600;line-height:1;letter-spacing:.3px;
  padding:6px 13px 7px;border-radius:999px;background:var(--acc-t);
  border:1px solid var(--acc-b);color:var(--acc-d)}
.twol .lanes{display:flex;flex-direction:column;gap:22px;min-width:0}
.twol .lane{position:relative;padding:22px 20px 22px 22px;border-radius:16px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:13px;
  overflow:hidden}
.twol .lane::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.twol .lhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.twol .lhead b{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.2px}
.twol .lhead span{font-size:13.5px;color:var(--muted)}
.twol .stp{display:flex;align-items:stretch;gap:10px}
.twol .sp{flex:1;min-width:0;padding:14px 15px;border-radius:12px;background:var(--tint);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.twol .sp b{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.3}
.twol .sp small{font-size:12.8px;color:var(--muted);line-height:1.4}
.twol .ar{align-self:center;flex:0 0 22px;height:2px;background:var(--c);position:relative;opacity:.6}
.twol .ar::after{content:'';position:absolute;right:-1px;top:-4px;border:5px solid transparent;
  border-left-color:var(--c);border-right:0}

/* ── Chuỗi bước ngang (quy trình) ──────────────────────────────────────── */
.pipe{display:flex;flex-direction:column;gap:20px;width:100%;align-self:stretch;
  justify-content:center;min-height:0}
.pipe-lead{display:flex;align-items:baseline;gap:12px;padding-bottom:12px;
  border-bottom:1px solid var(--line)}
.pipe-lead b{font-size:15px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--ink)}
.pipe-lead span{font-size:14px;color:var(--muted)}
.pipe .row{display:flex;align-items:center;gap:0}
.pipe .bx{flex:1 1 0;min-width:0;padding:16px 17px;border-radius:15px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh-1);display:flex;flex-direction:column;
  justify-content:center;gap:8px}
.pipe .bx>b{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.3}
.pipe .bx>small{font-size:13.4px;color:var(--muted);line-height:1.45}
.pipe .bx.warm{background:#fff8ef;border-color:#f5dcb6}
.pipe .bx.cool{background:#f4f0ff;border-color:#ddd3f7}
.pipe .bx.good{background:#eefaf3;border-color:#bfe6d1}
.pipe .subs{display:flex;flex-direction:column;gap:7px;margin-top:3px}
.pipe .subs>div{padding:8px 11px;border-radius:10px;background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;gap:1px}
.pipe .subs b{font-size:13.8px;font-weight:600;color:var(--ink)}
.pipe .subs small{font-size:12.2px;color:var(--muted)}
.pipe .gate{flex:0 0 116px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;padding:0 6px}
.pipe .chip{padding:6px 14px 7px;border-radius:999px;font-size:12.5px;font-weight:700;
  letter-spacing:.5px;color:#fff;background:var(--c);white-space:nowrap;
  box-shadow:0 3px 9px rgba(14,26,43,.14)}
.pipe .gate .ar{width:100%;height:2px;background:var(--line-b);position:relative}
.pipe .gate .ar::after{content:'';position:absolute;right:-1px;top:-4px;border:5px solid transparent;
  border-left-color:var(--line-b);border-right:0}
.pipe .gate small{font-size:12px;color:var(--muted);text-align:center;line-height:1.3}
.pipe-notes{display:flex;flex-direction:column;gap:9px}
.pipe-notes>div{display:flex;gap:11px;padding:12px 15px;border-radius:13px;font-size:13px;
  line-height:1.55}
.pipe-notes .warn{background:#fff8ef;border:1px solid #f5dcb6;color:#7a4f10}
.pipe-notes .tip{background:#f6f2ff;border:1px solid #ddd3f7;color:#4d3a86}
.pipe-notes i{flex:0 0 auto;font-style:normal}

/* ── Công thức phân số ─────────────────────────────────────────────────── */
.cfm{display:grid;grid-template-columns:380px minmax(0,1fr);gap:40px;width:100%;
  align-items:center;align-self:center}
.cfm .lft .cap{font-size:15.5px;font-weight:600;color:var(--muted);letter-spacing:.4px}
.cfm .lft .vl{font-size:42px;font-weight:700;letter-spacing:-1.4px;color:var(--ink);
  line-height:1.22;margin-top:8px;white-space:nowrap}
.cfm .lft .ln{width:82px;height:5px;border-radius:3px;background:var(--orange);margin-top:18px}
.cfm .fx{padding:32px 34px;border-radius:20px;background:var(--acc-t);border:1px solid var(--acc-b);
  display:flex;align-items:center;justify-content:center;gap:18px;box-shadow:var(--sh-1)}
.cfm .eq{font-size:19.5px;font-weight:700;color:var(--acc-d);white-space:nowrap}
.cfm .op{font-size:26px;font-weight:700;color:var(--ink);opacity:.7}
.cfm .frac{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;min-width:0}
.cfm .num,.cfm .den{font-size:21px;font-weight:600;color:var(--ink);text-align:center;line-height:1.4}
.cfm .fbar{width:100%;height:2.5px;border-radius:2px;background:var(--ink);opacity:.8}

/* ── Điều chuyển nội bộ (Pro s11) ──────────────────────────────────────── */
.trf{display:flex;flex-direction:column;gap:18px;width:100%;min-height:0;
  align-items:center;justify-content:center}
.trf .row{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;
  width:100%;min-height:0;position:relative}

.trf .wh{display:flex;flex-direction:column;align-items:center;gap:11px}
.trf .wh img{width:104px;height:104px;object-fit:contain}
.trf .wh span{padding:7px 22px;border-radius:10px;background:var(--acc);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.3px}
.trf .mid{display:flex;align-items:center;justify-content:center;min-height:0;max-height:330px}
.trf .mid img{max-height:330px;width:auto;object-fit:contain}
.trf .bd{padding:9px 22px;border-radius:12px;border:1.5px solid var(--acc-b);background:var(--acc-t);
  color:var(--acc-d);font-size:14.5px;font-weight:700}

/* ── Công thức (Pro s13) ───────────────────────────────────────────────── */
.frm{display:flex;align-items:center;justify-content:center;gap:44px;width:100%;align-self:center}
.frm img{width:190px;height:190px;object-fit:contain}
.frm .bx{display:flex;flex-direction:column;gap:12px}
.frm .bx .cap{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:.4px}
.frm .bx .vl{font-size:44px;font-weight:700;letter-spacing:-1.2px;color:var(--ink);line-height:1.22}
.frm .bx .ln{width:78px;height:5px;border-radius:3px;background:var(--orange)}

/* ── Nhóm + bullet con (Pro s17,18) ────────────────────────────────────── */
.gl{display:grid;grid-template-columns:320px minmax(0,1fr);gap:38px;width:100%;
  align-items:center;align-self:center}
.gl .lft .num{font-size:13px;font-weight:700;letter-spacing:2.6px;color:var(--acc);margin-bottom:11px}
.gl .lft h1{font-size:31px;font-weight:700;line-height:1.26;letter-spacing:-.7px;color:var(--ink);
  padding-bottom:2px}
.gl .lft .ln{width:70px;height:4px;border-radius:3px;background:var(--orange);margin-top:16px}
.gl .gs{display:flex;flex-direction:column;gap:10px}
.gl .g{display:grid;grid-template-columns:214px 1fr;gap:14px;align-items:center;
  padding:12px 15px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.gl .g>b{font-size:14.5px;font-weight:700;color:var(--acc-d);line-height:1.35;
  padding-left:13px;border-left:3px solid var(--acc)}
.gl .g ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.gl .g li{display:flex;gap:9px;font-size:13.2px;line-height:1.5;color:var(--body)}
.gl .g li::before{content:'';flex:0 0 5px;height:5px;border-radius:50%;background:var(--orange);margin-top:7px}

/* ── Nền tảng (Pro s3) ─────────────────────────────────────────────────── */
.plat{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;min-height:0}
.plat .bd{padding:9px 26px;border-radius:999px;background:var(--acc);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.4px;box-shadow:0 4px 14px rgba(245,135,31,.3);flex:0 0 auto}
.plat .row{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;
  align-items:stretch;min-height:0;width:100%;justify-content:center}
.plat .row>div{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;height:100%}
.plat .row .ph{max-width:290px}
/* Khung máy + khung trình duyệt cho ảnh chụp thô */
.plat.fr .row{gap:40px}
.plat.fr .row .ph .box{height:100%;padding:6px;background:#fff;border-radius:26px;display:flex;
  box-shadow:0 18px 40px rgba(9,44,78,.20),0 3px 8px rgba(9,44,78,.10)}
.plat.fr .row .ph .box img{height:100%;width:auto;max-width:none;max-height:none;
  border-radius:21px;object-fit:contain}
.plat.fr .row .wb .box{height:100%;max-width:100%;padding:0;background:#fff;
  border:1px solid var(--line);border-radius:13px;overflow:hidden;
  box-shadow:0 18px 44px rgba(9,44,78,.17),0 3px 8px rgba(9,44,78,.08);
  display:flex;flex-direction:column}
.plat.fr .row .wb .bar3{flex:0 0 26px;display:flex;align-items:center;gap:6px;padding:0 12px;
  background:#f2f6fb;border-bottom:1px solid var(--line)}
.plat.fr .row .wb .bar3 i{width:9px;height:9px;border-radius:50%;background:#d6dfea}
.plat.fr .row .wb .bar3 i:nth-child(1){background:#f2a09a}
.plat.fr .row .wb .bar3 i:nth-child(2){background:#f5cf8e}
.plat.fr .row .wb .bar3 i:nth-child(3){background:#a8dcae}
/* Neo chiều cao (trừ thanh 26px) để ảnh web không bị cắt đáy */
.plat.fr .row .wb .box img{height:calc(100% - 26px);width:auto;max-width:100%;
  object-fit:contain;border-radius:0;box-shadow:none}
.plat .row img{max-height:100%;max-width:100%;width:auto;object-fit:contain;
  border-radius:12px;cursor:zoom-in}
.plat .row .ph img{filter:drop-shadow(0 12px 26px rgba(14,26,43,.18))}
.plat .row .wb img{box-shadow:var(--sh-2)}

/* ── Hai ảnh chụp khác tỉ lệ, đứng cạnh nhau ────────────────────────────
   Chia bề ngang theo đúng tỉ lệ của hai ảnh: ảnh Web ngang 2.47 và ảnh App
   dọc 0.65 thì tỉ lệ chỗ phải là 3.8 trên 1, hai ảnh mới cao bằng nhau. Chia
   đều nhau thì ảnh dọc bị ép thấp hẳn xuống, nhìn như bị cắt. */
.tsh{display:flex;flex-direction:column;gap:20px;width:100%;align-self:stretch;min-height:0}
.tsh .row{flex:1;display:flex;gap:26px;min-height:0;justify-content:center}
.tsh .a{min-width:0;display:flex;align-items:center;justify-content:center}
.tsh .a0{flex:3.8 1 0}
.tsh .a1{flex:1 1 0}
.tsh .a img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:14px;box-shadow:var(--sh-2);cursor:zoom-in}
.tsh .a .brw{max-width:100%;max-height:100%}
.tsh .a .brw img{width:100%;height:auto;max-height:100%;border-radius:0;box-shadow:none;
  object-fit:contain}
.tsh .pts{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tsh .p{display:flex;gap:13px;align-items:flex-start;padding:14px 18px;border-radius:14px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.tsh .p b{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--acc);
  font-variant-numeric:tabular-nums;padding-top:2px}
.tsh .p span{font-size:16px;line-height:1.55;color:var(--body)}

/* ── Slide mở đầu nội dung: chữ trái, ảnh lệch phải trên nền màu ────────── */
.intro{position:absolute;inset:0;display:grid;grid-template-columns:45% 55%;
  background:#fff;overflow:hidden}
.intro .tx{display:flex;flex-direction:column;justify-content:center;
  padding:0 40px 34px 58px;position:relative;z-index:2;min-width:0}
.intro .num{font-size:13px;font-weight:700;letter-spacing:2.6px;color:var(--acc);
  margin-bottom:12px}
.intro h1{font-size:40px;font-weight:700;line-height:1.2;letter-spacing:-1px;
  color:var(--ink);text-transform:uppercase;padding-bottom:3px}
.intro .ln{width:74px;height:4px;border-radius:3px;background:var(--orange);margin-top:16px}
.intro p{font-size:16.5px;line-height:1.72;color:var(--body);margin-top:20px;text-align:justify}
.intro .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.intro .chips span{padding:8px 15px 9px;border-radius:999px;background:var(--acc-t);
  border:1px solid var(--acc-b);color:var(--acc-d);font-size:13.5px;font-weight:600}
.intro .foot{margin-top:22px;padding-left:15px;border-left:3px solid var(--acc-b);
  font-size:14.5px;line-height:1.6;color:var(--muted)}

/* Nền màu chiếm nửa phải, ảnh thò ra ngoài mép cho có chiều sâu */
.intro .art{position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--acc-t) 0%,#fff 120%)}
.intro .art::before{content:'';position:absolute;left:0;top:0;bottom:0;width:120px;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,0));z-index:2}
.intro .art .orb{position:absolute;border-radius:50%;pointer-events:none}
.intro .art .orb.a{width:360px;height:360px;right:-90px;top:-120px;
  background:color-mix(in srgb,var(--acc) 16%,transparent)}
.intro .art .orb.b{width:230px;height:230px;right:150px;bottom:-90px;
  background:color-mix(in srgb,var(--acc) 10%,transparent)}
.intro .art{display:flex;align-items:center}
.intro .art .brw{position:relative;z-index:1;flex:1;min-width:0;
  margin:0 -120px 0 34px;border-radius:14px;
  box-shadow:0 30px 70px rgba(9,44,78,.22),0 6px 16px rgba(9,44,78,.10)}
.intro .art .brw img{width:100%;height:auto;display:block}

/* ── Ba thẻ gói kèm logo + hai thẻ lưu ý (slide gói bản quyền) ──────────── */
.pks{display:flex;flex-direction:column;gap:20px;width:100%;min-height:0;
  align-self:stretch;justify-content:center}
.pks .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pks .pk{--mc:var(--acc);display:flex;align-items:center;gap:16px;padding:20px 20px 18px;
  border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);
  position:relative;overflow:hidden}
.pks .pk::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--mc),color-mix(in srgb,var(--mc) 45%,#fff))}
/* Khung logo cố định để ba logo khác tỉ lệ vẫn thẳng hàng và cùng cỡ mắt nhìn */
.pks .pk .lg{flex:0 0 148px;height:86px;display:flex;align-items:center;justify-content:center}
.pks .pk .lg img{max-width:100%;max-height:100%;width:auto;object-fit:contain}
.pks .pk .tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.pks .pk .tx span{font-size:13.5px;color:var(--muted);line-height:1.3}
.pks .pk .tx b{display:flex;align-items:center;gap:8px;font-size:19.5px;font-weight:700;
  color:var(--ink);letter-spacing:-.3px;line-height:1.25}
.pks .pk .tx b .ar{font-style:normal;font-size:17px;color:var(--mc);flex:0 0 auto}
.pks .dept{gap:14px}
.pks .dept .d{padding:16px 18px}

/* ── Ảnh chụp Web đặt trong khung trình duyệt ──────────────────────────── */
/* Hero: khung dính mép dưới của dải ảnh, nền dịu theo màu bộ cho đỡ trơ */
.hero .pic.fr{background:linear-gradient(165deg,var(--acc-t) 0%,#fff 72%);
  max-height:474px;padding:30px 58px 0;display:flex;align-items:flex-end;justify-content:center}
.hero .pic.fr .brw{width:100%;max-width:1010px;border-radius:14px 14px 0 0;border-bottom:0;
  box-shadow:0 -3px 34px rgba(14,26,43,.16)}
.hero .pic.fr .brw img{width:100%;height:auto;display:block}

/* Slide ảnh Web ngang: bỏ khung trắng cũ, dùng thẳng khung trình duyệt */
.vid .fr.shot.brwrap{background:transparent;border:0;box-shadow:none;padding:0;
  display:flex;align-items:center;justify-content:center}
/* Khung này là flex item nên bề ngang lấy theo ảnh GỐC, không phải theo cột.
   Ảnh gốc rộng hơn cột thì khung co lại theo bề ngang, chiều cao tính ra vượt
   500px và bị .fr cắt mất chân ảnh. Nên phải để ảnh tự co vừa CẢ HAI chiều:
   khung là flex dọc có min-height:0, ảnh height:auto + max-height:100%. */
.vid .fr.shot.brwrap .brw{align-self:center;display:flex;flex-direction:column;
  min-width:0;min-height:0;max-width:100%;max-height:100%}
.vid .fr.shot.brwrap .brw img{flex:0 1 auto;min-height:0;width:auto;height:auto;
  max-width:100%;max-height:100%;object-fit:contain;display:block}
/* Bóng đổ cho cả khung giả lập, không phải cho ảnh bên trong. .fr vốn có
   overflow:hidden nên cắt cụt bóng — phải mở khoá cho bóng tràn ra ngoài, chừa
   đệm thì lại ăn mất chỗ của ảnh. */
.vid .fr.dsh{overflow:visible}
.vid .fr.dsh .brw{box-shadow:0 24px 48px rgba(9,44,78,.26),0 6px 14px rgba(9,44,78,.13)}
/* Mọi khung trình duyệt của webshot đều phải mở overflow, không riêng dsh: .brw đổ
   bóng 60px mà .fr cao hết cột nhưng chỉ rộng bằng ảnh, nên overflow:hidden cắt
   thẳng hai bên — trên dưới ảnh còn một mảng xám chữ nhật (V3 slide 8, 9, 14).
   Không còn cần chặn tràn ở đây: .brw đã max-height:100%, tràn thật thì .vid kéo
   scrollHeight của .s-body lên và check_slides bắt được. */
.vid .fr.shot.brwrap{overflow:visible}
/* mark:'x' | 'check' — dấu tròn đóng lên góc phải trên của khung trình duyệt, cặp
   slide bộ lọc cũ / mới. Dấu thò ra ngoài khung nên phải mở overflow cả .fr lẫn
   .brw; thanh trên và ảnh tự bo góc thay cho .brw. */
.vid .fr.vmark{overflow:visible}
.vid .fr.vmark .brw{position:relative;overflow:visible}
.vid .fr.vmark .brw .bar3{border-radius:13px 13px 0 0}
.vid .fr.vmark .brw img{border-radius:0 0 13px 13px}
.vmk{position:absolute;right:-22px;top:-22px;z-index:4;width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;border:4px solid #fff;
  box-shadow:0 10px 24px rgba(9,44,78,.22),0 2px 6px rgba(9,44,78,.12)}
.vmk svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;
  stroke-linejoin:round}
.vmk.x{background:linear-gradient(160deg,#f0625a,#d63a31)}
.vmk.check{background:linear-gradient(160deg,#22b573,#12906a)}

/* ── Nội dung bổ sung (bật/tắt bằng phím X) ────────────────────────────── */
.xflag{position:relative}
body.showx .xflag{outline:1.5px dashed var(--orange);outline-offset:3px;border-radius:8px}
body.showx .xflag::after{content:'BỔ SUNG';position:absolute;right:-2px;top:-15px;z-index:9;
  font-size:8.5px;font-weight:700;letter-spacing:.8px;color:#fff;background:var(--orange);
  padding:2px 6px;border-radius:4px}
.todo{display:none;position:absolute;left:58px;bottom:44px;z-index:8;max-width:640px;
  padding:8px 13px;border-radius:9px;background:#fff5e8;border:1px solid var(--orange-b);
  color:#8a5209;font-size:12px;font-weight:500;align-items:center;gap:8px}
body.showx .todo{display:flex}
.todo::before{content:'⚑';color:var(--orange-d);font-size:13px}

/* ── Lưới slide (ESC) ──────────────────────────────────────────────────── */
.grid{position:fixed;inset:0;z-index:80;background:rgba(9,15,24,.96);backdrop-filter:blur(10px);
  display:none;flex-direction:column}
.grid.open{display:flex}
.grid .gh{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:20px 26px;border-bottom:1px solid rgba(255,255,255,.09)}
.grid .gh h2{font-size:15px;font-weight:600;color:#fff;letter-spacing:-.2px}
.grid .gh h2 small{color:#8296b0;font-weight:400;margin-left:9px}
.grid .gb{flex:1;overflow-y:auto;padding:22px 26px 34px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px;align-content:start}
.grid .t{cursor:pointer;border-radius:11px;overflow:hidden;border:1.5px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.04);transition:.16s;text-align:left}
.grid .t:hover{border-color:var(--blue);transform:translateY(-2px)}
body[data-deck="pro"] .grid .t:hover{border-color:var(--orange)}
body[data-deck="v3"] .grid .t:hover{border-color:#12988c}
.grid .t.on{border-color:var(--orange);box-shadow:0 0 0 2px rgba(245,135,31,.28)}
.grid .t .pv{aspect-ratio:16/9;position:relative;background:linear-gradient(135deg,#16273d,#1d3450);
  display:grid;place-items:center;overflow:hidden}
.grid .t .pv img{width:100%;height:100%;object-fit:cover;opacity:.85}
.grid .t .pv b{font-size:34px;font-weight:700;color:rgba(255,255,255,.16);letter-spacing:-1px}
.grid .t .cp{padding:9px 11px 11px}
.grid .t .cp i{font-style:normal;font-size:10px;font-weight:700;color:var(--orange);letter-spacing:.7px}
.grid .t .cp span{display:block;font-size:12.5px;color:#dbe6f4;line-height:1.35;margin-top:3px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ── Phóng to ảnh ──────────────────────────────────────────────────────── */
/* Phải dùng flex: grid với hàng auto không cho chiều cao xác định nên
   max-height:100% của ảnh dọc không ăn, ảnh bị phóng tràn khỏi màn hình. */
.lb{position:fixed;inset:0;z-index:90;background:rgba(6,11,18,.94);display:none;
  align-items:center;justify-content:center;padding:44px;cursor:zoom-out}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;
  box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lb .x{position:absolute;right:22px;top:22px;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);color:#fff;
  cursor:pointer;display:grid;place-items:center}
.lb .x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}

/* ── Hộp nhập mã cho bộ nội bộ ─────────────────────────────────────────── */
.pin{position:fixed;inset:0;z-index:96;background:rgba(6,11,18,.9);display:none;place-items:center}
.pin.open{display:grid}
.pin .cd{width:492px;max-width:calc(100vw - 32px);background:#101d2e;
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:26px 30px;color:#d6e2f2}
.pin h3{font-size:15.5px;font-weight:600;color:#fff;line-height:1.5;margin-bottom:16px}
.pin input{width:100%;font:600 17px var(--fs);letter-spacing:3px;text-align:center;
  padding:12px 14px;border-radius:11px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#fff;outline:none}
.pin input:focus{border-color:#17a89a;box-shadow:0 0 0 3px rgba(23,168,154,.22)}
.pin input::placeholder{letter-spacing:.4px;font-weight:500;color:#6f8099}
.pin .err{min-height:18px;margin-top:9px;font-size:12.5px;color:#ff8a80}
.pin .cl{margin-top:12px;display:flex;justify-content:flex-end;gap:10px}
.pin .tbtn.go{background:#12988c;border-color:#12988c;color:#fff}
.pin .tbtn.go:hover{background:#17a89a}

/* Nút chính trong thanh tiêu đề bản in */
.prnt .tbtn.go{background:var(--blue);border-color:var(--blue);color:#fff}
.prnt .tbtn.go:hover{background:var(--blue-d);border-color:var(--blue-d)}

/* ── Trợ giúp phím ─────────────────────────────────────────────────────── */
.help{position:fixed;inset:0;z-index:95;background:rgba(6,11,18,.9);display:none;place-items:center}
.help.open{display:grid}
.help .cd{width:520px;background:#101d2e;border:1px solid rgba(255,255,255,.12);border-radius:16px;
  padding:26px 30px;color:#d6e2f2}
.help h3{font-size:16px;color:#fff;margin-bottom:16px}
.help table{width:100%;border-collapse:collapse;font-size:13.5px}
.help td{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.help td:first-child{width:150px}
.help kbd{display:inline-block;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);font:600 11.5px var(--fs);color:#fff;margin-right:5px}
.help .cl{margin-top:18px;text-align:right}

/* =============================================================================
   KHUNG XEM BẢN GỐC (nút PDF)
   Nội dung là file HTML gốc để nguyên văn, nhét vào srcdoc của iframe. Phải là
   iframe: file gốc có luật cho chính body, h1, .head… mà đặt thẳng vào trang
   thì đè lên toàn bộ giao diện trình chiếu.
   ========================================================================== */
.pdfv{position:fixed;inset:0;z-index:85;background:#eef2f7;display:none;
  flex-direction:column}
.pdfv.open{display:flex}
.pdfv .prh{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:11px 20px;background:#0f1a29;
  border-bottom:1px solid rgba(255,255,255,.1)}
.pdfv .prh h2{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.2px}
.pdfv .prh h2 small{color:#8296b0;font-weight:400;margin-left:9px}
.pdfv .pa{display:flex;align-items:center;gap:9px}
.pdfv iframe{flex:1;width:100%;border:0;background:#eef2f7;display:block}

/* =============================================================================
   BẢN IN CỦA BỘ SLIDE (nút PDF ở ba bộ còn lại)
   Mọi slide xếp dọc trong một khung cuộn, mỗi slide giữ nguyên 1280×720 và
   đúng bằng một trang giấy. Bộ So sánh không dùng khối này — bộ đó có bản gốc
   riêng, mở bằng khung nhúng ở trên.
   ========================================================================== */
.prnt{position:fixed;inset:0;z-index:85;background:#e9edf3;display:none;
  flex-direction:column}
.prnt.open{display:flex}
/* Thanh tiêu đề tên .prh, KHÔNG được là .ph — .ph là khung điện thoại trong
   slide. Từng trùng tên: bản in nhuộm mọi điện thoại thành viền xanh đen, và
   luật @media print giấu thanh tiêu đề giấu luôn cả 22 điện thoại khi xuất PDF. */
.prnt .prh{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:11px 20px;background:#0f1a29;
  border-bottom:1px solid rgba(255,255,255,.1)}
.prnt .prh h2{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.2px}
.prnt .prh h2 small{color:#8296b0;font-weight:400;margin-left:9px}
.prnt .pa{display:flex;align-items:center;gap:9px}
.prnt .pb{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;
  gap:16px;padding:20px 0 40px}

/* Trang giấy: khung 1280×720 nguyên vẹn, chỉ thu nhỏ cho vừa bề ngang cửa sổ.
   Dùng `zoom` chứ không `transform:scale` — transform kéo giãn lớp đã vẽ nên
   ảnh nhoè, đúng cái bẫy đã trả giá ở mục 9 của README. */
.prnt .pg{position:relative;line-height:0;background:#fff;
  box-shadow:0 2px 14px rgba(14,26,43,.16)}
.prnt .pg>.slide{position:relative;width:1280px;height:720px;overflow:hidden;
  zoom:var(--ps,1)}
/* Bản in không chia bước: phần nào cũng phải hiện sẵn */
.prnt .pg>.slide [data-rv]{opacity:1 !important;transform:none !important}
.prnt .pg>.slide.in,.prnt .pg>.slide.in *{animation:none !important}

/* Nút PDF: bộ nào cũng có, kể cả trên điện thoại — từng giấu ở màn hẹp, nay là
   lối lấy file PDF ở đó (Trum 14/09/2026). Biểu tượng tải xuống .pdfic-m và dòng
   hướng dẫn .prtip chỉ hiện trong khối MÀN HÌNH HẸP. */
.pdfic-m,.prtip{display:none}

/* Báo đang tải PDF làm sẵn — nổi trên mọi khung, tự tắt sau vài giây */
.pdf-toast{position:fixed;left:50%;bottom:22px;z-index:97;width:max-content;
  max-width:calc(100vw - 32px);padding:10px 16px;border-radius:12px;background:#15243a;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 32px rgba(0,0,0,.4);
  color:#dbe6f4;font-size:13px;line-height:1.5;text-align:center;pointer-events:none;
  opacity:0;visibility:hidden;transform:translate(-50%,12px);
  transition:opacity .2s,transform .2s,visibility 0s .2s}
.pdf-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity .2s,transform .2s}
.pdf-toast b{color:#fff;font-weight:600;word-break:break-all}
.pdf-toast.warn{background:#3a2708;border-color:#7a5418;color:#ffe2b5}

/* =============================================================================
   IN RA GIẤY
   Chỉ in khi đang mở một trong hai khung xem — bấm Ctrl+P lúc đang trình chiếu
   thì để trình duyệt in như cũ, không thì ra giấy trắng.
   ========================================================================== */
@media print{
  /* Trang giấy đúng bằng khung slide: mỗi slide rơi gọn một trang, không thừa
     trang trắng, không phải canh lề bằng mắt. */
  @page{size:1280px 720px;margin:0}

  body.prnt-on{overflow:visible !important;height:auto !important;background:#fff}
  body.prnt-on .app,body.prnt-on .grid,body.prnt-on .lb,
  body.prnt-on .pin,body.prnt-on .help,body.prnt-on .pdfv,
  body.prnt-on .pdf-toast{display:none !important}
  body.prnt-on .prnt.open{position:static;display:block;background:#fff}
  body.prnt-on .prnt .prh,body.prnt-on .prtip{display:none !important}
  body.prnt-on .prnt .pb{display:block;padding:0 !important;gap:0 !important;
    overflow:visible !important}
  body.prnt-on .prnt .pg{box-shadow:none !important;break-inside:avoid;
    break-after:page}
  body.prnt-on .prnt .pg:last-child{break-after:auto}
  body.prnt-on .prnt .pg>.slide{zoom:1 !important}
}

/* =============================================================================
   BỘ SO SÁNH TÍNH NĂNG  ·  Standard xám · Plus xanh · Pro vàng
   Ba màu này cố định, KHÔNG lấy theo --acc của bộ đang xem: bảng nói về cả ba
   gói cùng lúc nên màu phải là màu của gói, không phải màu của deck.
   ========================================================================== */
:root{
  --st:#5b6675;  --st-t:#f3f5f8;  --st-b:#dfe4ec;
  --pl:#0560a6;  --pl-t:#edf5fd;  --pl-b:#cfe2f6;
  --pr:#a97f27;  --pr-t:#fff8ec;  --pr-b:#f0dcb4;
}

/* -- Bia: chu trai, ba the goi ben phai --------------------------------- */
.cvm{position:absolute;inset:0;display:grid;grid-template-columns:56% 44%;
  align-items:center;gap:38px;padding:0 66px;overflow:hidden;
  background:linear-gradient(145deg,#f7f9fc 0%,#eef2f8 55%,#e7edf6 100%)}
.cvm .orb{position:absolute;border-radius:50%;pointer-events:none}
.cvm .orb.a{width:560px;height:560px;right:-190px;top:-230px;
  background:radial-gradient(circle,rgba(63,85,115,.14),transparent 68%)}
.cvm .orb.b{width:360px;height:360px;left:-140px;bottom:-160px;
  background:radial-gradient(circle,rgba(5,96,166,.12),transparent 68%)}
.cvm .lg{position:absolute;left:66px;top:46px;height:32px;width:auto}
.cvm .tx{position:relative;z-index:1;padding-top:24px}
.cvm .k{font-size:12.5px;font-weight:700;letter-spacing:3px;color:#3f5573}
.cvm h1{margin-top:15px;font-size:46px;font-weight:700;line-height:1.12;
  letter-spacing:-1.4px;color:var(--ink)}
.cvm .rule{width:84px;height:5px;border-radius:3px;background:var(--orange);margin-top:20px}
.cvm p{margin-top:18px;font-size:17.5px;line-height:1.6;color:var(--body)}

/* Ba the xep doc ben phai: vua lap cho trong, vua la muc luc nhanh cua ca bo */
.cvm .col{position:relative;z-index:1;display:flex;flex-direction:column;gap:13px}
.cvm .col .p{display:grid;grid-template-columns:104px auto;grid-template-rows:auto auto;
  column-gap:16px;row-gap:5px;align-items:center;background:#fff;
  border:1px solid var(--line);border-left:4px solid var(--st);border-radius:14px;
  padding:15px 18px 16px;box-shadow:var(--sh-1)}
.cvm .col .p.pl{border-left-color:var(--pl)}
.cvm .col .p.pr{border-left-color:var(--pr)}
.cvm .col .p img{grid-row:1;height:23px;width:104px;object-fit:contain;object-position:left}
.cvm .col .n{grid-row:1;display:flex;align-items:baseline;gap:6px}
.cvm .col .n b{font-size:27px;font-weight:700;color:var(--ink);letter-spacing:-.8px;
  line-height:1}
.cvm .col .n span{font-size:12.5px;color:var(--muted)}
.cvm .col .p p{grid-column:1/3;grid-row:2;margin:0;font-size:14px;line-height:1.5;
  color:var(--body)}

/* -- Trang mo: ba goi danh cho ai --------------------------------------- */
.mxs{display:flex;flex-direction:column;justify-content:center;width:100%;
  align-self:stretch;gap:18px}
/* Thẻ chỉ cao bằng nội dung rồi cả khối căn giữa: kéo thẻ cao hết khung thì
   ruột thẻ hở một mảng trắng giữa đoạn mô tả và danh sách. */
.mxs .row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mxs .c{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px 22px 20px;box-shadow:var(--sh-1);display:flex;flex-direction:column;
  gap:14px;border-top:4px solid var(--st)}
.mxs .c.pl{border-top-color:var(--pl)}
.mxs .c.pr{border-top-color:var(--pr)}
/* Logo và thẻ tên gói một hàng, con số một hàng: nhét cả ba vào một hàng thì
   chữ "/ 99 tính năng" bị ép xuống dòng, nhìn như lỗi. */
.mxs .tp{display:flex;flex-direction:column;gap:11px}
.mxs .lg{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mxs .tp img{height:30px;width:auto;object-fit:contain}
.mxs .bdg{padding:4px 12px 5px;border-radius:999px;color:#fff;font-size:11.5px;
  font-weight:700;letter-spacing:1.1px;line-height:1;background:var(--st);white-space:nowrap}
.mxs .c.pl .bdg{background:var(--pl)}
.mxs .c.pr .bdg{background:linear-gradient(180deg,#9c7220,#ac8129 46%,#cdb46e)}
.mxs .n{display:flex;align-items:baseline;gap:5px}
.mxs .n b{font-size:31px;font-weight:700;color:var(--ink);letter-spacing:-1px;line-height:1}
.mxs .n span{font-size:13px;color:var(--muted)}
.mxs .tag{padding:6px 12px 7px;border-radius:9px;background:var(--st-t);
  border:1px solid var(--st-b);color:#3f4a5a;font-size:13px;font-weight:600;
  line-height:1.4;text-align:center}
.mxs .c.pl .tag{background:var(--pl-t);border-color:var(--pl-b);color:#0a4d80}
.mxs .c.pr .tag{background:var(--pr-t);border-color:var(--pr-b);color:#7d5c14}
.mxs .c p{font-size:17.5px;line-height:1.55;color:var(--body)}
.mxs .c ul{list-style:none;display:flex;flex-direction:column;gap:9px;
  padding-top:14px;border-top:1px solid var(--line)}
.mxs .c li{position:relative;padding-left:19px;font-size:15.5px;line-height:1.5;
  color:var(--body)}
.mxs .c li::before{content:'';position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--st)}
.mxs .c.pl li::before{background:var(--pl)}
.mxs .c.pr li::before{background:var(--pr)}
/* Thanh do phu: dai ngan theo so tinh nang cua goi.
   KHONG dat ten .bar — thanh cong cu tren dau trang da chiem ten do roi. */
.mxs .cov{height:7px;padding:0;border-radius:4px;background:#eef1f6;overflow:hidden}
.mxs .cov i{display:block;height:100%;border-radius:4px;background:var(--st)}
.mxs .c.pl .cov i{background:var(--pl)}
.mxs .c.pr .cov i{background:linear-gradient(90deg,#9c7220,#cdb46e)}
/* Slide nào có dải chú dẫn dưới chân thì ba thẻ phải nhường lại chỗ cho nó.
   Ba thẻ dựng thoải mái cộng dải chú dẫn là cao hơn khung 500px, mà `.mxs` để
   overflow:visible nên phần thừa tràn ra rồi bị `.s-body` cắt — auto-fit đo
   `.s-body` thì thấy vừa khít, không có gì để thu, dải cứ thế mất một nửa. */
.mxs.dense{gap:11px}
.mxs.dense .c{padding:14px 20px 11px;gap:10px}
.mxs.dense .tp{gap:7px}
.mxs.dense .c ul{padding-top:9px;gap:6px}
.mxs.dense .c p{font-size:16.5px;line-height:1.45}
.mxs.dense .c li{font-size:15px;line-height:1.45}
.mxs.dense .lgd{padding:10px 18px}

.mxs .lgd{display:flex;flex-wrap:wrap;gap:10px 24px;padding:14px 20px;
  background:#f7f9fc;border:1px solid var(--line);border-radius:13px}
.mxs .lgd span{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--body)}
.mxs .lgd i{width:14px;height:14px;border-radius:4px;background:var(--st-t);
  border:1px solid var(--st-b);flex:0 0 auto}
.mxs .lgd .pl i{background:var(--pl-t);border-color:var(--pl-b)}
.mxs .lgd .pr i{background:var(--pr-t);border-color:var(--pr-b)}
.mxs .lgd .no i{background:#fff;border-color:var(--line)}

/* -- Bang tinh nang ----------------------------------------------------- */
.mx{display:flex;flex-direction:column;width:100%;align-self:stretch;min-height:0;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:var(--sh-1)}
.mx .hd,.mx .rw{display:grid;grid-template-columns:74px minmax(0,1fr) 132px 132px 132px}
.mx .hd{background:#f5f7fa;border-bottom:1px solid var(--line)}
.mx .hd>div{padding:11px 16px;display:flex;align-items:center;font-size:12px;
  font-weight:700;letter-spacing:1.2px;color:var(--muted)}
.mx .hd .c{justify-content:center;padding:9px 10px}
.mx .hd .c0{background:var(--st-t)}
.mx .hd .c1{background:var(--pl-t)}
.mx .hd .c2{background:var(--pr-t)}
.mx .hd .bdg{padding:6px 15px 7px;border-radius:999px;color:#fff;font-size:11.5px;
  letter-spacing:1.1px;background:var(--st)}
.mx .hd .c1 .bdg{background:var(--pl)}
.mx .hd .c2 .bdg{background:linear-gradient(180deg,#9c7220,#ac8129 46%,#cdb46e)}

/* Than bang chia deu cho trong: bang ngan thi dong gian ra cho do tro, bang
   dai thi co lai toi muc toi thieu roi moi nho auto-fit. */
.mx .bd{flex:1;display:flex;flex-direction:column;min-height:0}
/* flex-basis:auto — dòng có thêm dòng mô tả phải tự cao lên. Để 'flex:1 1 0'
   thì mọi dòng chia đều nhau và dòng mô tả bị kẹp, chữ chồng lên dòng dưới. */
.mx .rw{flex:1 1 auto;min-height:33px;border-bottom:1px solid var(--line)}
.mx .rw:last-child{border-bottom:0}
/* Đệm dọc 5px chứ không phải 6: ô đánh dấu cao 23px, cộng đệm hai đầu là chiều
   cao tối thiểu thật của một dòng. Để 6px thì ba slide bảng dài nhất vượt khung
   vài pixel và dòng cuối bị cắt mất viền. Dòng vẫn giãn đầy khung như cũ. */
.mx .rw>div{padding:5px 16px;display:flex;align-items:center;min-width:0}
.mx .no{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mx .ft{flex-direction:column;align-items:flex-start !important;justify-content:center;gap:2px}
.mx .ft b{font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.3}
.mx .ft i{font-style:normal;font-size:12.5px;line-height:1.4;color:var(--muted)}
.mx .rw .c{justify-content:center}
.mx .rw .c0{background:var(--st-t)}
.mx .rw .c1{background:var(--pl-t)}
.mx .rw .c2{background:var(--pr-t)}

/* Dong ten phan he, keo ngang het bang */
.mx .gr{padding:5px 16px;background:linear-gradient(90deg,#eaeff7,#f7f9fc);
  border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;
  letter-spacing:1.4px;color:#3f5573;text-transform:uppercase;
  display:flex;align-items:center}

.mx .mk{width:23px;height:23px;border-radius:50%;display:grid;place-items:center}
.mx .mk svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round}
.mx .c0 .mk.y{background:var(--st);box-shadow:0 2px 6px rgba(91,102,117,.30)}
.mx .c1 .mk.y{background:var(--pl);box-shadow:0 2px 6px rgba(5,96,166,.28)}
.mx .c2 .mk.y{background:linear-gradient(180deg,#9c7220,#c4a24d);
  box-shadow:0 2px 6px rgba(169,127,39,.28)}
.mx .mk.n{width:14px;height:2px;border-radius:2px;background:#c3ccda;box-shadow:none}

.mxnt{margin-top:13px;padding:11px 17px;border-left:3px solid var(--acc-b);
  background:var(--acc-t);border-radius:0 10px 10px 0;font-size:15px;line-height:1.55;
  color:var(--body)}

/* Bang chay xuong theo dong, moi dong lech mot nhip rat ngan - bang dai ma bat
   ra ca mang thi mat khong biet bat dau tu dau. */
.slide.in .mx .hd{animation:rvup var(--d-fast) var(--t-sub) var(--ease) both}
.slide.in .mx .rw,.slide.in .mx .gr{
  animation:rvup var(--d-fast) calc(var(--t-body) + var(--i,0)*34ms) var(--ease) both}
.slide.in .mxnt{animation:rvup var(--d-base) 900ms var(--ease) both}

/* ── featlist — bảng tính năng một sản phẩm ────────────────────────── */
.flist{display:flex;flex-direction:column;width:100%;align-self:stretch;min-height:0;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:var(--sh-1)}
.flist .hd,.flist .rw{display:grid;grid-template-columns:84px minmax(0,1fr)}
.flist .hd{background:#f5f7fa;border-bottom:1px solid var(--line)}
.flist .hd>div{padding:11px 16px;display:flex;align-items:center;font-size:12px;
  font-weight:700;letter-spacing:1.2px;color:var(--muted)}
.flist .bd{flex:1;display:flex;flex-direction:column;min-height:0}
.flist .rw{flex:1 1 auto;min-height:33px;border-bottom:1px solid var(--line)}
.flist .rw:last-child{border-bottom:0}
.flist .rw>div{padding:5px 16px;display:flex;align-items:center;min-width:0}
.flist .no{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.flist .ft{flex-direction:column;align-items:flex-start !important;justify-content:center;gap:2px}
.flist .ft b{font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.3}
.flist .ft i{font-style:normal;font-size:12.5px;line-height:1.4;color:var(--muted)}
.flist .gr{padding:5px 16px;background:linear-gradient(90deg,#eaeff7,#f7f9fc);
  border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;
  letter-spacing:1.4px;color:#3f5573;text-transform:uppercase;
  display:flex;align-items:center}
.flistnt{margin-top:13px;padding:11px 17px;border-left:3px solid var(--acc-b);
  background:var(--acc-t);border-radius:0 10px 10px 0;font-size:15px;line-height:1.55;
  color:var(--body)}
.slide.in .flist .hd{animation:rvup var(--d-fast) var(--t-sub) var(--ease) both}
.slide.in .flist .rw,.slide.in .flist .gr{
  animation:rvup var(--d-fast) calc(var(--t-body) + var(--i,0)*34ms) var(--ease) both}
.slide.in .flistnt{animation:rvup var(--d-base) 900ms var(--ease) both}

/* ── logowall — lưới 18 logo khách hàng (trang 4) ──────────────────── */
.lgwall{display:flex;flex-direction:column;width:100%;align-self:stretch;min-height:0;justify-content:center}
.lgwall-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;width:100%}
.lgwall-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1);
  height:96px;transition:transform var(--d-fast) var(--ease)}
.lgwall-item img{max-width:100%;max-height:100%;object-fit:contain}
.slide.in .lgwall-item{animation:rvup var(--d-fast) calc(var(--t-body) + var(--i,0)*30ms) var(--ease) both}

/* ── overlap — hai cửa sổ phần mềm xếp chồng lệch nhau + ảnh phụ góc dưới ── */
.ovlp{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;width:100%;min-height:0}
.ovlp-stage{position:relative;min-height:0}
.ovlp-stage>div{position:absolute;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:6px;box-shadow:var(--sh-2)}
.ovlp-stage img{display:block;width:100%;height:auto;border-radius:8px;cursor:zoom-in}
.ovlp-a{left:0;top:0;width:76%;z-index:1}
.ovlp-b{right:0;bottom:0;width:74%;z-index:3}
.ovlp-c{left:0;bottom:0;width:31%;z-index:2}
.ovlp-c img{cursor:default}
.ovlp .side{display:flex;flex-direction:column;gap:14px;justify-content:center;min-height:0}

/* ── orgchart — sơ đồ tổ chức kế toán dựng bằng HTML ─────────────────────
   Đường nối: mỗi <li> vẽ nửa gạch ngang hai bên (::before trái, ::after phải)
   kèm gạch dọc xuống nút; <ul> con vẽ gạch dọc từ nút cha xuống thanh ngang. */
.orgc{--orgc-ln:#b7c6db;--orgc-g:30px;display:grid;grid-template-columns:minmax(0,1fr) 330px;
  gap:30px;width:100%;min-height:0;align-items:center}
.orgc-tr{display:flex;justify-content:center;align-items:center;min-width:0}
.orgc-tr ul{display:flex;justify-content:center;position:relative;margin:0;padding:var(--orgc-g) 0 0;
  list-style:none}
.orgc-tr>ul{padding-top:0}
.orgc-tr li{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:var(--orgc-g) 6px 0;list-style:none}
.orgc-tr>ul>li{padding-top:0}
.orgc-tr li::before,.orgc-tr li::after{content:'';position:absolute;top:0;right:50%;width:50%;
  height:var(--orgc-g);border-top:2px solid var(--orgc-ln)}
.orgc-tr li::after{right:auto;left:50%;border-left:2px solid var(--orgc-ln)}
.orgc-tr li:first-child::before,.orgc-tr li:last-child::after{border:0 none}
.orgc-tr li:last-child::before{border-right:2px solid var(--orgc-ln);border-radius:0 10px 0 0}
.orgc-tr li:first-child::after{border-radius:10px 0 0 0}
/* con một mình: chỉ còn gạch dọc */
.orgc-tr li:only-child::before{display:none}
.orgc-tr li:only-child::after{border:0 none;border-left:2px solid var(--orgc-ln);border-radius:0}
.orgc-tr>ul>li::before,.orgc-tr>ul>li::after{display:none}
.orgc-tr ul ul::before{content:'';position:absolute;top:0;left:50%;width:0;height:var(--orgc-g);
  border-left:2px solid var(--orgc-ln)}
.orgc-nd{--kc:#1b6fe0;position:relative;z-index:1;display:flex;align-items:center;gap:10px;
  padding:11px 18px 11px 11px;border-radius:14px;background:#fff;
  border:1.5px solid color-mix(in srgb,var(--kc) 30%,#fff);box-shadow:var(--sh-1)}
.orgc-nd i{flex:0 0 36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,color-mix(in srgb,var(--kc) 80%,#000),var(--kc))}
.orgc-nd i svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.orgc-nd span{font-size:17px;font-weight:700;line-height:1.28;color:var(--ink);white-space:nowrap}
.orgc-nd[data-k="co"]{--kc:#0b3f8f;border-color:transparent;padding:13px 24px 13px 13px;
  background:linear-gradient(140deg,#0b2c6b,#1b6fe0);box-shadow:0 8px 22px rgba(11,63,143,.28)}
.orgc-nd[data-k="co"] i{background:rgba(255,255,255,.18)}
.orgc-nd[data-k="co"] span{color:#fff;font-size:19px}
.orgc-nd[data-k="hq"]{--kc:#3f5573}
.orgc-nd[data-k="pos"]{--kc:#1b6fe0}
.orgc-nd[data-k="biz"]{--kc:#12988c}
.orgc-nd[data-k="kho"],.orgc-nd[data-k="bep"]{--kc:#f5871f}
.orgc .side{display:flex;flex-direction:column;gap:14px;justify-content:center;min-height:0}
.orgc.wide{grid-template-columns:minmax(0,1fr);align-content:center;gap:30px}
.slide.in .orgc-nd{animation:rvup var(--d-fast) var(--t-body) var(--ease) both}

/* =============================================================================
   CHUYỂN ĐỘNG KHI TRÌNH CHIẾU

   Một thang nhịp duy nhất cho cả ba bộ. Thứ tự vào bám đúng thứ tự mắt đọc:
   nền → dòng dẫn → tiêu đề → gạch cam → dòng phụ → nội dung → ảnh.
   Ảnh vào SAU CÙNG: nó nặng mắt nhất, vào trước là kéo mắt khỏi tiêu đề.
   Tổng một slide khoảng 1.1 giây — đủ chậm để theo kịp khi đang nói, chưa tới
   mức phải chờ. Sửa nhịp thì sửa ở bảng biến này, đừng rải số vào từng chỗ.
   ========================================================================== */
:root{
  --t-kick:  70ms;   /* dòng dẫn  */
  --t-title:160ms;   /* tiêu đề   */
  --t-rule: 280ms;   /* gạch cam  */
  --t-sub:  320ms;   /* dòng phụ  */
  --t-body: 400ms;   /* nội dung  */
  --t-art:  460ms;   /* ảnh, khung, minh hoạ */
  --d-fast: 460ms;
  --d-base: 560ms;
  --d-slow: 680ms;
  /* Ease-out đầy đặn: bung nhanh ở đầu rồi hãm êm, không nảy ngược */
  --ease:      cubic-bezier(.22,.72,.24,1);
  --ease-soft: cubic-bezier(.26,.62,.28,1);
  --ease-line: cubic-bezier(.45,.05,.2,1);
}

/* ── Cả slide vào ──────────────────────────────────────────────────────── */
/* Trượt theo đúng hướng đang đi, kèm một nhịp nở rất nhẹ cho có chiều sâu */
@keyframes sl{
  from{opacity:0;transform:translateX(var(--dx,24px)) scale(.994)}
  to  {opacity:1;transform:none}
}
/* ── Nhịp vào riêng cho từng loại slide ────────────────────────────────────
   Một hiệu ứng cho cả 94 slide thì bìa, bảng và ảnh chụp màn đều vào y hệt
   nhau. Chia theo VAI TRÒ của slide chứ không chia theo bộ. Loại nào không có
   tên dưới đây thì giữ nhịp trượt ngang mặc định ở trên.
   Đã đo: mọi loại dừng hẳn trong khoảng 840–1460ms, còn dư trần ANIM_END=1600. */

/* Bìa và chuyển mục: đang đổi chương thì không có gì để trượt tiếp, nở nhẹ ra
   từ giữa cho ra chất mở đầu. */
@keyframes slno{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.slide.in.t-cover,.slide.in.t-section,.slide.in.t-qa,.slide.in.t-thanks,
.slide.in.t-hero,.slide.in.t-heroshots{
  animation:slno var(--d-slow) var(--ease-soft) both}

/* Ảnh chụp màn: trượt ngang làm cả tấm ảnh rung, chỉ cho trôi lên là đủ */
@keyframes sllen{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.slide.in.t-device,.slide.in.t-webshot,.slide.in.t-video,.slide.in.t-imagefull,
.slide.in.t-trio,.slide.in.t-twoshot,.slide.in.t-webgrid,.slide.in.t-platform,
.slide.in.t-overlap{
  animation:sllen var(--d-base) var(--ease-soft) both}

/* Bảng so sánh: từng dòng đã chạy nối nhau rồi, cả bảng mà trượt nữa thì rối */
@keyframes slmo{from{opacity:0}to{opacity:1}}
.slide.in.t-matrix, .slide.in.t-featlist{animation:slmo var(--d-fast) var(--ease) both}

/* Sơ đồ quy trình: nở từ giữa để các nhánh toả ra sau đó đọc được thành mạch */
.slide.in.t-orderflow,.slide.in.t-production,.slide.in.t-twolane,
.slide.in.t-pipeline,.slide.in.t-costformula,.slide.in.t-orgchart{
  animation:slno var(--d-base) var(--ease-soft) both}

/* Nền trang trí đi chậm hơn tiền cảnh — mắt đọc chữ trước, nền lùi ra sau */
@keyframes rvbg{from{opacity:0;transform:scale(.9)}to{opacity:.85;transform:none}}
.slide.in::before{animation:rvbg 1s .1s var(--ease-soft) both}

/* ── Khung chữ đầu slide ───────────────────────────────────────────────── */
@keyframes rvup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.slide.in .kicker {animation:rvup var(--d-fast) var(--t-kick)  var(--ease) both}
.slide.in .s-title{animation:rvup var(--d-base) var(--t-title) var(--ease) both}
.slide.in .s-sub  {animation:rvup var(--d-base) var(--t-sub)   var(--ease) both}

/* Gạch cam vẽ ra từ trái, đi sau tiêu đề như một nét gạch chân thật */
@keyframes rvrule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.slide.in .rule,.slide.in .ln:not(svg){transform-origin:left center;
  animation:rvrule var(--d-base) var(--t-rule) var(--ease-line) both}

/* ── Ảnh, khung máy, khung trình duyệt ─────────────────────────────────── */
/* Trôi lên và nở rất nhẹ. Không nảy ngược: ảnh chụp màn mà nảy thì rẻ tiền. */
@keyframes rvpop{from{opacity:0;transform:translateY(16px) scale(.985)}
                 to  {opacity:1;transform:none}}
.slide.in .pf,.slide.in .dev .shots>img,.slide.in .val .shots>img,
.slide.in .brw,.slide.in .plat .box,.slide.in .vid .fr,
.slide.in .imgfull img,.slide.in .oflow .pic img,.slide.in .prod .c .im img,
.slide.in .profwrap .art img,.slide.in .bl.hasart .art img{
  animation:rvpop var(--d-slow) var(--t-art) var(--ease-soft) both}

/* ── Chữ cỡ lớn trên slide không chia bước ─────────────────────────────── */
@keyframes rvnum{from{opacity:0;transform:translateY(20px) scale(.94)}
                 to  {opacity:1;transform:none}}
.slide.in .sect .r b,.slide.in .cfm .vl,.slide.in .qa h1,.slide.in .thx h1{
  animation:rvnum var(--d-slow) var(--t-body) var(--ease) both}

/* ── Slide mở đầu phần: chữ theo nhịp, ảnh trôi vào từ mép phải ─────────── */
@keyframes rvside{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
.slide.in .intro h1  {animation:rvup var(--d-base) var(--t-title) var(--ease) both}
.slide.in .intro .num{animation:rvup var(--d-fast) var(--t-kick)  var(--ease) both}
.slide.in .intro p   {animation:rvup var(--d-base) var(--t-sub)   var(--ease) both}
.slide.in .intro .foot{animation:rvup var(--d-base) 620ms var(--ease) both}
.slide.in .intro .art .brw{animation:rvside var(--d-slow) var(--t-art) var(--ease-soft) both}
/* Chip điểm nhấn nối nhau, mỗi cái lệch một nhịp ngắn */
.slide.in .intro .chips span{animation:rvup var(--d-fast) var(--ease) both}
.slide.in .intro .chips span:nth-child(1){animation-delay:420ms}
.slide.in .intro .chips span:nth-child(2){animation-delay:490ms}
.slide.in .intro .chips span:nth-child(3){animation-delay:560ms}
.slide.in .intro .chips span:nth-child(4){animation-delay:630ms}

/* ── Các phần hiện dần theo phím Space ─────────────────────────────────── */
/* Ẩn bằng độ mờ, KHÔNG dùng display:none — auto-fit phải đo được chiều cao
   thật của cả slide ngay từ đầu, không thì slide dài sẽ tràn lúc hiện nốt.
   opacity cần !important vì vài selector sẵn có đặc hiệu cao hơn, ví dụ
   .val .rail .r vốn đặt opacity:.5 cho mục chưa tới lượt. */
.slide [data-rv]{transition:opacity var(--d-base) var(--ease),
                            transform var(--d-base) var(--ease)}
.slide [data-rv]:not(.rvon){opacity:0 !important;transform:translateY(13px)}
/* Lúc auto-fit đo chiều cao thì ghim mọi phần về đúng chỗ, xem chú thích ở
   fitOnce trong app.js. Chỉ tồn tại trong đúng một nhịp đo. */
.slide.measuring [data-rv]{transform:none !important;transition:none !important}

/* Số phần còn lại của slide, nằm cạnh số slide trên thanh công cụ */
.bar .cnt u{text-decoration:none;margin-left:9px;padding:1.5px 7px 2.5px;border-radius:5px;
  background:var(--orange);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.3px}

/* ── Máy người xem bật giảm chuyển động thì tắt hết, chỉ giữ mờ dần ─────── */
@media (prefers-reduced-motion: reduce){
  .slide.in,.slide.in *,.slide.in::before{animation:none !important}
  /* Độ trễ do JS đặt thẳng vào thẻ, phải !important mới đè được — không thì
     tắt chuyển động rồi mà nội dung vẫn hiện nhỏ giọt sau gần nửa giây. */
  .slide [data-rv]{transition:opacity .14s linear;transition-delay:0s !important}
  .slide [data-rv]:not(.rvon){transform:none}
}

/* =============================================================================
   MÀN HÌNH HẸP — ĐIỆN THOẠI
   Xem như trình đọc PDF: mỗi slide là một trang giữ nguyên khung 1280×720, thu
   nhỏ vừa bề ngang màn, xếp dọc và cuộn liên tục hết bộ. Không đổi bố cục, không
   hiệu ứng, không chia bước — muốn đọc kỹ thì phóng bằng hai ngón.
   Đây là chỗ DUY NHẤT trong file được phép sinh thanh cuộn.
   ========================================================================== */
@media (max-width: 899px){

  /* Khung ứng dụng: mở khoá cuộn dọc */
  html,body{overflow:visible;height:auto}
  .app{position:static;display:block;min-height:100%}

  /* Dinh o dau trang, phia sau la trang giay trang cuon qua — nen phai dac */
  .bar{position:sticky;top:0;z-index:60;height:44px;gap:9px;padding:0 11px;
    background:#0f1a29;border-bottom:1px solid rgba(255,255,255,.1)}
  /* Bốn nút chọn bộ không đủ chỗ trên màn hẹp — đã bóp nhãn, bóp đệm mà nút V3
     vẫn bị cắt mất ở khổ iPhone. Nên thay hẳn bằng menu thả .dsw. Bỏ luôn lưới,
     toàn màn hình và bảng phím: điện thoại không bàn phím, không trình chiếu.
     Còn lại: menu chọn bộ · số trang · nút PDF (Trum 14/09/2026).
     Thiếu min-width:0 thì thanh cứ nở ra và cả trang tràn ngang vài pixel —
     trang giấy hết vừa bề ngang màn. */
  .seg,#gridBtn,#fsBtn,#helpBtn{display:none}
  .bar .brand span,.tbtn span{display:none}
  .bar .brand img{height:17px}
  /* Số trang không được co: tên bộ V3 dài từng đẩy "01 / 26" gãy làm hai dòng.
     Để menu chọn bộ co lại và cắt tên bằng dấu … thay. */
  .bar .cnt{font-size:12.5px;white-space:nowrap;flex:0 0 auto}
  .bar{min-width:0}
  .dsw{display:block;flex:0 1 auto}

  /* Nút PDF: tờ giấy có mũi tên tải xuống, giữ chữ "PDF" cho khỏi đoán */
  #pdfBtn{height:32px;padding:0 10px 0 8px;gap:5px;color:#fff;
    background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
  #pdfBtn svg{display:none}
  #pdfBtn .pdfic-m{display:block;width:17px;height:17px;stroke:#ff8d7e}
  #pdfBtn span{display:inline;font-size:12px;font-weight:700;letter-spacing:.4px}

  .stagewrap{display:block;overflow:visible;min-height:0}
  .arrow{display:none}                    /* cuộn thay cho lật, nút chiếm chỗ */
  .prog{position:sticky;bottom:0;z-index:60;background:#0f1a29}

  /* Sân khấu thành xấp trang xếp dọc */
  .stage{position:static;width:100%;height:auto;transform:none;overflow:visible;
    background:transparent;box-shadow:none;border-radius:0;
    display:flex;flex-direction:column;gap:9px;padding:9px 0}

  /* Mỗi trang giữ đúng tỉ lệ 16:9 của slide gốc */
  .page{position:relative;width:100%;overflow:hidden;line-height:0;
    background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.34);scroll-margin-top:52px}

  /* Nội dung vẫn là khung 1280×720, chỉ thu nhỏ lại — bố cục y hệt bản máy tính.
     Dùng `zoom` chứ không `transform:scale`: transform kéo giãn lớp đã vẽ nên
     ảnh nhoè, nặng nhất trên Safari iOS. */
  .page>.slide{position:relative;width:1280px;height:720px;zoom:var(--ms,1)}

  /* Không hiệu ứng: xem tài liệu chứ không trình chiếu */
  .page>.slide,.page>.slide *{animation:none !important;transition:none !important}
  .page>.slide [data-rv]{opacity:1 !important;transform:none !important}

  /* Lưới slide, phóng ảnh, bảng phím */
  .grid .gb{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));padding:16px 14px 28px}
  .lb{padding:18px}
  .help .cd{width:calc(100vw - 32px);padding:20px 18px}

  /* Hai khung xem PDF: thanh tiêu đề gọn, số trang xuống dòng; Xuất PDF giữ chữ,
     Đóng chỉ còn dấu ×. Dòng hướng dẫn .prtip chỉ hiện ở đây. */
  .prnt .prh,.pdfv .prh{padding:8px 10px 8px 14px;gap:10px}
  .prnt .prh h2,.pdfv .prh h2{min-width:0;font-size:14px;line-height:1.3}
  .prnt .prh h2 small,.pdfv .prh h2 small{display:block;margin:1px 0 0;font-size:11.5px}
  .prnt .pa,.pdfv .pa{flex:0 0 auto;gap:7px}
  #prntSave,#prntClose,#pdfClose{height:34px}
  #prntSave span{display:inline}
  #prntClose,#pdfClose{width:34px;padding:0;justify-content:center}
  #prntClose svg,#pdfClose svg{width:16px;height:16px}
  .prtip{display:block;flex:0 0 auto;margin:0;padding:8px 14px;font-size:12px;line-height:1.5;
    color:#34506f;background:#dbe5f1;border-bottom:1px solid #c9d6e6}
  .prtip:empty{display:none}
  .prtip b{font-weight:600;color:#0f1a29}
  .prtip.warn{color:#7a3d00;background:#fff0d9;border-color:#f3d3a1}
  .prtip.warn b{color:#5c2d00}
  .prnt .pb{gap:10px;padding:12px 0 32px;overscroll-behavior:contain}
}