/* ============ SỔ LIÊN LẠC ĐIỆN TỬ (Parent Mode) — MVP-309, 2026-09-30 ============
   Giao diện v3 theo Figma (PO duyệt 30/09). Mobile: section 315:1325 + M1 328:1129 (rộng 440px).
   Web: section 343:31449 — sidebar 240px + nội dung 1 cột 720px căn giữa (co được trên laptop nhỏ).
   Màu = biến design system "landangedupia.github.io" trong file Figma (primary #0876B1, navy #004671,
   lime #A5BE00, green #26A316, n50–n900). JS chọn bố cục qua class trên #sllRoot: .sll-mobile / .sll-web. */

/* Thoát khung 1440×956 co giãn của app khi đang ở Sổ liên lạc / tin Zalo (sllSetViewport). */
body.sll-free{overflow:auto;background:#F9FAFB;}
body.sll-free #appScaleWrap{position:static;display:block;}
body.sll-free #app{width:100%;height:auto;min-height:100vh;transform:none !important;border-radius:0;box-shadow:none;overflow:visible;}
body.sll-free .screen{min-height:0;}

.sll{
  --p:#0876B1; --p600:#0C6496; --navy:#004671; --p50:#ECFBFF; --p100:#C6EDFB;
  --lime:#A5BE00; --green:#26A316; --g50:#EFFBEA; --amber:#FBBE24; --a50:#FEF2C7; --a-text:#8E5F06;
  --n900:#111827; --n800:#1F2937; --n700:#374151; --n600:#4B5563; --n500:#6B7280; --n400:#9CA3AF; --n200:#E5E7EB; --n100:#F3F4F6; --n50:#F9FAFB;
  --shadow:0 4px 12px -4px rgba(8,118,177,.10);
  --top-bg:linear-gradient(180deg,#C6EDFB 0,#ECFBFF 200px,#F9FAFB 340px) no-repeat;
  font-family:'Poppins',system-ui,sans-serif; color:var(--n900); background:var(--n50); min-height:100vh; -webkit-text-size-adjust:100%;
}
.sll *{box-sizing:border-box;}
.sll p,.sll h1,.sll h2,.sll h3,.sll h4{margin:0;}
.sll button{font-family:inherit;color:inherit;}
.sll img{display:block;}
.sll-ic{flex-shrink:0;display:block;}
.sll-ic.muted{color:var(--n400);}
.sll-mobile .sll-web-only{display:none !important;}
.sll-web .sll-mobile-only{display:none !important;}

/* ---------- khung mobile ---------- */
.sll-mobile .sll-app{max-width:440px;margin:0 auto;min-height:100vh;background:var(--top-bg);background-color:var(--n50);position:relative;padding:16px 24px 120px;}
.sll-col{display:flex;flex-direction:column;gap:16px;}
.sll-tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:440px;background:#fff;display:flex;justify-content:space-between;
  padding:12px 20px 28px;border-radius:20px 20px 0 0;box-shadow:0 -2px 6px rgba(16,24,40,.06);z-index:20;}
.sll-tab{width:72px;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;cursor:pointer;padding:0;color:var(--n600);}
.sll-tab .ic{width:32px;height:32px;display:flex;align-items:center;justify-content:center;}
.sll-tab > span:last-child{font-size:12px;font-weight:500;line-height:14px;color:var(--n500);white-space:nowrap;}
.sll-tab.active{color:var(--p);}
.sll-tab.active > span:last-child{color:var(--p);}
.sll-logo-ic{width:28px;height:28px;}
.sll-logo-ic.off{opacity:.45;}

/* ---------- khung web ---------- */
.sll-web .sll-app{display:flex;min-height:100vh;background:var(--n50);}
.sll-side{width:240px;flex-shrink:0;background:#fff;border-right:1px solid var(--n200);padding:20px 16px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto;}
.sll-brand{display:flex;align-items:center;gap:8px;padding:0 4px;}
.sll-brand .mark{width:44px;height:44px;}
.sll-brand .wm{display:flex;flex-direction:column;gap:4px;}
.sll-brand .wm .word{height:20px;width:auto;}
.sll-brand .sub{display:flex;align-items:center;gap:4px;}
.sll-brand .sub > img{width:58px;height:auto;}
.sll-brand .pill{background:linear-gradient(90deg,var(--navy),var(--lime));border-radius:999px;padding:2px 6px;display:flex;align-items:center;}
.sll-brand .pill img{height:6px;width:auto;}
.sll-side-cap{font-size:12px;color:var(--n500);padding:6px 4px 16px;}
.sll-side-group{font-size:12px;font-weight:600;color:var(--n500);padding:16px 8px 6px;}
.sll-side-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-size:15px;color:var(--n700);cursor:pointer;border:none;background:none;text-align:left;width:100%;}
.sll-side-item .ic{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--n600);}
.sll-side-item:hover{background:var(--n100);}
.sll-side-item.active{background:var(--p50);color:var(--p);font-weight:600;}
.sll-side-item.active .ic{color:var(--p);}
.sll-side-item.util{padding:8px 12px;font-size:14px;}
.sll-side .spacer{flex:1;min-height:16px;}
.sll-side-tool{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--p);background:none;border:1px dashed var(--p100);border-radius:10px;padding:8px 10px;cursor:pointer;}
.sll-main{flex:1;min-width:0;background:var(--top-bg);background-color:var(--n50);padding:32px 24px 56px;}
.sll-web .sll-col{max-width:720px;margin:0 auto;gap:24px;}

