/* ===== Cổng giáo viên & học viên SAM English — ưu tiên điện thoại/máy tính bảng ===== */
body.portal{
  --sam-navy:#1b2e6e;--sam-navy-2:#2a438f;--sam-red:#c41e23;--sam-gold:#ffc93c;--sam-sky:#2ba8e0;
  --brand:var(--sam-navy);--brand-600:var(--sam-navy-2);--brand-50:#eef2fb;--brand-100:#dbe3f7;
  --accent:var(--sam-red);--pt-bg:#f5f7fb;--pt-card-r:16px;--pt-top-h:60px;--pt-nav-h:66px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--pt-bg);color:var(--text);
  -webkit-tap-highlight-color:transparent;min-height:100vh
}
.portal .btn-primary{background:var(--sam-navy);border-color:var(--sam-navy)}
.portal .btn-primary:hover{background:var(--sam-navy-2)}
.portal .btn-red{background:var(--sam-red);border-color:var(--sam-red);color:#fff}
.portal .card{border-radius:var(--pt-card-r)}
.portal a{color:var(--sam-navy)}

/* ---- Thanh trên ---- */
.pt-top{position:sticky;top:0;z-index:40;height:calc(var(--pt-top-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;display:flex;align-items:center;gap:12px;
  background:var(--sam-navy);color:#fff;box-shadow:0 2px 10px rgba(27,46,110,.25)}
.pt-brand{display:flex;align-items:center;gap:10px;color:#fff!important;text-decoration:none!important;min-width:0}
.pt-logo{width:38px;height:38px;color:var(--sam-red);flex-shrink:0}.pt-logo svg{width:100%;height:100%}
.p-student .pt-logo{color:var(--sam-gold)}
.pt-brand-txt{display:flex;flex-direction:column;line-height:1.15}.pt-brand-txt b{font-size:15px;letter-spacing:.02em}.pt-brand-txt small{font-size:11.5px;opacity:.8}
.pt-top-title{flex:1;font-weight:600;font-size:15px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.95}
.pt-me{position:relative}
.pt-avatar{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:var(--sam-red);color:#fff;font-weight:700;font-size:16px;cursor:pointer}
.p-student .pt-avatar{background:var(--sam-gold);color:var(--sam-navy)}
.pt-me .dropdown{right:0;top:calc(100% + 8px)}

/* ---- Điều hướng: thanh tab dưới (điện thoại) / thanh bên (máy tính bảng, máy tính) ---- */
.pt-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:#fff;border-top:1px solid var(--line);
  padding:4px 4px calc(4px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(15,23,42,.06)}
.pt-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;color:var(--muted)!important;font-size:11.5px;font-weight:600;text-decoration:none!important;min-height:52px;justify-content:center}
.pt-nav a.active{color:var(--sam-navy)!important}
.pt-nav a.active .pt-nav-ic{background:var(--brand-50)}
.pt-nav-ic{position:relative;display:grid;place-items:center;width:46px;height:30px;border-radius:999px;transition:background .15s}
.pt-badge{position:absolute;top:-4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--sam-red);color:#fff;font-size:10.5px;font-style:normal;font-weight:700;display:grid;place-items:center;line-height:1}
.pt-main{padding:14px 14px calc(var(--pt-nav-h) + 24px + env(safe-area-inset-bottom));max-width:1100px;margin:0 auto}
.pt-back{display:inline-block;margin-bottom:8px;font-weight:600;font-size:14px}
@media (min-width:900px){
  .pt-nav{top:calc(var(--pt-top-h) + env(safe-area-inset-top));bottom:0;right:auto;width:96px;grid-auto-flow:row;grid-auto-rows:min-content;align-content:start;gap:6px;padding:14px 8px;border-top:0;border-right:1px solid var(--line);box-shadow:none}
  .pt-nav a{min-height:64px;font-size:12px}
  .pt-main{margin-left:96px;padding:22px 26px 40px;max-width:none}
  .pt-main>*{max-width:1100px}
}

/* ---- Thành phần chung ---- */
.pt-hello{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
.pt-hello h1{font-size:1.35rem;margin:0;color:var(--ink)}.pt-hello p{margin:2px 0 0;color:var(--muted);font-size:14px}
.pt-emoji{font-size:34px;line-height:1}
.pt-cols{display:grid;gap:12px}
@media (min-width:640px){.pt-cols.g2{grid-template-columns:1fr 1fr}.pt-cols.g3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.pt-cols.g4{grid-template-columns:repeat(4,1fr)}}
.pt-cols.g4{grid-template-columns:repeat(2,1fr)}
.pt-kpi{background:#fff;border:1px solid var(--line);border-radius:var(--pt-card-r);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.pt-kpi b{font-size:1.5rem;color:var(--ink);line-height:1.15}.pt-kpi span{font-size:12.5px;color:var(--muted)}
.pt-kpi.hl{background:linear-gradient(135deg,var(--sam-navy),var(--sam-navy-2));color:#fff;border:0}.pt-kpi.hl b,.pt-kpi.hl span{color:#fff}
.pt-sec-title{display:flex;justify-content:space-between;align-items:center;margin:18px 2px 8px}
.pt-sec-title h2{font-size:1.05rem;margin:0;color:var(--ink)}.pt-sec-title a{font-size:13.5px;font-weight:600}
.pt-list{display:flex;flex-direction:column;gap:10px}
.pt-row{background:#fff;border:1px solid var(--line);border-radius:var(--pt-card-r);padding:12px 14px;display:flex;gap:12px;align-items:center;color:var(--text)!important;text-decoration:none!important}
a.pt-row:active{transform:scale(.99)}
.pt-row-main{flex:1;min-width:0}.pt-row-main b{display:block;color:var(--ink);font-size:15px}
.pt-row-sub{font-size:13px;color:var(--muted);margin-top:2px;display:flex;flex-wrap:wrap;gap:4px 10px}
.pt-time{flex-shrink:0;width:62px;text-align:center;border-radius:12px;background:var(--brand-50);color:var(--sam-navy);padding:8px 4px;font-weight:700;line-height:1.15}
.pt-time small{display:block;font-weight:500;font-size:11px;color:var(--muted)}
.pt-time.now{background:var(--sam-red);color:#fff}.pt-time.now small{color:#ffe1e1}
.pt-day{font-weight:700;color:var(--ink);font-size:14px;margin:14px 2px 6px}.pt-day.today{color:var(--sam-red)}
.pt-empty{text-align:center;color:var(--muted);padding:26px 10px;background:#fff;border:1px dashed var(--line);border-radius:var(--pt-card-r)}
.pt-empty .pt-emoji{display:block;margin-bottom:6px}
.pt-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:var(--brand-50);color:var(--sam-navy);font-size:12px;font-weight:600}
.pt-chip.red{background:#fde8e8;color:var(--sam-red)}.pt-chip.green{background:#dcfce7;color:#15803d}.pt-chip.amber{background:#fef3c7;color:#b45309}.pt-chip.gray{background:#f1f5f9;color:#64748b}
.pt-ring{--p:0;width:74px;height:74px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:conic-gradient(var(--sam-red) calc(var(--p)*1%),#e8ecf5 0);position:relative}
.pt-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}
.pt-ring b{position:relative;font-size:17px;color:var(--ink)}
.pt-progress{height:8px;border-radius:99px;background:#e8ecf5;overflow:hidden}.pt-progress i{display:block;height:100%;background:var(--sam-red);border-radius:99px}
.pt-tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;scrollbar-width:none}
.pt-tabs a{flex-shrink:0;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:13.5px;color:var(--muted)!important;text-decoration:none!important}
.pt-tabs a.active{background:var(--sam-navy);border-color:var(--sam-navy);color:#fff!important}
.pt-form .field{margin-bottom:12px}.pt-form textarea{min-height:110px}
.pt-actions{display:flex;gap:8px;flex-wrap:wrap}
.pt-hero{border-radius:20px;padding:16px;background:linear-gradient(135deg,var(--sam-navy) 0%,var(--sam-navy-2) 100%);color:#fff;position:relative;overflow:hidden}
.pt-hero::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;border:14px solid rgba(196,30,35,.55)}
.pt-hero h3{color:#dbe3f7;margin:0 0 6px;font-size:13px;font-weight:600;opacity:.85;text-transform:uppercase;letter-spacing:.05em}
.pt-hero b{font-size:1.25rem;display:block}.pt-hero .pt-row-sub{color:#dbe3f7}
.pt-hero .btn{margin-top:10px;position:relative;z-index:1}
.pt-comment{border-left:3px solid var(--sam-red);background:#fff;padding:10px 12px;border-radius:0 12px 12px 0;font-size:14px}
.pt-comment small{display:block;color:var(--muted);margin-top:4px;font-size:12px}
.pt-table{width:100%;border-collapse:collapse;font-size:14px}.pt-table td,.pt-table th{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left}
.pt-table th{font-size:12px;color:var(--muted);font-weight:600}
.pt-install{position:fixed;left:12px;right:12px;bottom:calc(var(--pt-nav-h) + 14px + env(safe-area-inset-bottom));z-index:45;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(15,23,42,.18);padding:10px 12px;display:flex;align-items:center;gap:8px;font-size:13.5px}
.pt-install[hidden]{display:none}.pt-install span{flex:1}
@media (min-width:900px){.pt-install{left:auto;right:20px;bottom:20px;max-width:420px}}

/* ---- Điểm danh trên điện thoại ---- */
.pt-att{display:flex;flex-direction:column;gap:10px}
.pt-att-row{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.pt-att-row .who{display:flex;justify-content:space-between;gap:8px;align-items:center}
.pt-att-row .seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.pt-att-row .seg label{display:block}.pt-att-row .seg input{position:absolute;opacity:0;pointer-events:none}
.pt-att-row .seg span{display:block;text-align:center;padding:9px 2px;border-radius:10px;border:1px solid var(--line);font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
.pt-att-row .seg input:checked+.s-present{background:#dcfce7;border-color:#22c55e;color:#15803d}
.pt-att-row .seg input:checked+.s-late{background:#fef3c7;border-color:#f59e0b;color:#b45309}
.pt-att-row .seg input:checked+.s-excused{background:#dbeafe;border-color:#3b82f6;color:#1d4ed8}
.pt-att-row .seg input:checked+.s-absent{background:#fee2e2;border-color:#ef4444;color:#b91c1c}
.pt-att-row .more{display:grid;grid-template-columns:84px 1fr;gap:6px}
.pt-sticky{position:sticky;bottom:calc(var(--pt-nav-h) + 8px + env(safe-area-inset-bottom));z-index:5;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 8px 24px rgba(15,23,42,.12);display:flex;gap:8px;align-items:center}
@media (min-width:900px){.pt-sticky{bottom:12px}}

/* ===== Theo độ tuổi học viên ===== */
/* Cấp 1: tươi vui, chữ to, bo tròn, nhiều màu */
body.portal.age-k1{--pt-card-r:22px;--pt-bg:#fff8e7;font-size:16.5px}
.age-k1 .pt-hello h1,.age-k1 .pt-hero b,.age-k1 .pt-sec-title h2{font-family:"Baloo 2",Inter,sans-serif;letter-spacing:.01em}
.age-k1 .pt-hello h1{font-size:1.6rem}
.age-k1 .pt-hero{background:linear-gradient(135deg,#ff8a3d,#ff5d8f);border-radius:26px}
.age-k1 .pt-hero::after{border-color:rgba(255,201,60,.7)}
.age-k1 .pt-kpi{border-width:2px}
.age-k1 .pt-kpi:nth-child(4n+1){border-color:#ffd166;background:#fffaf0}.age-k1 .pt-kpi:nth-child(4n+2){border-color:#8bd3f7;background:#f0faff}
.age-k1 .pt-kpi:nth-child(4n+3){border-color:#9be7b4;background:#f0fff5}.age-k1 .pt-kpi:nth-child(4n+4){border-color:#f7a8c4;background:#fff3f8}
.age-k1 .pt-nav a.active .pt-nav-ic{background:#ffe8a3}
.age-k1 .btn{border-radius:14px;min-height:46px}
.age-k1 .pt-ring{background:conic-gradient(#ff8a3d calc(var(--p)*1%),#ffe9cc 0)}
.age-k1 .pt-progress i{background:linear-gradient(90deg,#ffb703,#ff5d8f)}
/* Cấp 2: năng động */
body.portal.age-k2{--pt-card-r:18px;--pt-bg:#f3f7ff}
.age-k2 .pt-hero{background:linear-gradient(135deg,var(--sam-navy),#2ba8e0)}
.age-k2 .pt-ring{background:conic-gradient(var(--sam-sky) calc(var(--p)*1%),#e1f2fb 0)}
.age-k2 .pt-progress i{background:linear-gradient(90deg,var(--sam-sky),var(--sam-navy))}
/* Cấp 3: hiện đại, gọn */
body.portal.age-k3{--pt-card-r:14px}
/* Sinh viên / người đi làm: tối giản, chuyên nghiệp */
body.portal.age-adult{--pt-card-r:12px;--pt-bg:#f6f7f9}
.age-adult .pt-emoji{display:none}
.age-adult .pt-hero::after{display:none}
/* Giáo viên */
body.portal.age-teacher{--pt-card-r:14px}

/* ---- Đăng nhập ---- */
.pt-login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(circle at 15% 10%,rgba(196,30,35,.12),transparent 40%),linear-gradient(160deg,#1b2e6e 0%,#24398a 55%,#2a438f 100%)}
.pt-login .card{width:100%;max-width:400px;border-radius:22px;padding:26px 22px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.pt-login-brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-bottom:14px}
.pt-login-brand .pt-logo{width:64px;height:64px;color:var(--sam-red)}
.pt-login-brand .pt-logo circle{stroke-width:2.6}.pt-login-brand .pt-logo text{fill:var(--sam-navy)}
.pt-login-brand h1{margin:0;font-size:1.35rem;color:var(--sam-navy)}.pt-login-brand p{margin:0;color:var(--muted);font-size:14px}
.pt-login .btn{min-height:48px;font-size:16px}
.pt-login-foot{text-align:center;color:#c7d2fe;font-size:12.5px;margin-top:16px}
.pt-cols.g3k{grid-template-columns:repeat(3,1fr);gap:8px}.pt-cols.g3k .pt-kpi{padding:10px}.pt-cols.g3k .pt-kpi b{font-size:1.3rem}
.pt-login .field{margin-bottom:14px}.pt-login .field label{display:block;margin-bottom:6px;font-weight:600}
.pt-login .pt-login-btn{margin-top:22px}
.portal a.btn-primary,.portal a.btn-red{color:#fff}.portal a.btn{text-decoration:none}