/* "Xem dạng điện thoại" trên web — khung điện thoại 440px giữa màn hình */
.sll-phone-stage{min-height:100vh;background:#E9EEF3;padding:24px 16px 40px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.sll-phone-stage .ip-screen .scroll{height:100%;overflow-y:auto;scrollbar-width:none;}
.sll-phone-stage .ip-screen .scroll::-webkit-scrollbar{display:none;}
.sll-phone-stage .sll-app{min-height:100%;position:static;padding-top:60px;}
.sll-phone-stage .sll-tabbar{position:absolute;left:0;transform:none;padding-bottom:34px;}
.sll-phone-stage .sll-sheet-wrap{position:absolute;}
.sll-phone-toggle{font-size:13px;font-weight:600;color:var(--p);background:#fff;border:1px dashed var(--p100);border-radius:9px;padding:8px 12px;cursor:pointer;}

/* ---------- đầu màn (chỉ Tổng quan) + banner Chọn con ---------- */
.sll-header{display:flex;align-items:center;gap:12px;}
.sll-header .av{width:52px;height:52px;border-radius:50%;border:2px solid #fff;object-fit:cover;flex-shrink:0;}
.sll-header .who{flex:1;min-width:0;display:flex;flex-direction:column;}
.sll-header .who span{font-size:12px;color:var(--n500);}
.sll-header .who b{font-size:18px;font-weight:600;line-height:1.3;color:var(--navy);}
.sll-header .who em{font-style:normal;font-size:13px;color:var(--n500);}
.sll-btn-pill{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--p100);color:var(--p);font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 3px 8px rgba(8,118,177,.10);white-space:nowrap;}
.sll-btn-round{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--p100);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--n700);flex-shrink:0;box-shadow:0 3px 8px rgba(8,118,177,.10);}
.sll-banner{display:flex;align-items:center;gap:12px;background:#fff;border:none;border-radius:16px;padding:10px 12px;cursor:pointer;text-align:left;width:100%;box-shadow:var(--shadow);}
.sll-banner .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--lime),var(--green));color:#fff;font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sll-banner .t{flex:1;min-width:0;display:flex;flex-direction:column;}
.sll-banner .t span{font-size:11px;color:var(--n500);}
.sll-banner .t b{font-size:15px;font-weight:600;color:var(--n900);}

/* ---------- chữ, nhãn, nút ---------- */
.sll-title{display:flex;flex-direction:column;gap:2px;}
.sll-title h1{font-size:20px;font-weight:600;line-height:1.3;color:var(--navy);}
.sll-title p{font-size:13px;line-height:1.5;color:var(--n500);}
.sll-back{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:500;color:var(--p);cursor:pointer;background:none;border:none;padding:0;align-self:flex-start;}
.sll-link{background:none;border:none;padding:0;font-size:12px;font-weight:600;color:var(--p);cursor:pointer;white-space:nowrap;}
.sll-link.center{align-self:center;font-size:13px;}
.sll-week-link{background:none;border:none;padding:0;font-size:13px;color:var(--p);font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:2px;}
.sll-text{font-size:14px;line-height:1.5;color:var(--n700);}
.sll-foot{font-size:12px;line-height:1.5;color:var(--n500);}
.sll-foot.center{text-align:center;}
.sll-strong{font-size:15px;font-weight:600;color:var(--n900);}
.sll-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:500;white-space:nowrap;align-self:flex-start;}
.sll-pill.grey{background:var(--n100);color:var(--n500);}
.sll-pill.white{background:#fff;color:var(--p);}
.sll-pill.blue{background:var(--p50);color:var(--p);}
.sll-pill.green{background:var(--g50);color:var(--green);}
.sll-pill.amber{background:var(--amber);color:var(--navy);}
.sll-pill.glass{background:rgba(255,255,255,.18);color:#fff;font-weight:600;font-size:12px;}
.sll-mock{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:var(--a50);color:var(--a-text);font-size:11px;font-weight:500;white-space:nowrap;}
.sll-demo-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;background:var(--n100);color:var(--n500);font-size:11px;font-weight:600;vertical-align:middle;margin-left:6px;}
.sll-note{background:var(--a50);color:var(--a-text);border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.5;display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;}
.sll-note.info{background:var(--p50);color:var(--n700);font-size:13px;display:block;}
.sll-note.info small{font-size:11px;color:var(--n500);}
.sll-btn{height:46px;border-radius:12px;border:none;font-size:15px;font-weight:600;cursor:pointer;width:100%;background:var(--p);color:#fff !important;display:flex;align-items:center;justify-content:center;gap:8px;}
.sll-btn.outline{background:#fff;color:var(--p) !important;border:1px solid var(--p);}
.sll-btn.small{height:38px;width:auto;padding:0 14px;font-size:13px;}
.sll-btn.lime{background:var(--lime);color:var(--n900) !important;width:auto;padding:0 18px;height:40px;align-self:flex-start;}

/* ---------- thẻ ---------- */
.sll-card{background:#fff;border:1px solid var(--n200);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow);text-align:left;width:100%;}
.sll-card.tight{gap:0;}
.sll-card.tight > .sll-h{padding-bottom:6px;}
.sll-card.center{align-items:center;text-align:center;padding:24px 16px 20px;gap:10px;}
.sll-card.center .sll-pill{align-self:center;}
.sll-h{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sll-h h3{font-size:16px;font-weight:600;line-height:1.4;color:var(--n900);}
.sll-block{display:flex;flex-direction:column;gap:10px;}

/* thẻ nổi bật (gradient) */
.sll-hero{background:linear-gradient(135deg,var(--p) 0%,var(--navy) 100%);border-radius:22px;padding:18px;color:#fff;display:flex;flex-direction:column;gap:14px;box-shadow:0 8px 16px -6px rgba(0,70,113,.24);}
.sll-hero .k{font-size:13px;font-weight:500;opacity:.85;}
.sll-hero h2{font-size:20px;font-weight:600;line-height:1.35;color:#fff;}
.sll-hero p{font-size:13px;line-height:1.5;opacity:.92;color:#fff;}

.sll-hero p b{font-weight:600;}
.sll-hero-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sll-hero-main{display:flex;align-items:center;gap:14px;}
.sll-hero-main .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.sll-hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;}
.sll-hero-stats > div{background:rgba(255,255,255,.14);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:2px;align-items:flex-start;}
.sll-hero-stats span{font-size:11px;opacity:.85;}
.sll-hero-stats b{font-size:17px;font-weight:600;}
.sll-hero-stats .sll-mock{font-size:9px;padding:1px 6px;}
.sll-week-btn{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.18);border:none;border-radius:999px;padding:5px 10px 5px 12px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;}
.sll-ring{position:relative;width:84px;height:84px;flex-shrink:0;}
.sll-ring svg{position:absolute;inset:0;}
.sll-ring span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;}
.sll-ring b{font-size:22px;font-weight:700;}
.sll-ring small{font-size:11px;opacity:.8;}
.sll-bignum{background:rgba(255,255,255,.14);border-radius:16px;padding:10px 14px;display:flex;flex-direction:column;align-items:center;flex-shrink:0;}
.sll-bignum b{font-size:24px;font-weight:700;line-height:1.2;}
.sll-bignum span{font-size:11px;opacity:.85;}
.sll-hero.goal{gap:10px;}
.sll-hero.goal .big{font-size:14px;opacity:1;}
.sll-goal-ic{flex-shrink:0;}
.sll-hero-note{display:flex;align-items:center;gap:6px;font-size:11px;opacity:.9;}
.sll-hero-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;}
.sll-hero-2 > div{background:rgba(255,255,255,.14);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px;}
.sll-hero-2 span{font-size:12px;opacity:.85;}
.sll-hero-2 b{font-size:26px;font-weight:600;}
.sll-hero-2 b small{font-size:13px;font-weight:400;}
.sll-hero-2 em{font-style:normal;font-size:11px;opacity:.85;}

/* ô kỹ năng */
.sll-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.sll-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.sll-sk{background:var(--t);border:2px solid transparent;border-radius:16px;cursor:pointer;text-align:left;}
.sll-sk.v{padding:12px 4px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.sll-sk.h{padding:10px 12px;display:flex;flex-direction:column;gap:6px;}
.sll-sk.h.sel{border-color:var(--c);}
.sll-sk .row{display:flex;align-items:center;gap:8px;}
.sll-sk .n{font-size:12px;font-weight:500;color:var(--n700);}
.sll-sk.h .n{font-size:14px;font-weight:500;}
.sll-sk b{font-size:19px;font-weight:600;color:var(--n900);}
.sll-sk b small{font-size:11px;font-weight:400;color:var(--n500);}
.sll-sk.h.sel b{color:var(--c);}
.sll-delta{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;font-size:11px;font-weight:500;white-space:nowrap;}
.sll-delta.up{background:var(--g50);color:var(--green);}
.sll-delta.down{background:var(--a50);color:var(--a-text);}
.sll-delta.same{background:var(--n100);color:var(--n500);}
.sll-sk.v .sll-delta{background:rgba(255,255,255,.7);}

/* Tổng quan: 2 thẻ lịch học */
.sll-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;}
.sll-two > :only-child{grid-column:1 / -1;}
.sll-mini{padding:14px;gap:8px;cursor:pointer;}
.sll-mini .d{font-size:15px;font-weight:600;color:var(--n900);}
.sll-mini.next{background:var(--p50);border-color:var(--p100);cursor:default;}
.sll-mini.next .d{color:var(--navy);}
.sll-mini .t1{font-size:13px;font-weight:500;color:var(--n700);}
.sll-mini .t2{font-size:12px;color:var(--n500);}
.sll-mini .t3{font-size:12px;font-weight:600;color:var(--n700);}
.sll-photos2{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;}
.sll-ph-wrap{display:flex;flex-direction:column;gap:4px;min-width:0;}
.sll-ph-wrap span{font-size:10px;color:var(--n500);}
.sll-ph{aspect-ratio:4/3;border-radius:10px;background:var(--n100);display:flex;align-items:center;justify-content:center;color:var(--n400);overflow:hidden;}
.sll-ph img{width:100%;height:100%;object-fit:cover;}
.sll-card:not(.sll-mini) .sll-ph-wrap span{font-size:12px;font-weight:500;color:var(--n700);}

/* dòng nhận xét */
.sll-line{display:flex;gap:12px;align-items:center;background:none;border:none;padding:0;text-align:left;width:100%;}
.sll-line.link{cursor:pointer;}
.sll-line p{flex:1;font-size:14px;line-height:1.5;color:var(--n700);}
.sll-line p b{font-weight:600;color:var(--n900);}
.sll-sq{flex-shrink:0;}
.sll-sug{display:flex;gap:12px;align-items:center;background:var(--p50);border-radius:12px;padding:10px 12px;color:var(--p);}
.sll-sug div{display:flex;flex-direction:column;gap:2px;}
.sll-sug b{font-size:14px;font-weight:600;color:var(--n900);}
.sll-sug span{font-size:12px;color:var(--n600);}
.sll-chart{width:100%;height:auto;display:block;}

/* Tiện ích (mobile) */
.sll-util{background:#fff;border:1px solid var(--n200);border-radius:16px;padding:14px 4px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;box-shadow:var(--shadow);}
.sll-util span{font-size:11px;font-weight:500;color:var(--n700);text-align:center;line-height:1.3;}

/* Lịch học */
.sll-lessons{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;}
.sll-lesson{background:var(--n50);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;}
.sll-lesson.dim{opacity:.7;}
.sll-lesson .top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sll-lesson .top b{font-size:14px;font-weight:600;}
.sll-lesson .t1{font-size:12px;color:var(--n500);}
.sll-lesson .t2{font-size:13px;font-weight:500;color:var(--n700);}
.sll-lesson .t3{font-size:11px;color:var(--n500);}
.sll-lesson .acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.sll-act{display:flex;align-items:center;justify-content:center;gap:4px;height:34px;border-radius:8px;border:1px solid var(--n200);background:#fff;font-size:12px;font-weight:500;color:var(--p);cursor:pointer;}
.sll-act.off{color:var(--n400);cursor:default;}
.sll-rows{display:flex;flex-direction:column;}
.sll-past{display:flex;align-items:center;gap:12px;padding:12px 0;border:none;border-bottom:1px solid var(--n200);background:none;cursor:pointer;text-align:left;width:100%;}
.sll-past:last-child{border-bottom:none;}
.sll-past .dbox{width:48px;flex-shrink:0;background:var(--p50);border-radius:10px;padding:6px 0;display:flex;flex-direction:column;align-items:center;}
.sll-past .dbox span{font-size:11px;font-weight:500;color:var(--p);}
.sll-past .dbox b{font-size:13px;font-weight:600;color:var(--navy);}
.sll-past .x{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.sll-past .x > b{font-size:13px;font-weight:500;color:var(--n900);}
.sll-past .r{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--n700);}

/* Chi tiết buổi */
.sll-kvs{display:flex;flex-direction:column;}
.sll-kv{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid var(--n200);font-size:13px;color:var(--n700);}
.sll-kv:last-child,.sll-kv.last{border-bottom:none;}
.sll-kv b{font-weight:600;color:var(--n900);}
.sll-kv.big{padding:12px 0;}
.sll-kv.big > span{display:flex;flex-direction:column;gap:2px;}
.sll-kv.big em{font-style:normal;font-size:12px;color:var(--n500);}
.sll-kv.big em.warn{color:var(--a-text);}
.sll-kv.big b{font-size:14px;font-weight:500;}
.sll-kv.big b.n{font-size:14px;font-weight:500;}
.sll-kv .sc{font-size:16px;font-weight:600;}
.sll-kv .sc small{font-size:11px;font-weight:400;color:var(--n500);}
.sll-aic2{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--p50);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--navy);}
.sll-aic2 div{display:flex;flex-direction:column;}
.sll-aic2 div b{font-weight:600;}
.sll-aic2 div span{font-size:11px;color:var(--n500);}
.sll-stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.sll-stats3 > div{background:var(--n50);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:4px;}
.sll-stats3 b{font-size:22px;font-weight:600;color:var(--p);}
.sll-stats3 span{font-size:11px;color:var(--n700);line-height:1.4;}
.sll-stats3 .muted b{color:var(--n500);}
.sll-tl{display:flex;flex-direction:column;gap:10px;}
.sll-tl .row{display:flex;gap:12px;align-items:flex-start;}
.sll-tl .t{font-size:12px;font-weight:600;color:var(--navy);width:40px;flex-shrink:0;padding-top:1px;}
.sll-tl i{width:10px;height:10px;border-radius:50%;background:var(--p);flex-shrink:0;margin-top:4px;}
.sll-tl i.green{background:var(--green);}
.sll-tl .x{display:flex;flex-direction:column;}
.sll-tl .x b{font-size:13px;font-weight:500;color:var(--n900);}
.sll-tl .x span{font-size:11px;color:var(--n500);}

/* Hộp thư */
.sll-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;}
.sll-chips::-webkit-scrollbar{display:none;}
.sll-chips.wrap{flex-wrap:wrap;overflow:visible;}
.sll-web .sll-chips{flex-wrap:wrap;overflow:visible;}
.sll-chipbtn{flex-shrink:0;padding:6px 12px;border-radius:999px;border:1px solid var(--n200);background:#fff;font-size:12px;font-weight:500;color:var(--n700);cursor:pointer;white-space:nowrap;}
.sll-chipbtn.on{background:var(--navy);border-color:var(--navy);color:#fff;}
.sll-msg{display:flex;gap:12px;align-items:flex-start;padding:14px 10px;border:none;border-bottom:1px solid var(--n200);background:none;text-align:left;width:100%;cursor:pointer;border-radius:12px;}
.sll-msg:last-child{border-bottom:none;}
.sll-msg.unread{background:var(--p50);}
.sll-msg .x{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.sll-msg .h{display:flex;align-items:center;gap:8px;}
.sll-msg .h b{flex:1;font-size:14px;font-weight:500;color:var(--n900);}
.sll-msg.unread .h b{font-weight:600;}
.sll-msg .dot{width:8px;height:8px;border-radius:50%;background:#1A80F2;flex-shrink:0;}
.sll-msg .p{font-size:13px;line-height:1.5;color:var(--n700);}
.sll-msg .m{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--n500);}
.sll-msg .lk{margin-left:auto;font-size:12px;font-weight:600;color:var(--p);}

/* Liên hệ */
.sll-person{display:flex;align-items:center;gap:12px;}
.sll-person .av{width:48px;height:48px;border-radius:50%;background:var(--p50);color:var(--p);font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sll-person .t{display:flex;flex-direction:column;gap:2px;}
.sll-person b{font-size:15px;font-weight:600;}
.sll-person span{font-size:12px;color:var(--n700);}
.sll-person em{font-style:normal;font-size:12px;color:var(--n500);}
.sll-faq{border-bottom:1px solid var(--n200);}
.sll-faq:last-child{border-bottom:none;}
.sll-faq button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:12px 0;background:none;border:none;font-size:14px;color:var(--n700);text-align:left;cursor:pointer;}
.sll-faq.open .sll-ic{transform:rotate(180deg);}
.sll-faq p{font-size:13px;line-height:1.5;color:var(--n600);padding:0 0 12px;}

/* Góc dạy con */
.sll-article{display:flex;align-items:center;gap:12px;background:none;border:none;padding:4px 0;text-align:left;width:100%;cursor:pointer;text-decoration:none;color:inherit;}
a.sll-article + a.sll-article{border-top:1px solid var(--n100);padding-top:12px;margin-top:8px;}
.sll-article .ic.thumb{width:96px;height:64px;border-radius:10px;overflow:hidden;background:var(--n100);}
.sll-article .ic.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.sll-article .t{flex:1;min-width:0;}
.sll-article:hover b{color:var(--p);}
a.sll-btn{text-decoration:none;}
.sll-article .ic{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sll-article .t{display:flex;flex-direction:column;gap:2px;}
.sll-article b{font-size:14px;font-weight:600;color:var(--n900);line-height:1.4;}
.sll-article span{font-size:12px;color:var(--n500);}
.sll-read h2{font-size:20px;font-weight:600;color:var(--navy);line-height:1.35;}
.sll-read h4{font-size:15px;font-weight:600;color:var(--n900);}
.sll-read p{font-size:14px;line-height:1.6;color:var(--n700);}
.sll-read .lead{font-weight:600;color:var(--n900);}
.sll-step{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--n700);}
.sll-step .num{width:26px;height:26px;border-radius:50%;background:var(--p50);color:var(--p);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sll-step b{color:var(--n900);font-weight:600;}
.sll-hint{display:flex;gap:8px;align-items:flex-start;background:#F2F6D9;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.5;color:#3E4A00;}
.sll-vote{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.sll-vote button{display:flex;align-items:center;justify-content:center;gap:6px;height:42px;border-radius:10px;border:1px solid var(--n200);background:#fff;font-size:13px;font-weight:600;color:var(--n700);cursor:pointer;}
.sll-vote button.on{border-color:var(--p);background:var(--p50);color:var(--p);}

/* Gói học */
.sll-pkg-now{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sll-pkg-now span{display:flex;flex-direction:column;gap:2px;}
.sll-pkg-now b{font-size:16px;font-weight:600;}
.sll-pkg-now em{font-style:normal;font-size:13px;color:var(--n700);}
.sll-progress{height:8px;border-radius:999px;background:#EDF1DA;overflow:hidden;}
.sll-progress i{display:block;height:100%;background:var(--lime);border-radius:999px;}
.sll-pkg{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--n200);border-radius:12px;padding:12px 14px;}
.sll-pkg.cur{border:1.5px solid var(--p);background:var(--p50);}
.sll-pkg span{display:flex;flex-direction:column;gap:2px;}
.sll-pkg span.r{align-items:flex-end;}
.sll-pkg b{font-size:15px;font-weight:600;color:var(--n900);}
.sll-pkg .r b{color:var(--navy);}
.sll-pkg em{font-style:normal;font-size:12px;color:var(--n500);}

/* BTVN */
.sll-bars{display:flex;gap:4px;}
.sll-bars i{flex:1;height:8px;border-radius:4px;background:var(--n200);}
.sll-bars i.g,.sll-legend i.g{background:var(--green);}
.sll-bars i.a,.sll-legend i.a{background:#B87305;}
.sll-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--n700);}
.sll-legend span{display:flex;align-items:center;gap:6px;}
.sll-legend i{width:8px;height:8px;border-radius:50%;background:var(--n200);}

/* Xin nghỉ + bảng chọn */
.sll-radio{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:12px;border:1px solid var(--n200);background:#fff;text-align:left;cursor:pointer;}
.sll-radio.on{border:1.5px solid var(--p);background:var(--p50);}
.sll-radio > i{width:20px;height:20px;border-radius:50%;border:1.6px solid var(--n400);flex-shrink:0;background:#fff;}
.sll-radio.on > i{border:2px solid var(--p);box-shadow:inset 0 0 0 4px #fff;background:var(--p);}
.sll-radio > i.box{border-radius:5px;background:var(--n400);border-color:var(--n400);}
.sll-radio.locked{background:var(--n50);cursor:default;}
.sll-radio span{display:flex;flex-direction:column;gap:2px;}
.sll-radio b{font-size:14px;font-weight:600;color:var(--n900);}
.sll-radio em{font-style:normal;font-size:12px;color:var(--n600);}
.sll-input{width:100%;min-height:88px;border-radius:12px;border:1px solid var(--n200);background:var(--n50);padding:12px;font-family:inherit;font-size:13px;resize:vertical;}
.sll-sheet-wrap{position:fixed;inset:0;background:rgba(17,24,39,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center;}
.sll-sheet{position:relative;background:#fff;width:100%;max-width:440px;border-radius:24px 24px 0 0;padding:12px 24px 32px;display:flex;flex-direction:column;gap:12px;max-height:85vh;overflow-y:auto;}
.sll-sheet .handle{width:40px;height:4px;border-radius:2px;background:var(--n200);align-self:center;}
.sll-sheet h2{font-size:18px;font-weight:600;color:var(--navy);padding-right:32px;}
.sll-sheet-x{position:absolute;right:16px;top:14px;width:32px;height:32px;border-radius:50%;border:none;background:var(--n100);font-size:20px;line-height:1;color:var(--n600);cursor:pointer;}
.sll-web .sll-sheet-wrap{align-items:center;}
.sll-web .sll-sheet{max-width:520px;border-radius:20px;padding:24px;box-shadow:0 16px 40px rgba(0,0,0,.18);}
.sll-web .sll-sheet .handle{display:none;}
.sll-kid{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:12px;border:1px solid var(--n200);background:#fff;cursor:pointer;text-align:left;}
.sll-kid.on{border:1.5px solid var(--p);background:var(--p50);}
.sll-kid .av{width:40px;height:40px;border-radius:50%;color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sll-kid .t{flex:1;display:flex;flex-direction:column;}
.sll-kid b{font-size:15px;font-weight:600;}
.sll-kid em{font-style:normal;font-size:12px;color:var(--n500);}
.sll-kid .tick{width:18px;height:18px;border-radius:50%;border:2px solid var(--p);box-shadow:inset 0 0 0 3px #fff;background:var(--p);}

/* màn hẹp (điện thoại nhỏ) */
@media (max-width:380px){
  .sll-mobile .sll-app{padding-left:16px;padding-right:16px;}
  .sll-grid4{gap:6px;}
  .sll-sk.v{padding:10px 2px;}
  .sll-hero-main{flex-wrap:wrap;}
}

/* ---------- Tin Zalo (mô phỏng, Z1/Z2) ---------- */
.zl{font-family:'Poppins',system-ui,sans-serif;min-height:100vh;background:#E9EEF3;}
.zl *{box-sizing:border-box;}
.zl p{margin:0;}
.zl-stage{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px 40px;}
.zl-stage .cap{font-size:13px;color:#5E6E7E;text-align:center;max-width:440px;}
.zl-back-web{font-size:13px;font-weight:600;color:#0876B1;background:none;border:none;cursor:pointer;}
.zl-phone{width:440px;max-width:100%;border-radius:32px;overflow:hidden;background:#E2E9F1;box-shadow:0 20px 50px rgba(16,24,40,.18);display:flex;flex-direction:column;height:calc(100vh - 120px);min-height:640px;}
.zl.full .zl-stage{padding:0;}
.zl.full .zl-stage .cap,.zl.full .zl-back-web{display:none;}
.zl.full .zl-phone{width:100%;max-width:none;border-radius:0;height:100vh;min-height:0;box-shadow:none;}
.zl-top{background:#0068FF;display:flex;align-items:center;gap:12px;padding:16px 16px 12px;flex-shrink:0;}
.zl-top button{background:none;border:none;padding:0;cursor:pointer;display:flex;}
.zl-oa{width:40px;height:40px;border-radius:999px;background:#fff;color:#0876B1;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.zl-top .t{display:flex;flex-direction:column;line-height:1.5;}
.zl-top .t b{font-size:16px;font-weight:600;color:#fff;}
.zl-top .t span{font-size:12px;color:#D6E6FF;}
.zl-chat{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.zl-day{background:rgba(255,255,255,.8);border-radius:999px;padding:3px 12px;font-size:12px;line-height:1.5;color:#5E6E7E;}
.zl-msg{background:#fff;border-radius:14px;padding:14px;width:100%;max-width:392px;display:flex;flex-direction:column;gap:10px;}
.zl-msg h4{margin:0;font-size:16px;font-weight:600;line-height:1.35;color:#111827;}
.zl-msg h5{margin:0;font-size:15px;font-weight:600;line-height:1.35;color:#111827;display:flex;align-items:center;gap:8px;}
.zl-msg .txt{font-size:13px;line-height:1.5;color:#374151;}
.zl-msg .time{font-size:11px;line-height:1.5;color:#8595A5;}
.zl-open{background:#E8F1FF;border:none;border-radius:10px;padding:11px 12px;font-size:14px;font-weight:600;color:#0068FF;cursor:pointer;width:100%;}
.zl-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.zl-kpi{background:#F4F7FA;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;}
.zl-kpi b{font-size:17px;font-weight:700;line-height:1.3;color:#0876B1;}
.zl-kpi span{font-size:12px;line-height:1.5;color:#4B5563;}
.zl-input{background:#fff;display:flex;align-items:center;gap:12px;padding:12px 16px 28px;flex-shrink:0;}
.zl-input div{flex:1;background:#F2F5F8;border-radius:999px;padding:10px 16px;font-size:14px;line-height:1.5;color:#8595A5;}

.zl-tags{display:flex;gap:6px;align-items:center;}
.zl-chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:#E6F6E1;color:#2E7D18;}
.zl-chip.info{background:#ECFBFF;color:#0876B1;}
.zl-chip.warn{background:#FEF2C7;color:#8E5F06;}
.zl-badge{display:inline-flex;padding:2px 8px;border-radius:6px;background:#F3F4F6;color:#6B7280;font-size:11px;font-weight:600;}
.zl-photos{display:flex;gap:8px;}
.zl-ph{width:76px;height:76px;border-radius:12px;overflow:hidden;position:relative;background:linear-gradient(180deg,#CFE6F3,#9CC9E2);}
.zl-ph img{width:100%;height:100%;object-fit:cover;display:block;}
.zl-ph span{position:absolute;left:4px;top:4px;background:#fff;border-radius:4px;padding:1px 5px;font-size:10px;font-weight:600;line-height:1.5;color:#111827;}
.zl-lines{display:flex;flex-direction:column;gap:8px;}
.zl-lines p{font-size:14px;line-height:1.5;color:#1F2937;}
.zl-lines b{font-weight:600;}

/* M4 3 zone (MVP-313, 01/10) */
.sll-who{display:flex;align-items:center;gap:10px;}
.sll-who .av{width:44px;height:44px;border-radius:50%;background:var(--p);color:#fff;font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.sll-who .av.img{background:var(--p50);}
.sll-who .av img{width:30px;height:30px;object-fit:contain;}
.sll-who div{display:flex;flex-direction:column;min-width:0;}
.sll-who b{font-size:14px;font-weight:600;color:var(--n900);line-height:1.4;}
.sll-who div span{font-size:12px;color:var(--n500);line-height:1.4;}
.sll-stats3.two{grid-template-columns:repeat(2,minmax(0,1fr));}
.sll-stats3 .sll-pill{align-self:flex-start;}
a.sll-line{text-decoration:none;color:inherit;}

/* Khung iPhone 17 Pro Max (440 × 956) — giống prototype Figma. Thu nhỏ bằng JS (sllFitPhone), tâm trên. */
.ip-wrap{position:relative;flex-shrink:0;}
.ip{position:absolute;left:50%;top:0;width:464px;height:980px;margin-left:-232px;transform-origin:top center;padding:12px;border-radius:66px;background:#1c1c1e;
  box-shadow:inset 0 0 0 2px #3a3a3c,0 24px 60px rgba(16,24,40,.35);}
.ip::before{content:'';position:absolute;left:-3px;top:150px;width:3px;height:64px;border-radius:2px 0 0 2px;background:#2c2c2e;box-shadow:0 84px 0 #2c2c2e,0 -50px 0 -1px #2c2c2e;}
.ip::after{content:'';position:absolute;right:-3px;top:230px;width:3px;height:98px;border-radius:0 2px 2px 0;background:#2c2c2e;}
.ip-screen{position:relative;width:440px;height:956px;border-radius:54px;overflow:hidden;background:#fff;}
.ip-status{position:absolute;top:0;left:0;right:0;height:54px;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:8px 34px 0 46px;color:#111827;pointer-events:none;font-family:-apple-system,'SF Pro Text','Poppins',system-ui,sans-serif;}
.ip-status .tm{font-size:17px;font-weight:600;letter-spacing:.2px;}
.ip-status .ic{display:flex;align-items:center;gap:7px;}
.ip.light .ip-status{color:#fff;}
.ip-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:126px;height:37px;border-radius:20px;background:#000;z-index:31;}
.ip-home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:140px;height:5px;border-radius:3px;background:#111827;opacity:.9;z-index:40;pointer-events:none;}
.ip.light .ip-home{background:#111827;}
.ip-screen .zl-phone{width:100%;max-width:none;height:100%;min-height:0;border-radius:0;box-shadow:none;}
.ip-screen .zl-top{padding-top:58px;}
.ip-screen .zl-input{padding-bottom:36px;}

/* Bảng "Xem thử" trạng thái Tổng quan — ngoài màn hình điện thoại, cố định bên phải (chỉ giai đoạn demo) */
.sll-demo-panel{position:fixed;right:8px;top:50%;transform:translateY(-50%);z-index:60;width:140px;background:#fff;border:1px dashed var(--p100);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 24px rgba(16,24,40,.12);}
.sll-demo-panel b{font-size:12px;font-weight:600;color:var(--navy);margin-bottom:2px;}
.sll-demo-panel small{font-size:10px;color:var(--n500);margin-top:2px;}
.sll-demo-panel button{height:34px;border-radius:999px;border:1px solid var(--n200);background:#fff;font-size:12px;font-weight:500;color:var(--n700);cursor:pointer;}
.sll-demo-panel button.on{background:var(--navy);border-color:var(--navy);color:#fff;}

.sll-pill.red{background:#FDECEC;color:#B03A3A;}