/*
  PHF Training Hub - stylesheet extracted from stable index.html.
  Refactor Stage 1: CSS/assets structure only.
  Logic, Supabase, progress, phone resume, and refresh resume are unchanged.
*/

*{box-sizing:border-box}
:root{
  --green-950:#05261e;--green-900:#064533;--green-800:#0b4b39;--green-700:#0b6b48;--green-600:#168354;
  --green-100:#eaf8ee;--green-50:#f4fbf7;--line:#d9eadf;--text:#18372d;--muted:#536d62;--soft:#f8fcfa;--warn:#fff8e8;
  --shadow:0 16px 38px rgba(7,59,45,.08);--shadow2:0 24px 60px rgba(7,59,45,.12)
}
body{margin:0;font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;background:linear-gradient(180deg,#eef7f2,#f8faf8);color:var(--text);line-height:1.48;font-size:15px}
button,input,select,textarea{font:inherit}
.app{max-width:1440px;margin:0 auto;padding:22px}
.topbar{background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;box-shadow:0 12px 30px rgba(7,59,45,.07);margin-bottom:12px}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.logo{width:126px;height:44px;border:1.5px dashed #8fb7a4;border-radius:14px;display:grid;place-items:center;color:var(--green-800);font-weight:850;font-size:13px;background:#f8fcfa;flex:0 0 auto}
.brand h1{margin:0;font-size:22px;color:var(--green-900);font-weight:850}
.brand p{margin:3px 0 0;color:var(--muted);font-size:13px;font-weight:600}
.student-card{background:var(--green-900);color:#fff;border-radius:18px;padding:11px 14px;font-weight:750;font-size:13px;line-height:1.45;white-space:nowrap}
.phase-strip{background:#fff;border:1px solid var(--line);border-radius:22px;padding:10px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:10px;box-shadow:0 10px 26px rgba(7,59,45,.05)}
.phase{border:1px solid transparent;border-radius:16px;padding:10px 11px;min-height:68px;background:#fbfdfc;cursor:pointer}
.phase.done{background:var(--green-100);border-color:#b8e0c4}
.phase.active{background:var(--green-900);color:#fff;border-color:var(--green-900)}
.phase-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.phase-code{font-weight:900;font-size:13px}
.phase-state{font-size:10px;font-weight:900;padding:4px 6px;border-radius:999px;background:#edf3f0;color:#52695f;white-space:nowrap}
.phase.active .phase-state{background:rgba(255,255,255,.16);color:#fff}
.phase-title{font-size:14px;font-weight:850;margin-bottom:2px}
.phase-date{font-size:12px;color:var(--muted);font-weight:700}
.phase.active .phase-date{color:rgba(255,255,255,.76)}
.context-bar{background:#fff;border:1px solid #cfe4d8;border-left:6px solid var(--green-700);border-radius:18px;padding:13px 16px;margin-bottom:16px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;box-shadow:0 8px 20px rgba(7,59,45,.04)}
.context-main{display:flex;gap:10px;align-items:flex-start}.pin{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;background:var(--green-100);color:var(--green-700);font-weight:900;flex:0 0 auto;margin-top:1px}
.context-main b{display:block;color:var(--green-900);font-size:15px;margin-bottom:2px;font-weight:900}.context-main span{display:block;color:#405b51;font-size:13px;font-weight:600}
.context-action{background:var(--green-50);border:1px solid #cfe4d8;border-radius:999px;padding:8px 11px;color:var(--green-800);font-size:12px;font-weight:900;white-space:nowrap}
.layout{display:grid;grid-template-columns:265px minmax(730px,1fr) 230px;gap:16px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 30px rgba(7,59,45,.06)}.todo-panel,.right-panel{padding:15px;position:sticky;top:18px;max-height:calc(100vh - 36px);overflow:auto}
.panel-title{font-size:17px;font-weight:900;color:var(--green-900);margin:0 0 4px}.panel-sub{font-size:12px;color:var(--muted);margin:0 0 12px;font-weight:600}
.todo-item{display:grid;grid-template-columns:28px 1fr;gap:9px;align-items:start;padding:10px;border-radius:15px;border:1px solid #d7eadf;background:var(--soft);margin-bottom:8px;cursor:pointer;text-align:left;width:100%}
.todo-item.active{background:var(--green-900);border-color:var(--green-900);color:#fff}.todo-item.done{background:var(--green-100);border-color:#b8e0c4}
.mark{width:27px;height:27px;border-radius:999px;display:grid;place-items:center;background:#e6f3eb;color:var(--green-700);font-size:12px;font-weight:950}.todo-item.active .mark{background:rgba(255,255,255,.18);color:#fff}
.todo-item b{display:block;font-size:13px;font-weight:850;margin-bottom:2px}.todo-item span{display:block;font-size:11.5px;color:var(--muted);font-weight:600}.todo-item.active span{color:rgba(255,255,255,.74)}
.main{background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.focus-head{padding:28px 34px;background:linear-gradient(135deg,#043728,#0b6b48);color:#fff}.focus-head .chip{display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);font-size:13px;font-weight:800;margin-bottom:12px}
.focus-head h2{margin:0 0 8px;font-size:36px;line-height:1.12;font-weight:850;color:#fff}.focus-head p{margin:0;max-width:900px;color:rgba(255,255,255,.86);font-size:15.5px;font-weight:600}
.focus-body{padding:26px 34px 30px}.today-box{background:var(--green-50);border:1px solid #cfe4d8;border-radius:20px;padding:16px;margin-bottom:18px}.today-box h3,.remember h3,.sample-box h3{margin:0 0 8px;color:var(--green-900);font-size:19px;font-weight:900}
.check-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}.check-list li{display:flex;gap:9px;align-items:flex-start;color:#34564a;font-weight:650}.tick{width:22px;height:22px;border-radius:999px;background:#e4f4ea;color:#0b6b48;display:grid;place-items:center;font-weight:950;flex:0 0 auto;font-size:12px}
.remember-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}.memory-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:15px;box-shadow:0 8px 20px rgba(7,59,45,.04)}.memory-card span{display:inline-flex;background:#eef7f2;border:1px solid #d4e9dd;color:var(--green-800);border-radius:999px;padding:5px 9px;font-size:12px;font-weight:850;margin-bottom:8px}.memory-card b{display:block;color:var(--green-900);font-size:16px}
.sample-box{border:1px solid #ead496;background:#fffaf0;border-radius:20px;padding:16px;margin:16px 0;color:#5c512d}.sample-text{font-weight:750}
.original{margin-top:18px;border-top:1px solid #edf3f0;padding-top:18px}details{background:#fbfdfc;border:1px solid #dbe7e1;border-radius:18px;padding:14px}summary{cursor:pointer;font-weight:900;color:var(--green-900)}.original-content{margin-top:14px;overflow:auto}
.actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px;border-top:1px solid #edf3f0;padding-top:18px}.btn{border:0;border-radius:999px;padding:12px 18px;font-weight:900;cursor:pointer}.btn-primary{background:#064533;color:#fff}.btn-soft{background:#edf6f1;color:#064533;border:1px solid #d8eadf}.btn:disabled{opacity:.45;cursor:not-allowed}
.progress-card{background:linear-gradient(135deg,#f7fbf9,#fff);border:1px solid #d8eadf;border-radius:18px;padding:13px;margin-bottom:12px}.progress-num{font-size:30px;line-height:1;font-weight:950;color:var(--green-900)}.progress-label{font-size:12px;color:var(--muted);font-weight:700;margin-top:4px}.bar{height:8px;border-radius:999px;background:#e8f1ed;overflow:hidden;margin-top:10px}.bar span{display:block;height:100%;background:linear-gradient(90deg,#0b4b39,#168354)}
.status-list{display:grid;gap:9px}.status-item{border:1px solid #d7eadf;background:#f8fcfa;border-radius:15px;padding:10px}.status-item b{display:block;color:#064533;font-size:12px;margin-bottom:2px}.status-item span{font-size:12px;color:#536d62;font-weight:650}
/* Generic original content styling */
.grid,.learning-grid,.b4-grid,.values-grid,.mini-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.grid.three,.b4-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four,.b4-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.learn-card,.info-card,.b4-card,.value-card,.late-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:15px;box-shadow:0 8px 20px rgba(7,59,45,.04)}.tag{display:inline-flex;border-radius:999px;background:#eef7f2;color:var(--green-800);border:1px solid #d4e9dd;padding:5px 9px;font-size:12px;font-weight:800;margin-bottom:9px}h1,h2,h3,h4{color:var(--green-900)}.table-card,.table-wrap,.b4-table-wrap{border:1px solid var(--line);border-radius:18px;overflow:auto;margin:18px 0;background:#fff}.table-title{padding:12px 14px;background:var(--green-900);color:#fff;font-weight:900}table{width:100%;border-collapse:collapse;font-size:14px}th{background:#1558c6;color:#fff;text-align:left;padding:10px}td{padding:10px;border-top:1px solid var(--line);vertical-align:top}.scenario,.callout,.b4-callout,.warning,.b4-safe,.test-note,.avoid-box{border:1px solid #ead496;background:#fffaf0;border-radius:18px;padding:14px;margin:16px 0;color:#5c512d}.bluebox,.remember-box,.hero-card,.b4-note,.note-strip{background:#f7fbf9;border:1px solid #cfe4d8;border-radius:18px;padding:14px;margin:16px 0;color:#3f6256}.quote,.b4-quote,.rule-highlight{border-left:5px solid #0b6b48;background:#f8fcfa;border-radius:0 14px 14px 0;padding:13px;margin:14px 0;color:#29483c;font-weight:700}.timeline,.note-list,.quick-list,.culture-list{display:grid;gap:10px;margin:14px 0}.row-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;border:1px solid var(--line);border-radius:18px;background:#fff;padding:14px}.row-label{background:linear-gradient(135deg,var(--green-900),var(--green-700));color:#fff;border-radius:14px;padding:10px 8px;text-align:center;font-weight:850}.note,.quick-item,.culture-item,.b4-list-item{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);background:#fff;border-radius:15px;padding:11px;color:#405b51;font-size:14px}.dot,.b4-dot{width:10px;height:10px;border-radius:999px;background:var(--green-700);margin-top:7px;flex:0 0 auto}.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.chip{border:1px solid #cfe2d8;background:#fff;color:#31574a;border-radius:999px;padding:7px 10px;font-weight:850;font-size:13px}.quiz-card,.b4-quiz,.question-block{border:1px dashed #bcd8ca;background:#fbfdfc;border-radius:18px;padding:14px;margin:14px 0}.image-placeholder,.image-vị trí\ minh\ họa,.b4-image-vị trí\ minh\ họa{border:1.5px dashed #b7d2c5;background:linear-gradient(135deg,#fbfefc,#f4fbf7);border-radius:18px;padding:18px;margin:16px 0;color:#315246;text-align:center}
@media(max-width:1160px){.layout{grid-template-columns:1fr}.todo-panel,.right-panel{position:static;max-height:none}.remember-grid{grid-template-columns:1fr}}
@media(max-width:760px){.app{padding:12px}.topbar,.context-bar{grid-template-columns:1fr;display:block}.topbar{align-items:flex-start;flex-direction:column}.student-card{white-space:normal;margin-top:10px}.phase-strip{grid-template-columns:1fr}.focus-head h2{font-size:28px}.focus-body{padding:20px}.grid,.learning-grid,.b4-grid,.grid.three,.b4-grid.three,.grid.four,.b4-grid.four{grid-template-columns:1fr}}

/* PATCH v2: Giữ nguyên giao diện gốc cho 2 màn đầu: Chào mừng + Nhập thông tin */
.original-goc-screen{background:transparent;border:0;box-shadow:none;padding:0}
.original-goc-screen .shell{max-width:none;margin:0}
.original-goc-screen .topline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.original-goc-screen .brand{display:flex;align-items:center;gap:12px;min-width:0}
.original-goc-screen .logo-vị{width:126px;height:46px;border:1.5px dashed rgba(7,59,45,.35);border-radius:14px;display:grid;place-items:center;font-size:13px;color:var(--green-800);background:rgba(255,255,255,.62);font-weight:700;flex:0 0 auto}
.original-goc-screen .brand-title b{display:block;color:var(--green-900);font-size:18px;line-height:1.15}
.original-goc-screen .brand-title span{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.original-goc-screen .badge{display:inline-flex;align-items:center;gap:8px;border:1px solid #c9dfd4;background:rgba(255,255,255,.7);color:var(--green-800);border-radius:999px;padding:8px 12px;font-size:13px;font-weight:800;white-space:nowrap}
.original-goc-screen .welcome-card{background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(248,252,250,.94));border:1px solid rgba(219,231,225,.95);border-radius:34px;box-shadow:var(--shadow2);overflow:hidden;display:grid;grid-template-columns:1.02fr .98fr;position:relative}
.original-goc-screen .welcome-card:before{content:"";position:absolute;right:-130px;top:-130px;width:360px;height:360px;border-radius:50%;background:rgba(22,131,84,.10)}
.original-goc-screen .welcome-left{padding:54px 50px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
.original-goc-screen .kicker{display:inline-flex;width:max-content;align-items:center;gap:8px;border:1px solid #cce1d7;background:var(--green-50);color:var(--green-800);border-radius:999px;padding:8px 12px;font-size:13px;font-weight:800;margin-bottom:18px}
.original-goc-screen h1{font-size:48px;line-height:1.08;letter-spacing:-.9px;margin:0;color:var(--green-950)}
.original-goc-screen .lead{font-size:19px;color:#2c5144;margin:18px 0 0;max-width:720px}
.original-goc-screen .welcome-note{font-size:16px;color:#486358;margin:16px 0 0;max-width:720px}
.original-goc-screen .primary-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px}
.original-goc-screen .btn{border:0;border-radius:16px;padding:14px 18px;font-size:15px;font-weight:900;cursor:pointer;transition:.16s transform,.16s box-shadow,.16s background;min-height:48px}
.original-goc-screen .btn-primary{background:var(--green-800);color:#fff;box-shadow:0 12px 24px rgba(11,75,57,.18)}
.original-goc-screen .btn-primary:hover{background:var(--green-700);box-shadow:0 14px 28px rgba(11,75,57,.22)}
.original-goc-screen .small-line{font-size:13px;color:var(--muted)}
.original-goc-screen .welcome-right{padding:34px;display:flex;align-items:center;position:relative;z-index:1}
.original-goc-screen .journey-panel{width:100%;background:var(--green-900);border-radius:30px;color:#fff;padding:26px;box-shadow:0 22px 48px rgba(7,59,45,.22)}
.original-goc-screen .journey-panel h2{margin:0;font-size:25px;line-height:1.2;color:#fff}
.original-goc-screen .journey-panel p{margin:8px 0 20px;color:rgba(255,255,255,.78)}
.original-goc-screen .benefits{display:grid;gap:12px}
.original-goc-screen .benefit{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:15px;display:flex;gap:12px;align-items:flex-start}
.original-goc-screen .icon{width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:0 0 auto;font-weight:900;color:#dff3e8}
.original-goc-screen .benefit b{display:block;font-size:15px;margin-bottom:4px;color:#fff}
.original-goc-screen .benefit span{display:block;font-size:13px;color:rgba(255,255,255,.76)}
.original-goc-screen .bottom-note{margin-top:18px;background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.22);border-radius:18px;padding:12px 14px;font-size:13px;color:rgba(255,255,255,.80)}
.original-goc-screen .form-wrap{max-width:none;margin:0;padding-top:0}
.original-goc-screen .form-card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:32px;box-shadow:var(--shadow2);overflow:hidden}
.original-goc-screen .form-head{background:linear-gradient(135deg,var(--green-900),var(--green-700));color:#fff;padding:26px 28px}
.original-goc-screen .form-head .badge{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.20);color:#fff;margin-bottom:12px}
.original-goc-screen .form-head h2{margin:0;font-size:30px;line-height:1.18;color:#fff}
.original-goc-screen .form-head p{margin:10px 0 0;color:rgba(255,255,255,.80);font-size:15px;max-width:760px}
.original-goc-screen .form-body{padding:26px 28px 28px}
.original-goc-screen .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.original-goc-screen .field.full{grid-column:1/-1}
.original-goc-screen label{display:block;font-size:13px;font-weight:850;color:#25493c;margin:0 0 7px}
.original-goc-screen input,.original-goc-screen select{width:100%;border:1px solid #cfded6;background:#fff;border-radius:14px;padding:13px 13px;font-size:15px;color:var(--text);outline:none}
.original-goc-screen input:focus,.original-goc-screen select:focus{border-color:var(--green-600);box-shadow:0 0 0 4px rgba(22,131,84,.12)}
.original-goc-screen .help-box{margin-top:18px;background:var(--green-50);border:1px solid #d4e8dc;border-radius:18px;padding:14px;color:#3f6256;font-size:14px;display:flex;gap:10px;align-items:flex-start}
.original-goc-screen .help-box b{color:var(--green-900)}
.original-goc-screen .form-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.original-goc-screen .ghost-link{border:0;background:transparent;color:var(--green-800);font-weight:900;cursor:pointer;padding:10px 0}
.original-goc-screen .footer-note{text-align:center;color:var(--muted);font-size:12px;margin-top:16px}
@media(max-width:1100px){.original-goc-screen .welcome-card{grid-template-columns:1fr}.original-goc-screen .welcome-right{padding:0 26px 28px}.original-goc-screen h1{font-size:38px}.original-goc-screen .welcome-left{padding:38px 30px}.original-goc-screen .field-grid{grid-template-columns:1fr}}



/* PATCH UI POLISH 2026-06-26
   Rà lại toàn bộ card/form/câu hỏi/bài kiểm tra theo hướng chỉnh chu hơn.
   Chỉ sửa giao diện hiển thị, không đổi dữ liệu LESSONS và không đổi logic lưu app.js. */
:root{
  --phf-card-radius:20px;
  --phf-card-border:#d7eadf;
  --phf-card-bg:#ffffff;
  --phf-soft-bg:#f7fcf9;
  --phf-soft-green:#e9f7ef;
  --phf-ink:#063c2e;
  --phf-shadow-soft:0 12px 28px rgba(7,59,45,.055);
}

/* Làm tổng thể thoáng hơn */
.main{box-shadow:0 18px 46px rgba(7,59,45,.075)}
.focus-body{padding:28px 36px 32px}
.original-content{font-size:15px;line-height:1.62;color:#173b30}
.original-content h1,.original-content h2,.original-content h3,.original-content h4{letter-spacing:-.2px}

/* Chuẩn card nội dung dùng lại */
.learn-card,.info-card,.b4-card,.value-card,.late-card,.memory-card,
.note,.quick-item,.culture-item,.b4-list-item,.status-item,.progress-card,
.question-block,.quiz-card,.b4-quiz,.scenario,.callout,.b4-callout,.warning,.b4-safe,.test-note,.avoid-box,
.bluebox,.remember-box,.hero-card,.b4-note,.note-strip,.table-card,.table-wrap,.b4-table-wrap{
  border-color:var(--phf-card-border)!important;
  border-radius:var(--phf-card-radius)!important;
  box-shadow:var(--phf-shadow-soft);
}
.learn-card,.info-card,.b4-card,.value-card,.late-card,.memory-card{
  padding:18px!important;background:linear-gradient(180deg,#fff,#fbfefc)!important;
}
.learn-card h4,.info-card h4,.b4-card h4,.value-card h4,.late-card strong{
  margin-top:0;color:var(--phf-ink);font-size:16px;line-height:1.35
}
.learn-card p,.info-card p,.b4-card p,.value-card p,.late-card p{color:#36594d;margin-bottom:0}

/* Các card kiểu số thứ tự/module: giảm nặng khối xanh, cân lại tỷ lệ */
.row-card,.mini-summary .row-card{
  grid-template-columns:104px minmax(0,1fr)!important;
  align-items:center!important;
  gap:18px!important;
  padding:16px!important;
  border-color:var(--phf-card-border)!important;
  background:linear-gradient(180deg,#fff,#fbfefc)!important;
  border-radius:22px!important;
  box-shadow:var(--phf-shadow-soft);
}
.row-label{
  min-height:76px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  border-radius:17px!important;
  padding:12px 10px!important;
  font-size:13px!important;
  letter-spacing:.1px;
  background:linear-gradient(145deg,#064533,#0b6b48)!important;
}
.row-label .phf-label-top{font-size:11px;font-weight:900;opacity:.86;text-transform:uppercase;letter-spacing:.4px}
.row-label .phf-label-main{font-size:15px;font-weight:950;line-height:1.15;margin-top:3px}
.row-card b,.row-card strong{color:var(--phf-ink);font-size:16px;line-height:1.35;display:block;margin-bottom:6px}
.row-card p,.row-card div:not(.row-label){color:#385b50;line-height:1.55}

/* Sidebar trái */
.todo-panel{padding:16px;background:rgba(255,255,255,.92)}
.todo-item{
  border-radius:18px!important;
  padding:11px 12px!important;
  gap:10px!important;
  background:linear-gradient(180deg,#fff,#f9fdfb)!important;
  border-color:#d8eadf!important;
  box-shadow:0 8px 18px rgba(7,59,45,.035);
}
.todo-item:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(7,59,45,.07)}
.todo-item.active{background:linear-gradient(145deg,#064533,#0a5c42)!important;color:#fff!important;box-shadow:0 14px 30px rgba(6,69,51,.18)}
.todo-item.done{background:#edf9f2!important;border-color:#bee3c9!important}
.todo-item b{font-size:13.5px!important;line-height:1.32}.todo-item span{font-size:11.5px!important;line-height:1.35}.mark{font-weight:950}

/* Right panel */
.right-panel{background:rgba(255,255,255,.94)}
.progress-card{padding:16px!important;background:linear-gradient(180deg,#fff,#f7fcf9)!important}
.progress-num{font-size:34px!important;letter-spacing:-.7px}.status-list{gap:10px!important}.status-item{padding:12px!important;background:#fbfefc!important}.status-item b{font-size:12.2px!important;letter-spacing:.1px}.status-item span{line-height:1.55!important}

/* Phase strip */
.phase{border-radius:18px!important;transition:.15s ease;box-shadow:0 8px 18px rgba(7,59,45,.025)}
.phase:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(7,59,45,.07)}
.phase.active{box-shadow:0 14px 28px rgba(6,69,51,.18)}
.phase.done{border-color:#b8e0c4!important;background:linear-gradient(180deg,#eaf8ee,#f7fcf9)!important}

/* Form/input/textarea trong nội dung gốc: chống vỡ layout */
.original-content input:not([type="radio"]):not([type="checkbox"]),
.original-content select,
.original-content textarea,
.phf-control{
  max-width:100%;
  min-height:40px;
  border:1px solid #cddfd6!important;
  background:#fff!important;
  border-radius:12px!important;
  padding:9px 11px!important;
  color:#173b30;
  outline:none;
  margin:4px 6px 8px 4px;
  box-shadow:0 5px 14px rgba(7,59,45,.035);
}
.original-content input:not([type="radio"]):not([type="checkbox"]):focus,
.original-content select:focus,
.original-content textarea:focus{
  border-color:#168354!important;box-shadow:0 0 0 4px rgba(22,131,84,.12)!important;
}
.original-content textarea,.phf-textarea{
  display:block!important;
  width:100%!important;
  min-height:104px!important;
  resize:vertical;
  margin-top:8px!important;
}
.original-content label{font-weight:750;color:#284d40;line-height:1.6}
.original-content input[type="checkbox"],.original-content input[type="radio"]{width:17px;height:17px;margin-right:8px;vertical-align:-3px;accent-color:#0b6b48}

/* Góp ý/form checkboxes */
.original-content .phf-form-polished,
.original-content form,
.original-content .form-card,
.original-content .field-grid{
  border-radius:20px;
}
.phf-feedback-card{border:1px solid var(--phf-card-border);background:#fbfefc;border-radius:20px;padding:16px;margin:16px 0;box-shadow:var(--phf-shadow-soft)}
.phf-feedback-card .phf-feedback-title{font-weight:900;color:var(--phf-ink);margin-bottom:5px}.phf-feedback-card .phf-feedback-help{font-size:13px;color:#5b7169;margin-bottom:12px}

/* Câu hỏi/Bài kiểm tra: card câu hỏi + đáp án dọc */
.step2-question,.question-block,.quiz-card,.b4-quiz{
  border:1px solid #d5eadf!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#fff,#fbfefc)!important;
  padding:16px 18px!important;
  margin:14px 0!important;
  box-shadow:0 10px 24px rgba(7,59,45,.045);
}
.step2-question > b,.question-block > b,.quiz-card > b,.b4-quiz > b{
  display:block;color:var(--phf-ink);font-size:15.5px;line-height:1.45;margin-bottom:10px
}
.phf-quiz-option{
  display:flex!important;
  align-items:flex-start;
  gap:9px;
  width:100%;
  border:1px solid #dbeae2;
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  margin:8px 0;
  color:#264a3e;
  line-height:1.45;
  cursor:pointer;
  transition:.14s ease;
}
.phf-quiz-option:hover{border-color:#a8d5b9;background:#f5fbf7}
.phf-quiz-option.is-selected{border-color:#0b6b48;background:#eef9f2;box-shadow:0 0 0 3px rgba(22,131,84,.08)}
.phf-quiz-option input{flex:0 0 auto;margin-top:2px!important}
#step2TestResult,.test-result-box,.quiz-result,.b2-result,.b3-result{
  border:1px solid #d2e7dc;
  background:#f7fcf9;
  border-radius:18px;
  padding:14px 16px;
  margin-top:14px;
  line-height:1.55;
}
.phf-answer-reference{
  position:relative;
  background:#fffaf0!important;
  border-color:#efd99b!important;
}
.phf-answer-reference:before{
  content:'Câu hỏi ôn nhanh · cần chuẩn hóa thành quiz tương tác';
  display:inline-flex;
  border-radius:999px;
  padding:5px 9px;
  background:#fff4d7;
  color:#7a4b00;
  font-weight:900;
  font-size:11.5px;
  margin-bottom:8px;
}

/* Tables */
.table-card{overflow:hidden!important;background:#fff!important}.table-title{background:linear-gradient(145deg,#064533,#0b6b48)!important;color:#fff!important;padding:13px 16px!important}th{background:#0b4b39!important;color:#fff!important;padding:11px 12px!important}td{padding:11px 12px!important;line-height:1.55}

/* Details/summary */
details,.phf-details-card{border-radius:20px!important;background:#fbfefc!important;border-color:#d7eadf!important;box-shadow:var(--phf-shadow-soft)}
summary{padding:2px 0;font-size:14px}

/* Buttons */
.btn{min-height:46px;border-radius:999px!important;box-shadow:0 8px 18px rgba(7,59,45,.05)}
.btn-primary{box-shadow:0 12px 26px rgba(6,69,51,.18)}
.btn:hover{transform:translateY(-1px)}

/* Quản trị button bớt lấn thiết kế */
#phfAdminTestBox{opacity:.88;transform:scale(.96);transform-origin:right bottom}#phfAdminTestBox:hover{opacity:1;transform:scale(1)}

@media(max-width:900px){
  .row-card{grid-template-columns:1fr!important}.row-label{min-height:auto!important;align-items:flex-start!important}.focus-body{padding:22px}.phf-quiz-option{padding:10px}
}



/* PATCH UI REVIEW FIX 2026-06-26
   Rà lại các ô/card/form/quiz/evaluation theo note cuối: tăng tương phản, chuẩn hóa quiz, form đánh giá, bảng tổng hợp và in kết quả. */
:root{
  --phf-surface:#ffffff;
  --phf-surface-2:#f2faf5;
  --phf-border-strong:#b9ddca;
  --phf-shadow-card:0 18px 42px rgba(7,59,45,.09);
  --phf-shadow-panel:0 20px 56px rgba(7,59,45,.13);
  --phf-gold:#8a5a05;
  --phf-gold-bg:#fff8e8;
}

/* 1) Thanh giai đoạn không bị trắng/chìm */
.phase-strip{
  background:linear-gradient(180deg,#ffffff,#f6fbf8)!important;
  border:1px solid #c7e0d3!important;
  box-shadow:0 18px 44px rgba(7,59,45,.105)!important;
  padding:11px!important;
  gap:10px!important;
}
.phase{
  background:linear-gradient(180deg,#fbfffd,#f0f8f3)!important;
  border:1px solid #c9e4d5!important;
  box-shadow:0 10px 22px rgba(7,59,45,.055)!important;
  transition:.16s transform,.16s box-shadow,.16s border-color,.16s background;
}
.phase:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(7,59,45,.09)!important;border-color:#9fcfb8!important}
.phase.done{background:linear-gradient(180deg,#eef9f2,#e3f4ea)!important;border-color:#9ed2b4!important}
.phase.active{background:linear-gradient(135deg,#053b2d,#075c42)!important;border-color:#053b2d!important;box-shadow:0 16px 34px rgba(5,69,51,.22)!important}
.phase-state{background:#e4efe9!important;color:#315448!important;border:1px solid #d2e5db!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
.phase.done .phase-state{background:#d7f0df!important;color:#07573d!important;border-color:#b7ddc6!important}
.phase.active .phase-state{background:rgba(255,255,255,.18)!important;color:#fff!important;border-color:rgba(255,255,255,.20)!important}
.phase-title{font-size:15px!important;letter-spacing:-.1px}.phase-date{font-weight:800!important}

/* 2) Context bar và pill nổi hơn */
.context-bar{
  background:linear-gradient(180deg,#ffffff,#f8fdfa)!important;
  border:1px solid #bdddc9!important;
  border-left:7px solid #087049!important;
  box-shadow:0 16px 36px rgba(7,59,45,.095)!important;
}
.context-action{
  background:#eef9f3!important;
  border:1px solid #b8dcc9!important;
  color:#064533!important;
  box-shadow:0 8px 18px rgba(7,59,45,.06)!important;
}
.focus-head .chip{
  background:rgba(255,255,255,.18)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.10)!important;
}
.focus-head .chip *{color:inherit!important}

/* 3) Sidebar và right panel rõ khối hơn */
.todo-panel,.right-panel{
  background:linear-gradient(180deg,#ffffff,#f7fcf9)!important;
  border-color:#c4dfcf!important;
  box-shadow:0 18px 44px rgba(7,59,45,.10)!important;
}
.todo-item{
  background:linear-gradient(180deg,#ffffff,#f4fbf7)!important;
  border-color:#c7e3d2!important;
  box-shadow:0 7px 16px rgba(7,59,45,.045)!important;
}
.todo-item.done{background:linear-gradient(180deg,#edf9f2,#e5f5eb)!important;border-color:#a9d7bc!important}
.todo-item.active{background:linear-gradient(135deg,#064533,#075f43)!important;border-color:#064533!important;box-shadow:0 14px 30px rgba(5,69,51,.20)!important}
.status-item,.progress-card{background:linear-gradient(180deg,#ffffff,#f6fcf8)!important;border-color:#c5dfd0!important;box-shadow:0 10px 22px rgba(7,59,45,.065)!important}
.progress-card{padding:18px!important}.progress-num{font-size:36px!important}.bar{height:10px!important}

/* 4) Card số/module/phẩm chất: bớt cục xanh, dễ quét mắt */
.row-card,.mini-summary .row-card,.b4-list-item,.quick-item,.note,.culture-item{
  background:linear-gradient(180deg,#fff,#fbfefc)!important;
  border:1px solid #cce4d7!important;
  box-shadow:0 12px 26px rgba(7,59,45,.065)!important;
}
.row-label{
  min-width:88px!important;
  min-height:70px!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#064533,#0b6b48)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 20px rgba(5,69,51,.14)!important;
}
.row-card h3,.row-card h4,.quick-item b,.note b{color:#053f31!important;margin-top:0!important}

/* 5) Chuẩn hóa câu hỏi/bài kiểm tra: mỗi câu thành card, đáp án dọc, không còn dính hàng */
.phf-quiz-clean,.step2-question,.question-block,.quiz-card,.b4-quiz{
  background:linear-gradient(180deg,#ffffff,#fffdf7)!important;
  border:1px solid #ead8a8!important;
  border-radius:22px!important;
  padding:20px 22px!important;
  margin:18px 0!important;
  box-shadow:0 14px 30px rgba(138,90,5,.065)!important;
}
.phf-quiz-clean .phf-question-title,
.step2-question>strong:first-child,.question-block>strong:first-child,.quiz-card>strong:first-child,.b4-quiz>strong:first-child{
  display:block!important;color:#064533!important;font-size:17px!important;line-height:1.42!important;margin:0 0 12px!important;
}
.phf-quiz-option{
  display:flex!important;align-items:flex-start!important;gap:10px!important;width:100%!important;
  border:1px solid #d6e5dc!important;background:#fbfefc!important;border-radius:15px!important;
  padding:11px 13px!important;margin:8px 0!important;color:#29483d!important;font-weight:650!important;line-height:1.45!important;
  cursor:pointer;transition:.14s border-color,.14s background,.14s transform,.14s box-shadow;
}
.phf-quiz-option:hover{border-color:#9bcdb2!important;background:#f2fbf6!important;box-shadow:0 7px 15px rgba(7,59,45,.045)!important}
.phf-quiz-option.is-selected{border-color:#0b6b48!important;background:#eaf8ee!important;box-shadow:0 8px 18px rgba(11,107,72,.10)!important}
.phf-quiz-option input[type="radio"]{margin-top:3px!important;flex:0 0 auto;accent-color:#0b6b48;transform:scale(1.08)}
.phf-answer-reference{
  background:linear-gradient(180deg,#fffaf0,#fff7e3)!important;border:1px solid #ead19a!important;position:relative;
}
.phf-answer-reference:before{
  content:'Ôn nhanh · đáp án đang hiển thị sẵn';display:inline-flex;margin:0 0 12px;padding:6px 10px;border-radius:999px;
  background:#fff1cc;color:#745111;font-size:12px;font-weight:900;border:1px solid #edd599;
}

/* 6) Form góp ý/đánh giá: chống vỡ layout, đồng bộ input */
.original-content form,.phf-eval-form,.phf-form-polished,.original-content:has(textarea){
  background:linear-gradient(180deg,#fff,#fbfefc)!important;border:1px solid #cde5d8!important;border-radius:22px!important;
  padding:18px!important;margin:16px 0!important;box-shadow:0 12px 26px rgba(7,59,45,.06)!important;
}
.original-content label{font-weight:800;color:#24493d;margin:0 0 6px;display:inline-block}
.phf-control,.original-content input:not([type="radio"]):not([type="checkbox"]),.original-content select,.original-content textarea{
  width:100%!important;max-width:100%!important;min-height:42px!important;border:1px solid #bfd9cc!important;border-radius:13px!important;
  background:#fff!important;padding:10px 12px!important;color:#18372d!important;outline:none!important;margin:4px 0 10px!important;
}
.original-content textarea,.phf-textarea{min-height:96px!important;resize:vertical!important;display:block!important}
.original-content input:focus,.original-content select:focus,.original-content textarea:focus{border-color:#0b6b48!important;box-shadow:0 0 0 4px rgba(11,107,72,.10)!important}
.original-content input[type="checkbox"]{accent-color:#0b6b48;margin:0 8px 0 0!important;transform:scale(1.08)}
.phf-check-list{display:grid!important;gap:10px!important;margin:12px 0!important}
.phf-check-option{display:flex!important;align-items:flex-start!important;gap:9px!important;padding:11px 12px!important;border:1px solid #d3e7dc!important;border-radius:14px!important;background:#fbfefc!important;color:#29483d!important;font-weight:650!important}

/* 7) GĐ5 đánh giá: mẫu đàng hoàng hơn, bảng tổng hợp và in */
.phf-eval-page .original-content{overflow:visible!important}
.phf-eval-page .table-card,.phf-eval-page .table-wrap,.phf-eval-page .b4-table-wrap{
  border:1px solid #bfdccc!important;border-radius:22px!important;background:#fff!important;box-shadow:0 14px 30px rgba(7,59,45,.075)!important;overflow:hidden!important;
}
.phf-eval-page .table-title{background:linear-gradient(135deg,#064533,#0b6b48)!important;color:#fff!important;padding:14px 16px!important;font-size:15px!important}
.phf-eval-page table{font-size:14px!important;background:#fff!important}
.phf-eval-page th{background:#eaf7ef!important;color:#064533!important;border-bottom:1px solid #c8e1d3!important;font-weight:900!important}
.phf-eval-page td{border-top:1px solid #e1eee7!important;padding:11px 12px!important;vertical-align:top!important}
.phf-eval-page tr:nth-child(even) td{background:#fbfefc!important}
.sig-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin:18px 0!important}
.sig{border:1px solid #cde4d8!important;border-radius:16px!important;background:#fff!important;min-height:96px!important;padding:14px!important;text-align:center!important;color:#35594d!important}
.sig b{display:block;color:#064533!important;margin-bottom:24px!important}
.phf-print-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin:16px 0;padding:12px;border:1px dashed #c7dfd1;background:#f8fcfa;border-radius:16px}
.phf-print-btn{border:0;border-radius:999px;padding:11px 16px;background:#064533;color:#fff;font-weight:900;cursor:pointer;box-shadow:0 10px 22px rgba(5,69,51,.18)}
.phf-print-hint{font-size:12px;color:#536d62;font-weight:700;margin-right:auto}

@media print{
  body{background:#fff!important;color:#111!important;font-size:12px!important}
  .topbar,.phase-strip,.context-bar,.todo-panel,.right-panel,.actions,#phfLocalSaveBadge,#phfAdminTestBox,.phf-print-actions{display:none!important}
  .app{max-width:none!important;padding:0!important}.layout{display:block!important}.main{box-shadow:none!important;border:0!important;border-radius:0!important}
  .focus-head{background:#fff!important;color:#111!important;border-bottom:2px solid #064533!important;padding:0 0 12px!important}.focus-head h2{color:#064533!important;font-size:22px!important}.focus-head p,.focus-head .chip{color:#333!important;background:#fff!important;border:0!important;padding:0!important}
  .focus-body{padding:0!important}.today-box,.remember,.sample-box{display:none!important}.original{border:0!important;padding:0!important}.original details{border:0!important;padding:0!important;background:#fff!important}.original details summary{display:none!important}.original details[open] .original-content,.original-content{display:block!important}
  .table-card,.table-wrap,.b4-table-wrap{break-inside:avoid!important;box-shadow:none!important;border:1px solid #999!important}.table-title{background:#eee!important;color:#111!important}th{background:#eee!important;color:#111!important}td,th{border:1px solid #ccc!important}
}

/* PATCH GỌN - Kiểm tra Bước 3 theo mẫu chính thức */
.b3-test .b3-mini {
  background:#fffdf7 !important;
  border:1px solid #ead8a8 !important;
  border-radius:22px !important;
  padding:24px 26px !important;
  margin:20px 0 !important;
}

.b3-test .b3-mini strong {
  display:block !important;
  margin-bottom:16px !important;
  color:#063c2e !important;
  font-size:17px !important;
  line-height:1.45 !important;
}

.b3-test .b3-mini label {
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-height:52px !important;
  background:#fbfefc !important;
  border:1px solid #d8eadf !important;
  border-radius:14px !important;
  padding:12px 18px !important;
  margin:10px 0 !important;
  font-weight:800 !important;
  cursor:pointer !important;
}

.b3-test .b3-mini input[type="radio"] {
  flex:0 0 auto !important;
  width:20px !important;
  height:20px !important;
  margin:0 !important;
  accent-color:#0b6b48;
}

.b3-test .b3-mini label:hover {
  background:#f3fbf6 !important;
  border-color:#a9d7bc !important;
}


/* PATCH B3 RESULT/ACTIONS - đồng bộ nút chấm điểm và khu kết quả */
.b3-test-actions,
.phf-test-actions {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  align-items:center !important;
  justify-content:flex-end !important;
  margin-top:18px !important;
  padding-top:16px !important;
  border-top:1px solid #e1eee7 !important;
}

.b3-test-actions .btn,
.phf-test-actions .btn {
  min-height:46px !important;
  border-radius:999px !important;
  padding:12px 18px !important;
  font-weight:900 !important;
}

.b3-result,
#b3Result {
  margin-top:16px !important;
  border-radius:18px !important;
  padding:15px 16px !important;
  border:1px solid #cfe4d8 !important;
  background:#f7fcf9 !important;
  color:#24493d !important;
  font-weight:700 !important;
  line-height:1.55 !important;
}

.b3-result:empty,
#b3Result:empty {
  display:none !important;
}

.b3-result.pass {
  border-color:#9ed2b4 !important;
  background:#eef9f2 !important;
}

.b3-result.fail {
  border-color:#efc0b7 !important;
  background:#fff7f4 !important;
}

.b3-test .b3-mini.b3-correct {
  border-color:#8ccfa2 !important;
  background:#f0fbf4 !important;
}

.b3-test .b3-mini.b3-incorrect {
  border-color:#efb4a8 !important;
  background:#fff7f4 !important;
}

.b3-test .b3-mini label:has(input[type="radio"]:checked) {
  background:#eef9f2 !important;
  border-color:#0b6b48 !important;
  box-shadow:0 0 0 3px rgba(11,107,72,.08) !important;
}


/* PATCH BƯỚC 4 - bài kiểm tra cuối không lộ đáp án */
.b4-final-test .test-intro{
  background:#f7fcf9!important;border:1px solid #cfe4d8!important;border-radius:20px!important;padding:16px 18px!important;margin:16px 0!important;
}
.b4-final-test .test-section-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:18px 0 8px}
.b4-final-test .test-section-head h3{margin:0;color:#064533;font-size:20px}
.b4-final-test .test-section-head span{background:#eef9f3;border:1px solid #cfe4d8;color:#064533;border-radius:999px;padding:6px 10px;font-weight:900;font-size:12px;white-space:nowrap}
.b4-final-test .section-desc{color:#536d62;font-weight:650;margin:0 0 14px}
.b4-final-test .b4-quiz{
  background:#fffdf7!important;border:1px solid #ead8a8!important;border-radius:22px!important;padding:22px 24px!important;margin:18px 0!important;box-shadow:none!important;
}
.b4-final-test .b4-quiz h4{margin:0 0 16px!important;color:#063c2e!important;font-size:17px!important;line-height:1.45!important}
.b4-final-test .b4-quiz .answer-choice{
  display:flex!important;align-items:center!important;gap:14px!important;min-height:52px!important;background:#fbfefc!important;border:1px solid #d8eadf!important;border-radius:14px!important;padding:12px 18px!important;margin:10px 0!important;font-weight:800!important;color:#24493d!important;cursor:pointer!important;
}
.b4-final-test .b4-quiz .answer-choice:hover{background:#f3fbf6!important;border-color:#a9d7bc!important}
.b4-final-test .b4-quiz input[type="radio"]{width:20px!important;height:20px!important;margin:0!important;accent-color:#0b6b48!important;flex:0 0 auto!important}
.b4-final-test .b4-quiz.b4-correct{border-color:#8ccfa2!important;background:#f0fbf4!important}
.b4-final-test .b4-quiz.b4-incorrect{border-color:#efb4a8!important;background:#fff7f4!important}
.b4-result{display:none;margin:18px 0!important}
.b4-result.pass,.b4-result.fail{display:block!important;background:#f7fcf9!important;border:1px solid #cfe4d8!important;border-radius:18px!important;padding:14px 16px!important;color:#24493d!important;font-weight:700!important}
.b4-result.fail{background:#fff7f4!important;border-color:#efb4a8!important}
.phf-test-actions{display:flex;gap:12px;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin:18px 0 6px;padding-top:16px;border-top:1px solid #edf3f0}


/* PATCH TIMELINE 2 THÁNG - hiển thị mốc giai đoạn theo ngày bắt đầu học */
.phase-date small{display:block;font-size:11px;color:inherit;opacity:.82;font-weight:800;margin-top:2px}
.phase.calendar-now:not(.active){border-color:#0b6b48!important;box-shadow:0 0 0 3px rgba(11,107,72,.08),0 12px 24px rgba(7,59,45,.08)!important}
.timeline-note{margin-top:10px;background:#f8fcfa;border:1px solid #cfe4d8;border-radius:16px;padding:12px 14px;color:#35594d;font-size:13px;line-height:1.55}
.timeline-note b{color:#064533}


/* PATCH KHÓA THỜI GIAN & HỒ SƠ ĐÁNH GIÁ */
.phf-lock-panel{background:#fffdf7;border:1px solid #ead8a8;border-radius:24px;padding:24px 26px;margin:6px 0 18px;color:#36594d;box-shadow:0 12px 28px rgba(138,90,5,.06)}
.phf-lock-panel .lock-badge{display:inline-flex;border-radius:999px;background:#fff1cc;border:1px solid #ead19a;color:#745111;padding:6px 10px;font-size:12px;font-weight:900;margin-bottom:12px}
.phf-lock-panel h3{margin:0 0 10px;color:#064533;font-size:22px}.phf-lock-panel p{margin:8px 0;font-weight:650;line-height:1.6}.phf-lock-panel .lock-date{font-weight:950;color:#064533}.phf-lock-panel ul{margin:12px 0 0;padding-left:20px}
.phf-eval-entry{margin-top:14px;border-top:1px solid #e1eee7;padding-top:14px}.phf-eval-entry .btn{width:100%;justify-content:center}
.eval-hub{padding:26px 34px 32px}.eval-hub-head{background:linear-gradient(135deg,#043728,#0b6b48);color:#fff;border-radius:24px;padding:24px;margin-bottom:16px}.eval-hub-head h2{color:#fff;margin:0 0 8px;font-size:30px}.eval-hub-head p{margin:0;color:rgba(255,255,255,.82);font-weight:650}
.eval-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}.eval-card{border:1px solid #cfe4d8;background:#fbfefc;border-radius:20px;padding:16px;box-shadow:0 10px 22px rgba(7,59,45,.055)}.eval-card h3{margin:0 0 8px;color:#064533;font-size:18px}.eval-card p{margin:0 0 12px;color:#536d62;font-weight:650}.eval-card .btn{margin-top:8px}.eval-status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}.eval-status .status-item{background:#fff!important}

/* PATCH PHF - Phiếu đánh giá tuần */
.weekly-eval-shell{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start;margin-top:18px}.weekly-left,.weekly-form{background:#fff;border:1px solid #d8eadf;border-radius:22px;padding:18px;box-shadow:0 14px 30px rgba(7,59,45,.07)}.weekly-left h3,.weekly-form h3{margin:0 0 10px;color:#064533}.learner-mini{display:grid;gap:8px;margin:12px 0}.learner-mini div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #eef5f0;padding:8px 0;font-size:13px}.learner-mini b{color:#536d62}.learner-mini span{text-align:right;font-weight:800;color:#173b2e}.weekly-list{display:grid;gap:8px;margin-top:12px}.weekly-item{border:1px solid #d8eadf;border-radius:16px;background:#fbfefc;padding:12px;text-align:left;cursor:pointer;font-family:inherit}.weekly-item:hover{border-color:#0b6b48;box-shadow:0 8px 18px rgba(7,59,45,.08)}.weekly-item.active{background:#eaf7ef;border-color:#0b6b48}.weekly-item b{display:block;color:#064533}.weekly-item span{display:block;color:#5c7268;font-size:12px;font-weight:700;margin-top:3px}.weekly-pill{display:inline-flex;margin-top:8px;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:900;background:#eef5f0;color:#536d62}.weekly-pill.due{background:#fff3d8;color:#8a5a00}.weekly-pill.overdue{background:#ffe5e5;color:#a01f1f}.weekly-pill.done{background:#e6f7ea;color:#0a6b37}.weekly-help{background:#f6fbf8;border:1px dashed #bddbc9;border-radius:16px;padding:12px;color:#536d62;font-size:13px;font-weight:650;line-height:1.55}.weekly-form-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid #e4f0e9;padding-bottom:14px;margin-bottom:14px}.weekly-form-head .meta{color:#536d62;font-weight:700;font-size:13px}.criteria-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}.criteria-card{border:1px solid #e0eee6;border-radius:16px;padding:12px;background:#fbfefc}.criteria-card b{display:block;color:#064533;margin-bottom:8px}.criteria-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.criteria-options label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:750;color:#345247;border:1px solid #e4f0e9;border-radius:999px;padding:7px 9px;background:#fff}.weekly-text-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.weekly-field{display:grid;gap:7px}.weekly-field label{font-weight:900;color:#064533;font-size:13px}.weekly-field input,.weekly-field textarea{border:1px solid #cfe4d8;border-radius:14px;padding:10px 12px;font-family:inherit;font-size:14px}.weekly-field textarea{min-height:90px;resize:vertical}.weekly-save-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}.weekly-save-note{font-weight:800;color:#536d62;font-size:13px}.weekly-eval-table{width:100%;border-collapse:collapse;margin-top:12px;background:#fff;border-radius:16px;overflow:hidden;border:1px solid #d8eadf}.weekly-eval-table th,.weekly-eval-table td{padding:10px;border-bottom:1px solid #edf5ef;text-align:left;font-size:13px}.weekly-eval-table th{background:#eaf7ef;color:#064533}.weekly-eval-table td{color:#345247}.weekly-months{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.weekly-month-card{border:1px solid #d8eadf;border-radius:16px;background:#fff;padding:12px}.weekly-month-card b{display:block;color:#064533}.weekly-month-card span{display:block;font-size:12px;color:#5c7268;font-weight:750;margin-top:5px}@media(max-width:1000px){.weekly-eval-shell{grid-template-columns:1fr}.criteria-grid,.weekly-text-grid,.weekly-months{grid-template-columns:1fr}}

@media(max-width:900px){.eval-grid,.eval-status{grid-template-columns:1fr}.eval-hub{padding:20px}}


/* PHF custom operation feedback */
.phf-toast-wrap{position:fixed;right:20px;bottom:20px;z-index:999999;display:flex;flex-direction:column;gap:10px;max-width:360px;pointer-events:none}
.phf-toast{background:#fff;color:#173c2f;border:1px solid #cfe5d9;border-left:5px solid #0b6b4b;border-radius:16px;box-shadow:0 18px 48px rgba(13,62,46,.18);padding:12px 14px;font:600 13px Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;line-height:1.45;pointer-events:auto;transform:translateY(8px);opacity:0;animation:phfToastIn .18s ease forwards}
.phf-toast b{display:block;font-size:14px;margin-bottom:2px;color:#064533}.phf-toast small{display:block;color:#587066;font-weight:600}.phf-toast.success{border-left-color:#0b7a4b}.phf-toast.error{border-left-color:#b42318}.phf-toast.warning{border-left-color:#b7791f}.phf-toast.info{border-left-color:#1769aa}
@keyframes phfToastIn{to{transform:translateY(0);opacity:1}}
.phf-modal-backdrop{position:fixed;inset:0;z-index:999998;background:rgba(8,32,25,.45);display:none;align-items:center;justify-content:center;padding:20px}
.phf-modal-backdrop.show{display:flex}.phf-modal{width:min(520px,92vw);background:#fff;border-radius:24px;border:1px solid #cfe5d9;box-shadow:0 24px 70px rgba(8,48,36,.28);padding:22px;color:#143b2d}.phf-modal h3{margin:0 0 8px;font-size:20px;color:#064533}.phf-modal p{margin:0 0 18px;color:#405f53;line-height:1.55}.phf-modal-actions{display:flex;justify-content:flex-end;gap:10px}.phf-btn-loading{opacity:.72;pointer-events:none;position:relative}.phf-btn-loading::after{content:'';display:inline-block;width:12px;height:12px;margin-left:8px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;vertical-align:-2px;animation:phfSpin .75s linear infinite}@keyframes phfSpin{to{transform:rotate(360deg)}}


/* PATCH: Ôn nhanh cuối Ngày 1 · Buổi chiều */
.phf-lite-quiz{display:grid;gap:14px;margin-top:4px}.phf-quiz-question{border:1px solid var(--line);background:#fff;border-radius:20px;padding:16px;box-shadow:0 8px 20px rgba(7,59,45,.04)}.phf-quiz-question h4{margin:0 0 10px;color:var(--green-900);font-size:17px;line-height:1.35}.phf-quiz-question label{display:block;border:1px solid #d8eadf;background:#fbfefc;border-radius:14px;padding:10px 12px;margin:8px 0;cursor:pointer;color:#183d30;font-size:14px;line-height:1.45}.phf-quiz-question label:hover{background:#f2faf5}.phf-quiz-question input{width:auto;margin-right:8px;accent-color:#064533}.phf-quiz-question.correct{border-color:#84c99e;background:#f0faf4}.phf-quiz-question.wrong{border-color:#efc4b8;background:#fff6f4}.phf-quiz-explain{display:none;margin-top:10px;border-radius:14px;padding:11px 12px;background:#f7fbf9;border:1px solid #cfe4d8;color:#315246;font-size:14px;line-height:1.45}.phf-quiz-question.wrong .phf-quiz-explain,.phf-quiz-question.correct .phf-quiz-explain{display:block}.phf-quiz-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}.phf-quiz-result{display:none;border-radius:18px;padding:14px;border:1px solid #cfe4d8;background:#f4fbf7;color:#064533;font-weight:800}.phf-quiz-result.show{display:block}


/* PATCH: Hồ sơ đánh giá - tách quyền xem/sửa và mẫu xem phiếu chỉnh chu */
.eval-role-note{background:#f6fbf8;border:1px solid #cfe4d8;border-radius:18px;padding:13px 14px;color:#405b51;font-size:13px;font-weight:650;line-height:1.55;margin:12px 0}

.eval-learner-picker{background:#fff;border:1px solid #cfe4d8;border-radius:18px;padding:13px 14px;margin:12px 0;display:grid;gap:8px;box-shadow:0 10px 22px rgba(7,59,45,.045)}
.eval-learner-picker label{font-size:12px;font-weight:950;color:#064533;text-transform:uppercase;letter-spacing:.2px}
.eval-learner-picker select{width:100%;border:1px solid #cfe4d8;border-radius:14px;padding:10px 12px;background:#fff;color:#173b30;font-weight:750;outline:none}
.eval-learner-picker select:focus{border-color:#0b6b48;box-shadow:0 0 0 4px rgba(22,131,84,.12)}
.eval-learner-picker .help{color:#536d62;font-size:12px;font-weight:650;line-height:1.45}
.eval-mini-role{display:inline-flex;border-radius:999px;background:#eef7f2;border:1px solid #d4e9dd;color:#064533;font-size:11px;font-weight:950;padding:5px 8px;margin-top:6px}
.weekly-item{display:block;width:100%;border:1px solid #d8eadf;border-radius:18px;background:#fbfefc;padding:12px;text-align:left;font-family:inherit;margin-bottom:9px;box-shadow:0 8px 18px rgba(7,59,45,.04)}
.weekly-item.active{background:#eaf7ef;border-color:#0b6b48;box-shadow:0 12px 24px rgba(7,59,45,.08)}
.weekly-item-head{cursor:pointer}.weekly-item b{display:block;color:#064533}.weekly-item span{display:block;color:#5c7268;font-size:12px;font-weight:700;margin-top:3px}
.weekly-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.weekly-action-btn{border:1px solid #cfe4d8;background:#fff;color:#064533;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900;cursor:pointer}.weekly-action-btn.primary{background:#064533;color:#fff;border-color:#064533}.weekly-action-btn:disabled{opacity:.55;cursor:not-allowed}
.eval-view-card{background:#fff;border:1px solid #d8eadf;border-radius:24px;padding:22px;box-shadow:0 16px 36px rgba(7,59,45,.08)}
.eval-view-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid #e4f0e9;padding-bottom:14px;margin-bottom:16px}.eval-view-top h3{margin:0 0 6px;color:#064533;font-size:24px}.eval-view-top p{margin:0;color:#536d62;font-weight:650}.eval-view-badge{display:inline-flex;border-radius:999px;padding:8px 11px;font-size:12px;font-weight:950;background:#eaf7ef;color:#075c42;border:1px solid #bfe3ca;white-space:nowrap}
.eval-view-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}.eval-view-meta div{background:#f8fcfa;border:1px solid #d8eadf;border-radius:15px;padding:11px}.eval-view-meta b{display:block;color:#536d62;font-size:12px;margin-bottom:3px}.eval-view-meta span{display:block;color:#173b30;font-weight:850}
.eval-view-table{width:100%;border-collapse:separate;border-spacing:0;margin:14px 0;border:1px solid #d8eadf;border-radius:18px;overflow:hidden}.eval-view-table th{background:#eaf7ef!important;color:#064533!important;font-size:13px}.eval-view-table th,.eval-view-table td{padding:11px 12px;border-bottom:1px solid #edf5ef;text-align:left}.eval-view-table tr:last-child td{border-bottom:0}.eval-view-table td{font-size:13px;color:#345247;background:#fff}.eval-level{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900;background:#eef5f0;color:#405b51}.eval-level.good{background:#e6f7ea;color:#0a6b37}.eval-level.watch{background:#fff3d8;color:#8a5a00}.eval-level.risk{background:#ffe5e5;color:#a01f1f}
.eval-view-sections{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.eval-view-section{background:#fbfefc;border:1px solid #d8eadf;border-radius:18px;padding:14px}.eval-view-section b{display:block;color:#064533;margin-bottom:7px}.eval-view-section p{margin:0;white-space:pre-wrap;color:#345247;line-height:1.55;font-weight:650}
.eval-view-actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;border-top:1px solid #edf5ef;padding-top:14px}.eval-empty{background:#fffaf0;border:1px solid #ead496;color:#5c512d;border-radius:18px;padding:16px;font-weight:700;line-height:1.55}
@media(max-width:900px){.eval-view-top{display:block}.eval-view-badge{margin-top:10px}.eval-view-meta,.eval-view-sections{grid-template-columns:1fr}}



/* PATCH 2026-07-04: Hồ sơ đánh giá gọn, cứng cáp, dạng hồ sơ quản trị */
body.phf-eval-mode .layout{grid-template-columns:1fr!important}
body.phf-eval-mode .todo-panel,
body.phf-eval-mode .right-panel{display:none!important}
body.phf-eval-mode .main{border-radius:22px;box-shadow:0 18px 46px rgba(30,40,35,.08)}
body.phf-eval-mode .phase-strip{display:none!important}
body.phf-eval-mode .context-bar{border-left-color:#222;background:#fff;border-color:#d9d9d9;box-shadow:0 8px 24px rgba(0,0,0,.05)}
body.phf-eval-mode .context-action{background:#f5f5f5;border-color:#ddd;color:#222}
.eval-hub.clean-eval{padding:24px;background:#f6f7f6;color:#1f2a24;min-height:calc(100vh - 180px)}
.eval-hub.clean-eval .eval-hub-head{background:#fff;color:#111;border:1px solid #ddd;border-radius:16px;padding:18px 20px;margin-bottom:14px;box-shadow:0 8px 22px rgba(0,0,0,.04)}
.eval-hub.clean-eval .eval-hub-head h2{color:#111;margin:0 0 6px;font-size:26px;letter-spacing:.1px}
.eval-hub.clean-eval .eval-hub-head p{color:#555;margin:0;font-weight:500}
.eval-top-line{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:14px;margin-bottom:14px}
.eval-hub.clean-eval .eval-learner-picker{margin:0;background:#fff;border-color:#ddd;border-radius:14px;box-shadow:0 8px 18px rgba(0,0,0,.035)}
.eval-summary-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.eval-summary-strip .status-item{background:#fff!important;border:1px solid #ddd!important;border-radius:14px!important;box-shadow:none!important;padding:13px!important}
.eval-summary-strip .status-item b{color:#444!important;font-size:12px;text-transform:uppercase;letter-spacing:.35px}.eval-summary-strip .status-item span{color:#111!important;font-size:14px;font-weight:800}
.eval-role-note.clean{background:#fff;border:1px solid #ddd;border-radius:14px;color:#444;margin:0 0 14px;padding:11px 14px;font-weight:500;box-shadow:none}
.eval-clean-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.eval-profile-panel,.eval-main-panel,.eval-table-card,.eval-detail-panel{background:#fff;border:1px solid #d9d9d9;border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.045)}
.eval-profile-panel{padding:16px}.eval-profile-panel h3,.eval-main-title h3{margin:0;color:#111;font-size:17px;letter-spacing:.15px}.eval-profile-panel .sub{margin:4px 0 12px;color:#666;font-size:13px}
.eval-profile-list{display:grid;gap:0;border-top:1px solid #eee}.eval-profile-row{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid #eee;font-size:13px}.eval-profile-row b{color:#666;font-weight:700}.eval-profile-row span{color:#111;font-weight:800;text-align:right}
.eval-period-list{margin-top:16px;border-top:1px solid #e7e7e7;padding-top:14px}.eval-period-title{font-size:13px;font-weight:900;color:#111;text-transform:uppercase;letter-spacing:.35px;margin-bottom:8px}.eval-period-item{width:100%;border:1px solid transparent;border-left:3px solid transparent;background:#fff;padding:10px 8px;margin:0 0 4px;text-align:left;cursor:pointer;border-radius:8px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.eval-period-item:hover{background:#f6f6f6}.eval-period-item.active{background:#f2f7f3;border-left-color:#222}.eval-period-item b{display:block;font-size:13px;color:#111}.eval-period-item small{display:block;color:#666;font-size:12px;margin-top:2px}.eval-status-chip{display:inline-flex;align-items:center;border:1px solid #ddd;background:#f4f4f4;color:#222;border-radius:6px;padding:4px 7px;font-size:11px;font-weight:800;white-space:nowrap}.eval-status-chip.done{background:#edf7ef;border-color:#c7e5ce;color:#14532d}.eval-status-chip.due{background:#fff6df;border-color:#ead497;color:#725000}.eval-status-chip.overdue{background:#fff0f0;border-color:#e5b5b5;color:#8a1f1f}
.eval-main-panel{padding:0;overflow:hidden}.eval-main-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid #e8e8e8}.eval-main-title p{margin:4px 0 0;color:#666;font-size:13px}.eval-create-top{background:#111;color:#fff;border:1px solid #111;border-radius:8px;padding:10px 14px;font-weight:800;cursor:pointer}.eval-create-top:disabled{opacity:.45;cursor:not-allowed}
.eval-table-wrap{overflow:auto}.eval-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}.eval-table th{background:#f4f4f4!important;color:#333!important;border-bottom:1px solid #ddd;padding:12px 14px;text-transform:uppercase;font-size:11.5px;letter-spacing:.35px}.eval-table td{padding:12px 14px;border-bottom:1px solid #eee;color:#222;vertical-align:middle;background:#fff}.eval-table tr:hover td{background:#fafafa}.eval-table .muted{color:#777;font-size:12px}.eval-table-actions{display:flex;align-items:center;gap:7px;white-space:nowrap}.eval-action{display:inline-flex;align-items:center;gap:6px;border:1px solid #cfcfcf;background:#fff;color:#222;border-radius:7px;padding:7px 10px;font-size:12px;font-weight:800;cursor:pointer}.eval-action:hover{background:#f4f4f4}.eval-action.primary{background:#111;color:#fff;border-color:#111}.eval-action.edit{background:#fffaf0;border-color:#d9bd75;color:#5f4300}.eval-action:disabled{opacity:.55;cursor:not-allowed;background:#f3f3f3;color:#777;border-color:#ddd}.eval-kebab{width:32px;height:32px;border:1px solid #ddd;background:#fff;border-radius:7px;font-weight:900;color:#555}
.eval-detail-panel{margin-top:16px;padding:0;overflow:hidden}.eval-detail-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid #e8e8e8;background:#fff}.eval-detail-head h3{margin:0;color:#111;font-size:16px}.eval-detail-head .tools{display:flex;gap:8px}.eval-doc-btn{border:1px solid #cfcfcf;background:#fff;color:#222;border-radius:7px;padding:8px 11px;font-size:12px;font-weight:800;cursor:pointer}.eval-doc-btn:hover{background:#f5f5f5}
.eval-document{background:#fff;color:#111;margin:18px;border:1px solid #d8d8d8;padding:26px 30px;box-shadow:0 8px 20px rgba(0,0,0,.035);font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif}.eval-document-title{text-align:center;border-bottom:2px solid #111;padding-bottom:12px;margin-bottom:18px}.eval-document-title h2{margin:0;color:#111;font-size:22px;letter-spacing:.4px;text-transform:uppercase}.eval-document-title p{margin:6px 0 0;color:#333;font-size:13px;font-weight:700}.eval-doc-section{margin-top:18px}.eval-doc-section h4{margin:0 0 10px;color:#111;font-size:14px;text-transform:uppercase;letter-spacing:.4px}.eval-doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px}.eval-doc-field{display:grid;grid-template-columns:118px 1fr;gap:8px;font-size:13px;line-height:1.5}.eval-doc-field b{color:#444}.eval-doc-field span{color:#111;font-weight:650}.eval-doc-table{width:100%;border-collapse:collapse;border-top:1px solid #111;border-bottom:1px solid #111;margin-top:8px}.eval-doc-table th{background:#fff!important;color:#111!important;border-bottom:1px solid #111;padding:9px;text-align:left;font-size:12px;text-transform:uppercase}.eval-doc-table td{padding:9px;border-bottom:1px solid #ddd;color:#111;background:#fff;font-size:13px}.eval-doc-table tr:last-child td{border-bottom:0}.eval-doc-note-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;border-top:1px solid #bbb;margin-top:18px;padding-top:16px}.eval-doc-note{min-height:78px}.eval-doc-note b{display:block;color:#111;text-transform:uppercase;font-size:12px;margin-bottom:7px}.eval-doc-note p{margin:0;color:#222;white-space:pre-wrap;line-height:1.55;font-size:13px}.eval-sign-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;border-top:1px solid #111;margin-top:18px;padding-top:15px;text-align:center}.eval-sign-row b{display:block;text-transform:uppercase;font-size:12px;color:#111}.eval-sign-row span{display:block;margin-top:38px;border-top:1px dotted #777;padding-top:6px;font-size:12px;color:#333}.eval-empty.clean{background:#fff;border:1px dashed #bbb;color:#333;border-radius:10px;padding:18px;margin:18px;font-weight:600}.eval-form-clean{padding:18px}.eval-form-clean .weekly-form-head{border:1px solid #ddd;border-radius:12px;padding:14px;margin-bottom:14px;background:#fafafa}.eval-form-clean .weekly-help{background:#fff;border-color:#ddd;border-radius:10px}.eval-form-clean .criteria-card{border-color:#ddd;background:#fff;border-radius:12px}.eval-form-clean .criteria-options label{border-radius:8px;border-color:#ddd}.eval-form-clean .weekly-field input,.eval-form-clean .weekly-field textarea{border-radius:8px;border-color:#ccc}.eval-form-clean .weekly-save-row{border-top:1px solid #e5e5e5;padding-top:14px}.eval-form-clean .btn-primary{background:#111;color:#fff;border-color:#111}.eval-form-clean .btn-soft{background:#fff;color:#222;border:1px solid #ccc}
@media(max-width:1100px){.eval-top-line,.eval-clean-layout{grid-template-columns:1fr}.eval-summary-strip{grid-template-columns:1fr}.eval-doc-grid,.eval-doc-note-grid,.eval-sign-row{grid-template-columns:1fr}.eval-document{margin:14px;padding:20px}}



/* PATCH 2026-07-04 B: Hồ sơ đánh giá dạng module quản trị riêng, bám sát mock phiếu trắng/đen */
body.phf-eval-mode{background:#f5f6f5!important}
body.phf-eval-mode .app{max-width:none!important;padding:0!important}
body.phf-eval-mode > .app > .topbar,
body.phf-eval-mode > .app > .phase-strip,
body.phf-eval-mode > .app > .context-bar{display:none!important}
body.phf-eval-mode .layout{display:block!important;max-width:none!important;margin:0!important;padding:0!important}
body.phf-eval-mode .todo-panel,body.phf-eval-mode .right-panel{display:none!important}
body.phf-eval-mode .main{border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important}
body.phf-eval-mode .focus-body{padding:0!important}
.eval-admin-shell{min-height:100vh;background:#f5f6f5;color:#222;font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif}
.eval-admin-topbar{height:62px;background:#fff;border-bottom:1px solid #e4e4e4;display:flex;align-items:center;justify-content:space-between;padding:0 26px;gap:18px;position:sticky;top:0;z-index:20;box-shadow:0 4px 16px rgba(0,0,0,.035)}
.eval-admin-brand{display:flex;align-items:center;gap:12px;min-width:230px}.eval-admin-logo{width:30px;height:30px;border-radius:8px;background:#0b4b39;color:#fff;display:grid;place-items:center;font-weight:950}.eval-admin-brand h1{margin:0;color:#0b4b39;font-size:22px;letter-spacing:-.2px}.eval-admin-nav{display:flex;align-items:center;gap:6px;flex:1;justify-content:center}.eval-admin-nav span{display:inline-flex;align-items:center;gap:7px;padding:20px 14px 18px;border-bottom:3px solid transparent;color:#555;font-weight:750;font-size:14px}.eval-admin-nav span.active{color:#0b4b39;border-bottom-color:#0b4b39}.eval-admin-user{display:flex;align-items:center;gap:10px;white-space:nowrap}.eval-admin-avatar{width:34px;height:34px;border-radius:999px;background:#0b4b39;color:#fff;display:grid;place-items:center;font-weight:900}.eval-admin-user b{display:block;font-size:13px;color:#222}.eval-admin-user small{display:block;color:#777;font-size:11px;font-weight:700}.eval-admin-page{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;padding:24px 26px 32px;align-items:start}.eval-admin-sidebar{display:grid;gap:16px}.eval-card{background:#fff;border:1px solid #e2e2e2;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.04)}.eval-profile-card{padding:18px}.eval-profile-card h3,.eval-period-card h3{margin:0 0 16px;color:#111;font-size:15px;letter-spacing:.4px;text-transform:uppercase}.eval-profile-lines{display:grid;gap:0}.eval-profile-line{display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:center;padding:11px 0;border-top:1px solid #eee;font-size:13px}.eval-profile-line b{color:#666;font-weight:650}.eval-profile-line span{text-align:right;color:#111;font-weight:750;line-height:1.35}.eval-period-card{padding:16px}.eval-period-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.eval-period-head h3{margin:0}.eval-small-plus{width:28px;height:28px;border:1px solid #d7d7d7;border-radius:6px;background:#fff;color:#333;font-weight:900}.eval-period-list{display:grid;gap:0;margin:0!important;border:0!important;padding:0!important}.eval-period-item{border:0!important;border-radius:0!important;border-left:3px solid transparent!important;background:#fff!important;border-bottom:1px solid #ededed!important;display:grid!important;grid-template-columns:1fr auto!important;gap:10px!important;align-items:center!important;padding:12px 10px!important;margin:0!important;color:#222!important}.eval-period-item.active{background:#f4f8f5!important;border-left-color:#0b4b39!important}.eval-period-item:hover{background:#f7f7f7!important}.eval-period-item b{font-size:14px!important;color:#222!important}.eval-period-item small{font-size:12px!important;color:#666!important;margin-top:3px!important}.eval-status-chip{border-radius:4px!important;border:1px solid #d5d5d5!important;background:#f1f1f1!important;color:#333!important;padding:4px 8px!important;font-size:11px!important;font-weight:800!important}.eval-status-chip.done{background:#e8f4ea!important;border-color:#c7e0cd!important;color:#15532f!important}.eval-status-chip.due{background:#fff7e6!important;border-color:#e5c981!important;color:#6b4a00!important}.eval-status-chip.overdue{background:#fff0f0!important;border-color:#e0a8a8!important;color:#7f1d1d!important}.eval-admin-main{display:grid;gap:18px}.eval-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px}.eval-toolbar h2{margin:0;color:#111;font-size:20px;text-transform:uppercase;letter-spacing:.3px}.eval-toolbar p{margin:5px 0 0;color:#666;font-size:13px}.eval-primary-action{border:0;background:#0b4b39;color:#fff;border-radius:5px;padding:11px 16px;font-weight:850;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 18px rgba(11,75,57,.16)}.eval-primary-action:disabled{opacity:.45;cursor:not-allowed}.eval-summary-strip{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}.eval-summary-strip .status-item{border:1px solid #e2e2e2!important;background:#fff!important;border-radius:8px!important;box-shadow:0 8px 20px rgba(0,0,0,.035)!important;padding:14px!important}.eval-summary-strip .status-item b{display:block!important;color:#666!important;text-transform:uppercase!important;letter-spacing:.45px!important;font-size:11px!important;margin-bottom:4px!important}.eval-summary-strip .status-item span{display:block!important;color:#111!important;font-size:14px!important;font-weight:850!important}.eval-learner-picker{border:1px solid #e2e2e2!important;background:#fff!important;border-radius:8px!important;padding:12px 14px!important;box-shadow:0 8px 20px rgba(0,0,0,.035)!important}.eval-learner-picker label{font-weight:850!important;color:#111!important;text-transform:uppercase;font-size:12px;letter-spacing:.35px}.eval-learner-picker select{border-radius:5px!important;border:1px solid #ccc!important;background:#fff!important;color:#111!important;height:39px!important}.eval-role-note.clean{border:1px solid #e2e2e2!important;background:#fff!important;border-radius:8px!important;color:#444!important;margin:0!important;box-shadow:0 8px 20px rgba(0,0,0,.025)!important}.eval-table-card{border-radius:8px!important;border:1px solid #e0e0e0!important;overflow:hidden;background:#fff!important;box-shadow:0 10px 28px rgba(0,0,0,.04)!important}.eval-table-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid #e6e6e6}.eval-table-head h3{margin:0;font-size:15px;color:#111;text-transform:uppercase;letter-spacing:.35px}.eval-table-head span{color:#666;font-size:12.5px;font-weight:650}.eval-table{width:100%;border-collapse:collapse;font-size:13px}.eval-table th{background:#f7f7f7!important;color:#333!important;text-align:left;border-bottom:1px solid #ddd!important;padding:12px 16px!important;text-transform:uppercase;font-size:11px;letter-spacing:.45px}.eval-table td{background:#fff!important;color:#222!important;border-bottom:1px solid #ededed!important;padding:12px 16px!important;vertical-align:middle}.eval-table tr:hover td{background:#fafafa!important}.eval-table .muted{color:#888!important}.eval-table-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}.eval-action{border:1px solid #cfcfcf!important;background:#fff!important;color:#222!important;border-radius:5px!important;padding:8px 11px!important;font-size:12px!important;font-weight:800!important;cursor:pointer!important;line-height:1!important;min-height:34px}.eval-action:hover{background:#f4f4f4!important}.eval-action.primary{background:#0f1720!important;color:#fff!important;border-color:#0f1720!important}.eval-action.edit{background:#fff!important;border-color:#bd8f29!important;color:#704700!important}.eval-action:disabled{background:#f2f2f2!important;color:#777!important;border-color:#ddd!important;cursor:not-allowed!important}.eval-kebab{width:34px!important;height:34px!important;border-radius:5px!important;border:1px solid #d8d8d8!important;background:#fff!important;color:#555!important}.eval-detail-panel{background:#fff!important;border:1px solid #e0e0e0!important;border-radius:8px!important;box-shadow:0 10px 28px rgba(0,0,0,.04)!important;overflow:hidden;margin-top:0!important}.eval-detail-head{background:#fff!important;border-bottom:1px solid #e6e6e6!important;padding:16px 18px!important}.eval-detail-head h3{color:#111!important;text-transform:uppercase;letter-spacing:.3px;font-size:15px!important}.eval-doc-btn{border:1px solid #cfcfcf!important;background:#fff!important;color:#222!important;border-radius:5px!important;padding:9px 12px!important;font-weight:800!important}.eval-doc-btn:hover{background:#f4f4f4!important}.eval-doc-btn.dark{background:#111!important;color:#fff!important;border-color:#111!important}.eval-document{max-width:none;background:#fff!important;color:#111!important;border:1px solid #cfcfcf!important;border-radius:0!important;margin:20px!important;padding:34px 42px!important;box-shadow:none!important;font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important}.eval-document-title{text-align:center!important;border-bottom:2px solid #111!important;margin-bottom:22px!important;padding-bottom:12px!important}.eval-document-title h2{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;color:#111!important;font-size:24px!important;letter-spacing:1px!important;text-transform:uppercase!important;margin:0!important}.eval-document-title p{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;color:#333!important;font-size:13px!important;margin:7px 0 0!important;font-weight:700!important}.eval-doc-section{margin-top:18px!important}.eval-doc-section h4{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;color:#111!important;font-size:14px!important;text-transform:uppercase!important;letter-spacing:.7px!important;margin:0 0 12px!important}.eval-doc-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px 54px!important}.eval-doc-field{display:grid!important;grid-template-columns:120px 1fr!important;gap:10px!important;font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;font-size:13px!important;line-height:1.55!important}.eval-doc-field b{color:#333!important}.eval-doc-field span{color:#111!important;font-weight:650!important}.eval-doc-table{width:100%!important;border-collapse:collapse!important;border-top:1.5px solid #111!important;border-bottom:1.5px solid #111!important}.eval-doc-table th{background:#fff!important;color:#111!important;border-bottom:1.5px solid #111!important;padding:10px 9px!important;font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:.4px!important}.eval-doc-table td{background:#fff!important;color:#111!important;border-bottom:1px solid #ddd!important;padding:10px 9px!important;font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;font-size:13px!important}.eval-doc-table .eval-rate{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;letter-spacing:2px;font-weight:900}.eval-doc-note-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0 30px!important;border-top:1px solid #bbb!important;margin-top:20px!important;padding-top:18px!important}.eval-doc-note{min-height:78px;border-bottom:1px solid #d2d2d2;padding:0 0 14px;margin-bottom:14px}.eval-doc-note b{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;color:#111!important;text-transform:uppercase!important;font-size:13px!important;letter-spacing:.5px}.eval-doc-note p{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;color:#222!important;line-height:1.55!important;font-size:13px!important;white-space:pre-wrap}.eval-sign-row{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:24px!important;border-top:1.5px solid #111!important;margin-top:18px!important;padding-top:18px!important;text-align:center}.eval-sign-row b{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;color:#111!important;text-transform:uppercase!important;font-size:12px!important}.eval-sign-row span{display:block;margin-top:46px;border-top:1px dotted #777;padding-top:7px;font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;font-size:12px;color:#333}.eval-empty.clean{border:1px dashed #aaa!important;border-radius:6px!important;background:#fff!important;color:#333!important;margin:20px!important}.eval-form-clean{padding:20px!important;background:#fff!important}.eval-form-clean .weekly-form-head{background:#f7f7f7!important;border:1px solid #ddd!important;border-radius:8px!important}.eval-form-clean .weekly-help{background:#fff!important;border:1px solid #ddd!important;border-radius:6px!important;color:#333!important}.eval-form-clean .criteria-card{border:1px solid #ddd!important;background:#fff!important;border-radius:6px!important;box-shadow:none!important}.eval-form-clean .criteria-options label{border-radius:4px!important;border-color:#d4d4d4!important;background:#fff!important}.eval-form-clean .criteria-options label:hover{background:#f5f5f5!important}.eval-form-clean .weekly-field input,.eval-form-clean .weekly-field textarea{border-radius:5px!important;border-color:#ccc!important;background:#fff!important}.eval-form-clean .btn-primary{background:#111!important;color:#fff!important;border-color:#111!important}.eval-form-clean .btn-soft{background:#fff!important;color:#222!important;border:1px solid #ccc!important}
@media(max-width:1120px){.eval-admin-page{grid-template-columns:1fr}.eval-summary-strip{grid-template-columns:1fr 1fr!important}.eval-doc-grid,.eval-doc-note-grid,.eval-sign-row{grid-template-columns:1fr!important}.eval-admin-nav{display:none}.eval-admin-page{padding:16px}.eval-document{margin:14px!important;padding:24px!important}}
@media(max-width:680px){.eval-admin-topbar{height:auto;align-items:flex-start;flex-direction:column;padding:14px}.eval-admin-user{align-self:flex-end}.eval-summary-strip{grid-template-columns:1fr!important}.eval-table th:nth-child(4),.eval-table td:nth-child(4),.eval-table th:nth-child(5),.eval-table td:nth-child(5){display:none}.eval-table-actions{flex-wrap:wrap}}



/* PATCH PHF 2026-07-04: chỉnh phiếu đánh giá trắng/đen dễ đọc hơn + bớt vỡ chữ */
.eval-document{
  color:#111!important;
  background:#fff!important;
  border:1px solid #d7d7d7!important;
  padding:30px 40px 34px!important;
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
}
.eval-document *{box-sizing:border-box}
.eval-document-title{
  border-bottom:1.5px solid #222!important;
  padding-bottom:14px!important;
  margin-bottom:22px!important;
}
.eval-document-title h2{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  font-size:24px!important;
  line-height:1.25!important;
  font-weight:850!important;
  letter-spacing:.2px!important;
  word-spacing:0!important;
  text-transform:uppercase!important;
  color:#111!important;
}
.eval-document-title p{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  font-size:13px!important;
  color:#333!important;
  font-weight:750!important;
  margin-top:8px!important;
}
.eval-doc-section{margin-top:18px!important}
.eval-doc-section h4{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  font-size:14px!important;
  font-weight:850!important;
  letter-spacing:.15px!important;
  text-transform:none!important;
  color:#111!important;
  margin:0 0 12px!important;
}
.eval-doc-grid{gap:8px 48px!important}
.eval-doc-field{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  font-size:13px!important;
  line-height:1.58!important;
}
.eval-doc-field b{color:#444!important;font-weight:750!important}
.eval-doc-field span{color:#111!important;font-weight:700!important}
.eval-doc-table{
  border-top:1.5px solid #222!important;
  border-bottom:1.5px solid #222!important;
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
}
.eval-doc-table th{
  background:#f7f7f7!important;
  color:#111!important;
  border-bottom:1px solid #333!important;
  font-size:12px!important;
  font-weight:850!important;
  letter-spacing:.1px!important;
  text-transform:none!important;
}
.eval-doc-table td{
  font-size:13px!important;
  line-height:1.55!important;
  border-bottom:1px solid #e5e5e5!important;
}
.eval-doc-table .eval-rate{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  letter-spacing:.5px!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
.eval-doc-note-grid{
  border-top:1px solid #cfcfcf!important;
  gap:0 28px!important;
}
.eval-doc-note{border-bottom:1px solid #dadada!important;min-height:78px!important}
.eval-doc-note b{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  font-size:13px!important;
  font-weight:850!important;
  letter-spacing:.1px!important;
  text-transform:none!important;
  color:#111!important;
}
.eval-doc-note p{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  font-size:13px!important;
  color:#222!important;
  line-height:1.6!important;
}
.eval-sign-row{
  border-top:1.5px solid #222!important;
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
}
.eval-sign-row b{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  font-size:12px!important;
  letter-spacing:.1px!important;
  text-transform:none!important;
}
.eval-sign-row span{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  color:#333!important;
}
.eval-detail-head .tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.eval-doc-btn,.eval-action,.eval-primary-action{
  transition:.15s background,.15s border-color,.15s transform,.15s box-shadow;
}
.eval-doc-btn:hover,.eval-action:hover,.eval-primary-action:hover{transform:translateY(-1px)}
@media print{
  .eval-admin-topbar,.eval-admin-sidebar,.eval-table-card,.eval-toolbar,.eval-summary-strip,.eval-learner-picker,.eval-role-note,.eval-detail-head .tools,.actions{display:none!important}
  body.phf-eval-mode .eval-admin-page{display:block!important;padding:0!important}
  .eval-detail-panel{border:0!important;box-shadow:none!important}
  .eval-document{margin:0!important;border:0!important;padding:20mm!important}
}


/* PATCH PHF 2026-07-04 C: polish phiếu tuần - cân lại khổ phiếu, bảng, chữ ký */
.eval-detail-panel{overflow:visible!important}
.eval-document{
  max-width:1120px!important;
  margin:20px auto!important;
  padding:34px 44px 38px!important;
  border-color:#d0d0d0!important;
  line-height:1.55!important;
}
.eval-document-title{
  padding-top:2px!important;
  margin-bottom:24px!important;
}
.eval-document-title h2{
  font-size:25px!important;
  letter-spacing:0!important;
  word-spacing:0!important;
  white-space:normal!important;
}
.eval-doc-section h4{
  border-left:4px solid #111;
  padding-left:10px;
}
.eval-doc-grid{
  background:#fafafa;
  border:1px solid #e4e4e4;
  padding:12px 14px;
}
.eval-doc-field{grid-template-columns:132px 1fr!important}
.eval-doc-table{table-layout:fixed!important}
.eval-doc-table th:nth-child(1),.eval-doc-table td:nth-child(1){width:30%!important}
.eval-doc-table th:nth-child(2),.eval-doc-table td:nth-child(2){width:22%!important}
.eval-doc-table th:nth-child(3),.eval-doc-table td:nth-child(3){width:48%!important}
.eval-doc-table th{padding:11px 12px!important}
.eval-doc-table td{padding:11px 12px!important;vertical-align:top!important}
.eval-criteria-index{display:inline-block;min-width:20px;color:#555;font-weight:800}
.eval-level-text{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:74px;
  padding:4px 8px;
  border:1px solid #d1d1d1;
  background:#f7f7f7;
  border-radius:4px;
  color:#111;
  font-size:12px;
  font-weight:850;
  margin-right:8px;
}
.eval-doc-table .eval-rate{
  color:#555!important;
  font-size:12px!important;
  letter-spacing:.3px!important;
}
.eval-doc-note-grid{
  grid-template-columns:1fr 1fr!important;
  gap:16px 28px!important;
}
.eval-doc-note{
  background:#fff!important;
  border:1px solid #e2e2e2!important;
  padding:12px 14px!important;
  margin:0!important;
  min-height:92px!important;
}
.eval-doc-note b{display:block!important;margin-bottom:8px!important}
.eval-sign-row{
  gap:18px!important;
  padding-top:20px!important;
  margin-top:24px!important;
}
.eval-sign-row>div{
  min-height:96px;
  border:1px solid #e3e3e3;
  padding:12px 12px 10px;
  background:#fafafa;
}
.eval-sign-row span{margin-top:42px!important}
@media(max-width:900px){
  .eval-document{max-width:none!important;margin:14px!important;padding:24px!important}
  .eval-doc-table{table-layout:auto!important}
  .eval-doc-table th:nth-child(n),.eval-doc-table td:nth-child(n){width:auto!important}
  .eval-level-text{margin-bottom:5px}
}
@media print{
  .eval-document{max-width:none!important;margin:0!important;padding:18mm!important}
  .eval-doc-grid,.eval-doc-note,.eval-sign-row>div{background:#fff!important}
}



/* PATCH 2026-07-04 C: Cụm nút hành động phiếu đánh giá cứng cáp, chuyên nghiệp hơn */
.eval-form-clean .eval-save-toolbar,
.eval-save-toolbar{
  margin-top:18px!important;
  padding:16px!important;
  border:1px solid #d7dce1!important;
  background:#f8faf9!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  border-radius:8px!important;
}
.eval-save-status{
  min-width:0!important;
  display:grid!important;
  gap:5px!important;
}
.eval-save-kicker{
  display:block!important;
  color:#4f5963!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.eval-form-clean .weekly-save-note,
.eval-save-toolbar .weekly-save-note{
  color:#223129!important;
  font-size:13px!important;
  line-height:1.45!important;
  font-weight:750!important;
}
.eval-save-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex:0 0 auto!important;
}
.eval-save-btn{
  min-height:42px!important;
  border-radius:4px!important;
  padding:10px 16px!important;
  font-size:13px!important;
  font-weight:900!important;
  cursor:pointer!important;
  border:1px solid #bfc8d0!important;
  background:#fff!important;
  color:#243039!important;
  font-family:inherit!important;
  box-shadow:none!important;
}
.eval-save-btn.secondary{
  background:#fff!important;
  color:#223129!important;
  border-color:#bfc8d0!important;
}
.eval-save-btn.secondary:hover{
  background:#f1f4f3!important;
}
.eval-save-btn.primary{
  background:#0f4f32!important;
  color:#fff!important;
  border-color:#0f4f32!important;
}
.eval-save-btn.primary:hover{
  background:#0b3f28!important;
  border-color:#0b3f28!important;
}
.eval-save-btn:focus{
  outline:2px solid rgba(15,79,50,.25)!important;
  outline-offset:2px!important;
}
@media(max-width:760px){
  .eval-save-toolbar{
    align-items:stretch!important;
    flex-direction:column!important;
  }
  .eval-save-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .eval-save-btn{
    width:100%!important;
  }
}

/* PHF final probation evaluation - card form patch */
.final-eval-admin-note{border:1px solid #d8bb67;background:#fff8e8;color:#5c4300;padding:12px 14px;border-radius:4px;font-size:13px;font-weight:650;line-height:1.5;margin:0 0 14px;}
.final-eval-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px;}
.final-eval-metric{border:1px solid #d5dbe1;background:#f8faf9;padding:13px 14px;border-radius:4px;min-height:74px;}
.final-eval-metric b{display:block;font-size:22px;line-height:1;color:#0f4f32;margin-bottom:6px;}
.final-eval-metric span{display:block;color:#66717c;text-transform:uppercase;letter-spacing:.04em;font-size:11px;font-weight:850;}
.final-eval-group{border:1px solid #d5dbe1;background:#fff;margin:0 0 14px;border-radius:4px;overflow:hidden;}
.final-eval-group-head{display:grid;grid-template-columns:44px 1fr auto;align-items:center;min-height:46px;background:#f8faf9;border-bottom:1px solid #d5dbe1;}
.final-eval-group-no{align-self:stretch;display:grid;place-items:center;background:#223129;color:#fff;font-weight:900;}
.final-eval-group-title{padding:0 13px;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:#20262c;}
.final-eval-group-sub{padding-right:13px;font-size:12px;font-weight:750;color:#66717c;}
.final-eval-list{display:grid;gap:10px;padding:13px;background:#fff;}
.final-eval-card{border:1px solid #d8dde3;background:#fff;display:grid;grid-template-columns:58px minmax(260px,1fr) 190px 330px;min-height:92px;border-radius:3px;overflow:hidden;}
.final-eval-card.is-warning{background:#fffdf5;border-color:#e2c979;}
.final-eval-card.is-missing{border-color:#b3261e;box-shadow:0 0 0 2px rgba(179,38,30,.08);}
.final-eval-no{background:#f0f3f2;border-right:1px solid #d8dde3;display:flex;align-items:flex-start;justify-content:center;padding-top:14px;font-weight:900;color:#263039;}
.final-eval-card.is-warning .final-eval-no{background:#fff7dd;}
.final-eval-main{padding:13px 14px;border-right:1px solid #d8dde3;}
.final-eval-title{font-weight:850;line-height:1.35;margin-bottom:6px;color:#20262c;}
.final-eval-help{color:#68727d;font-size:12px;line-height:1.45;}
.final-eval-rating{padding:13px;border-right:1px solid #d8dde3;background:#fbfcfc;}
.final-eval-note{padding:13px;background:#fbfcfc;}
.final-eval-rating label,.final-eval-note label,.final-field label{display:block;font-size:12px;color:#525e69;font-weight:850;margin-bottom:6px;}
.final-eval-rating select,.final-eval-note textarea,.final-field select,.final-field textarea,.final-field input{width:100%;border:1px solid #c6cfd7;border-radius:3px;padding:9px 10px;font:inherit;font-size:13px;background:#fff;color:#1f252b;}
.final-eval-note textarea{min-height:62px;resize:vertical;}
.final-must-note{display:inline-block;margin-top:7px;padding:4px 7px;background:#fff7dd;border:1px solid #e1c167;color:#6b4b00;font-size:11px;font-weight:850;}
.final-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px;}
.final-field{display:flex;flex-direction:column;margin-bottom:12px;}
.final-field textarea{min-height:96px;resize:vertical;}
.final-required-note{color:#8a6100;font-size:12px;font-weight:850;margin-top:6px;line-height:1.45;}
.final-print-panel{display:none;margin-top:16px;}
.final-print-panel.show{display:block;}
.final-paper{max-width:980px;margin:0 auto;background:#fff;border:1px solid #aeb7bf;padding:24px;color:#111;}
.final-paper-title{border:1px solid #222;padding:15px;text-align:center;font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:#1b5f8f;font-size:20px;margin-bottom:12px;}
.final-paper-info,.final-paper-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:14px;}
.final-paper-info th,.final-paper-info td,.final-paper-table th,.final-paper-table td{border:1px solid #222;padding:8px;text-align:left;vertical-align:top;line-height:1.4;}
.final-paper-info th{background:#eaf4f7;color:#1b5f8f;width:130px;}
.final-paper-table th{background:#ddd;text-align:center;}
.final-paper-section{margin:16px 0 8px;font-weight:900;font-size:14px;}
.final-paper-center{text-align:center!important;}
.final-paper-summary{border:1px solid #222;border-top:0;display:grid;grid-template-columns:1fr 220px;font-size:13px;line-height:1.5;}
.final-paper-summary>div{padding:10px;}
.final-paper-summary>div:last-child{border-left:1px solid #222;font-weight:850;}
.final-signs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:22px;text-align:center;font-size:13px;}
.final-sign{border-top:1.5px solid #222;padding-top:9px;min-height:76px;}
.final-sign b{display:block;margin-bottom:30px;}
@media(max-width:1180px){.final-eval-overview{grid-template-columns:repeat(2,minmax(0,1fr));}.final-eval-card{grid-template-columns:44px 1fr;}.final-eval-main{border-right:0;border-bottom:1px solid #d8dde3;}.final-eval-rating,.final-eval-note{grid-column:2;border-right:0;border-bottom:1px solid #d8dde3;}.final-summary-grid{grid-template-columns:1fr;}}

/* PHF evaluation tabs + cleaner history/view layout patch */
.eval-tabbar{display:flex;gap:8px;align-items:center;margin:14px 0;border-bottom:1px solid #d9dee3;}
.eval-tabbtn{border:1px solid #d5dbe1;border-bottom:0;background:#f8fafb;color:#344054;padding:11px 16px;font:900 13px/1 Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;cursor:pointer;border-radius:3px 3px 0 0;}
.eval-tabbtn.active{background:#fff;color:#0b4b39;border-color:#aeb8c2;box-shadow:inset 0 -3px 0 #0b4b39;}
.eval-tabbtn:disabled{opacity:.55;cursor:not-allowed;}
.eval-history-card{background:#fff;border:1px solid #d5dbe1;border-radius:3px;overflow:hidden;margin-top:14px;}
.eval-history-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:16px 18px;border-bottom:1px solid #e2e7eb;background:#fbfcfc;}
.eval-history-head h3{margin:0 0 5px;color:#1f2933;font-size:18px;letter-spacing:.02em;}
.eval-history-head p{margin:0;color:#667085;font-weight:650;font-size:13px;}
.eval-history-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px;border-bottom:1px solid #e2e7eb;background:#fff;}
.eval-history-metric{border:1px solid #d9dee3;background:#f8fafb;padding:12px 13px;border-radius:3px;}
.eval-history-metric b{display:block;color:#0b4b39;font-size:22px;line-height:1;margin-bottom:5px;}
.eval-history-metric span{display:block;color:#667085;font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:850;}
.eval-history-table{width:100%;border-collapse:collapse;background:#fff;}
.eval-history-table th{background:#f3f6f5;color:#1f2933;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:12px;border-bottom:1px solid #d9dee3;}
.eval-history-table td{padding:12px;border-bottom:1px solid #eef1f3;vertical-align:top;color:#1f2933;font-size:13px;}
.eval-history-table tr:last-child td{border-bottom:0;}
.eval-tab-empty{border:1px dashed #cfd6dc;background:#fbfcfc;padding:18px;color:#667085;font-weight:700;border-radius:3px;margin-top:14px;}
@media(max-width:900px){.eval-tabbar{flex-wrap:wrap}.eval-history-summary{grid-template-columns:repeat(2,minmax(0,1fr));}}



/* PATCH 2026-07-04 E: Gọn lại kỳ đánh giá + dropdown trạng thái final */
.eval-period-head{align-items:center!important;}
.eval-period-current-label{margin:4px 0 7px;color:#667085;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1px;}
.eval-period-current{margin:0 0 12px!important;border:1px solid #d9e1dd!important;border-left:3px solid #0b4b39!important;border-radius:3px!important;background:#f7faf8!important;padding:12px!important;}
.eval-period-current:hover{background:#f3f7f4!important;}
.eval-period-list-wrap{display:block!important;margin-top:12px;border-top:1px solid #e6eaed;padding-top:8px;}
.eval-period-list-wrap.collapsed{display:block!important;}
.eval-period-groups{display:grid;gap:8px;}
.eval-period-group{border:1px solid #e0e5e9;background:#fff;border-radius:3px;overflow:hidden;}
.eval-period-group-head{width:100%;border:0;background:#f8fafb;color:#1f2933;display:grid;grid-template-columns:1fr auto 24px;gap:8px;align-items:center;padding:10px 11px;text-align:left;font:900 13px/1.2 Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;cursor:pointer;}
.eval-period-group-head:hover{background:#f2f5f4;}
.eval-period-group-head small{font-size:11px;color:#667085;font-weight:800;white-space:nowrap;}
.eval-period-group-head em{font-style:normal;text-align:center;border:1px solid #cfd6dc;background:#fff;height:22px;line-height:18px;font-weight:900;}
.eval-period-group-list{display:grid;padding:6px 8px 8px;background:#fff;}
.eval-period-group-list.collapsed{display:none!important;}
.eval-period-group-list .eval-period-item{border-radius:3px!important;margin:0!important;padding:9px 8px!important;}
.eval-period-group-list .eval-period-item + .eval-period-item{border-top:1px solid #eef1f3!important;}
.final-rating-segment{display:none!important;}
.final-rating-source{position:static!important;opacity:1!important;pointer-events:auto!important;width:100%!important;height:42px!important;border:1.5px solid #aeb8c2!important;border-radius:3px!important;padding:0 11px!important;font:850 13px/1.2 Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;background:#fff!important;color:#1f2933!important;outline:none!important;}
.final-rating-source.rating-good{background:#eef6ff!important;color:#175cd3!important;border-color:#9fc5ff!important;}
.final-rating-source.rating-pass{background:#eef8f1!important;color:#176334!important;border-color:#a9d8b6!important;}
.final-rating-source.rating-watch{background:#fff7df!important;color:#7a5200!important;border-color:#e1bd55!important;}
.final-rating-source.rating-fail{background:#fff1f1!important;color:#9f1d1d!important;border-color:#ee9c9c!important;}
.final-must-note.is-hidden{display:none!important;}
.final-must-note{display:block!important;width:max-content;margin-top:7px!important;border:1px solid #d8b64b!important;background:#fff7df!important;color:#674600!important;border-radius:2px!important;padding:4px 7px!important;}
.final-eval-card{grid-template-columns:58px minmax(320px,1fr) 190px minmax(300px,390px)!important;border-radius:2px!important;}
.final-eval-rating,.final-eval-note{background:#fff!important;}
.final-eval-note textarea{border:1.5px solid #aeb8c2!important;border-radius:3px!important;min-height:72px!important;background:#fff!important;}
.final-eval-card.is-warning .final-eval-note textarea{border:2px solid #b78a00!important;background:#fffaf0!important;color:#5a4100!important;font-weight:600!important;}
.final-eval-card.is-missing .final-eval-note textarea{border-color:#b3261e!important;background:#fff7f7!important;}
.final-summary-grid{background:#fbfcfc!important;gap:16px!important;align-items:stretch!important;}
.final-summary-grid>div{border:1px solid #d8dde3;background:#fff;padding:14px;border-radius:3px;}
.final-field{margin-bottom:13px!important;}
.final-field label{color:#313b44!important;text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;}
.final-field select,.final-field input{min-height:42px!important;border:1.5px solid #aeb8c2!important;border-radius:3px!important;background:#fff!important;font-weight:750!important;}
.final-field textarea{border:1.5px solid #aeb8c2!important;border-radius:3px!important;background:#fff!important;}
#weeklyConclusion.rating-pass{background:#eef8f1!important;color:#176334!important;border-color:#a9d8b6!important;}
#weeklyConclusion.rating-watch{background:#fff7df!important;color:#7a5200!important;border-color:#e1bd55!important;}
#weeklyConclusion.rating-fail{background:#fff1f1!important;color:#9f1d1d!important;border-color:#ee9c9c!important;}
#finalRequiredReason{border:2px solid #b78a00!important;background:#fffaf0!important;color:#5a4100!important;}
.final-required-note{border-left:3px solid #0b4b39;background:#f5f9f7;padding:9px 10px;color:#314438!important;}
.final-signs{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;}
.final-sign{border:1px solid #d8d8d8!important;border-top:1.5px solid #222!important;min-height:78px!important;padding:10px!important;background:#fff!important;}
@media print{
  .phf-toast-wrap,.phf-toast,.modal,.toast,.eval-save-toolbar,.eval-form-clean,.eval-period-card,.eval-profile-card,.eval-admin-sidebar,.eval-admin-topbar,.eval-toolbar,.eval-summary-strip,.eval-table-card,.eval-learner-picker,.actions,.eval-detail-head .tools{display:none!important;}
  .eval-sign-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10mm!important;break-inside:avoid!important;page-break-inside:avoid!important;}
  .eval-sign-row>div{display:block!important;background:#fff!important;min-height:26mm!important;}
  .eval-sign-row span{margin-top:18mm!important;}
  .final-signs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8mm!important;break-inside:avoid!important;page-break-inside:avoid!important;}
  .final-sign{min-height:24mm!important;background:#fff!important;}
}
@media(max-width:1180px){
  .final-eval-card{grid-template-columns:44px 1fr!important;}
  .final-eval-main{border-right:0!important;border-bottom:1px solid #d8dde3!important;}
  .final-eval-rating,.final-eval-note{grid-column:2!important;border-right:0!important;border-bottom:1px solid #d8dde3!important;}
  .final-summary-grid{grid-template-columns:1fr!important;}
}

/* PHF Hub main navigation and overview patch */
.eval-admin-nav button{display:inline-flex;align-items:center;gap:7px;padding:20px 14px 18px;border:0;border-bottom:3px solid transparent;background:transparent;color:#555;font-weight:750;font-size:14px;font-family:inherit;cursor:pointer}
.eval-admin-nav button.active{color:#0b4b39;border-bottom-color:#0b4b39}
.eval-admin-nav button:hover{color:#0b4b39;background:#f7faf8}
.hub-overview-page{display:grid;gap:18px}
.hub-hero{background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.04);padding:22px 24px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.hub-hero h2{margin:0 0 8px;color:#111;font-size:22px;letter-spacing:.2px}.hub-hero p{margin:0;color:#666;font-weight:650;line-height:1.45}.hub-hero .hub-badge{border:1px solid #d9e5dd;background:#f7fbf8;color:#0b4b39;border-radius:6px;padding:10px 13px;font-weight:850;white-space:nowrap;text-align:right}
.hub-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.hub-kpi{background:#fff;border:1px solid #e2e2e2;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.035);padding:16px}.hub-kpi b{display:block;font-size:24px;color:#0b4b39;margin-bottom:5px}.hub-kpi span{display:block;text-transform:uppercase;letter-spacing:.45px;font-size:11px;color:#666;font-weight:850}.hub-kpi p{margin:8px 0 0;color:#555;font-weight:650;font-size:13px;line-height:1.4}
.hub-content-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}.hub-panel{background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.04);overflow:hidden}.hub-panel-head{padding:16px 18px;border-bottom:1px solid #e6e6e6;background:#fbfcfc;display:flex;align-items:center;justify-content:space-between;gap:12px}.hub-panel-head h3{margin:0;color:#111;font-size:15px;text-transform:uppercase;letter-spacing:.35px}.hub-panel-head span{font-size:12.5px;color:#666;font-weight:750}.hub-list{display:grid}.hub-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid #ededed}.hub-row:last-child{border-bottom:0}.hub-row b{display:block;color:#111;margin-bottom:4px}.hub-row small{display:block;color:#666;font-weight:650;line-height:1.35}.hub-row .eval-action{white-space:nowrap}.hub-warning{border-left:4px solid #bd8f29;background:#fff8e8;padding:12px 14px;color:#5a4100;font-weight:750;line-height:1.45}.hub-placeholder{padding:22px}.hub-placeholder h2{margin:0 0 8px;text-transform:uppercase;color:#111}.hub-placeholder p{margin:0;color:#666;line-height:1.5;font-weight:650}.hub-shortcuts{display:flex;gap:10px;flex-wrap:wrap;padding:16px 18px;border-top:1px solid #ededed;background:#fbfcfc}
@media(max-width:1120px){.hub-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-content-grid{grid-template-columns:1fr}.hub-hero{display:block}.hub-hero .hub-badge{display:inline-block;text-align:left;margin-top:12px}}
@media(max-width:680px){.hub-kpi-grid{grid-template-columns:1fr}.eval-admin-nav button{padding:10px 8px}.hub-row{grid-template-columns:1fr}.hub-shortcuts{display:grid}}

/* PHF true dashboard overview patch */
.hub-overview-page.is-dashboard{display:grid;gap:18px}.hub-dashboard-hero{background:#fff;border:1px solid #dedede;border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.04);padding:22px 24px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.hub-dashboard-hero h2{margin:0 0 8px;color:#111;font-size:23px;letter-spacing:.2px}.hub-dashboard-hero p{margin:0;color:#626b72;font-weight:650;line-height:1.45}.hub-dashboard-hero .hub-dashboard-note{border:1px solid #d9e5dd;background:#f7fbf8;color:#0b4b39;border-radius:6px;padding:10px 13px;font-weight:850;text-align:right;min-width:250px}.hub-dashboard-note small{display:block;color:#53655c;margin-top:4px;font-weight:700}.hub-kpi.danger b{color:#9f1d1d}.hub-kpi.warn b{color:#8a5a00}.hub-kpi.neutral b{color:#344054}.hub-dashboard-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}.hub-chart-box{padding:16px 18px}.hub-chart-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.hub-chart-title b{font-size:14px;text-transform:uppercase;letter-spacing:.35px}.hub-chart-title span{font-size:12.5px;color:#667085;font-weight:750}.hub-donut-row{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:center}.hub-donut{width:150px;height:150px;border-radius:50%;background:conic-gradient(#0b4b39 var(--doneDeg,0deg),#d6ded9 0);display:grid;place-items:center;margin:auto;position:relative}.hub-donut:before{content:"";width:96px;height:96px;border-radius:50%;background:#fff;position:absolute}.hub-donut b{position:relative;font-size:24px;color:#0b4b39}.hub-legend{display:grid;gap:9px}.hub-legend-item{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:750;color:#344054}.hub-legend-item span:first-child:before{content:"";display:inline-block;width:10px;height:10px;background:#0b4b39;margin-right:8px;vertical-align:middle}.hub-legend-item.missing span:first-child:before{background:#d6ded9}.hub-legend-item.overdue span:first-child:before{background:#9f1d1d}.hub-bar-list{display:grid;gap:12px}.hub-bar-row{display:grid;grid-template-columns:118px 1fr 42px;gap:10px;align-items:center}.hub-bar-row b{font-size:13px;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-bar-track{height:12px;background:#eef1f3;border-radius:999px;overflow:hidden}.hub-bar-fill{height:100%;background:#0b4b39;border-radius:999px;min-width:4px}.hub-bar-row span{font-size:12.5px;color:#667085;font-weight:800;text-align:right}.hub-action-table{width:100%;border-collapse:collapse}.hub-action-table th,.hub-action-table td{border-bottom:1px solid #eceff1;padding:12px 14px;text-align:left;vertical-align:middle}.hub-action-table th{background:#fbfcfc;color:#4b5563;font-size:12px;text-transform:uppercase;letter-spacing:.4px}.hub-action-table td{font-weight:650;color:#111}.hub-action-table small{display:block;color:#667085;margin-top:4px;font-weight:600}.hub-status-pill{display:inline-flex;align-items:center;border:1px solid #cfd6dc;background:#f6f7f8;color:#344054;padding:5px 9px;border-radius:6px;font-size:12px;font-weight:850;white-space:nowrap}.hub-status-pill.overdue{border-color:#efa6a6;background:#fff1f1;color:#9f1d1d}.hub-status-pill.due{border-color:#e6c36a;background:#fff8e5;color:#7a5200}.hub-status-pill.done{border-color:#b8dec2;background:#edf8ef;color:#176334}.hub-status-pill.missing{border-color:#d6dde4;background:#f8fafb;color:#475467}.hub-worklist{display:grid}.hub-work-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid #ededed}.hub-work-row:last-child{border-bottom:0}.hub-work-row b{display:block;margin-bottom:4px}.hub-work-row small{display:block;color:#667085;font-weight:650;line-height:1.35}.hub-mini-filter{display:flex;gap:8px;flex-wrap:wrap}.hub-mini-filter .hub-status-pill{cursor:default}.hub-empty{padding:20px 18px;color:#667085;font-weight:700}.hub-dashboard-foot{display:flex;gap:10px;flex-wrap:wrap;padding:16px 18px;border-top:1px solid #ededed;background:#fbfcfc}.hub-learner-personal .eval-learner-picker{display:none}@media(max-width:1180px){.hub-dashboard-grid{grid-template-columns:1fr}.hub-donut-row{grid-template-columns:1fr}.hub-dashboard-hero{display:block}.hub-dashboard-hero .hub-dashboard-note{display:inline-block;text-align:left;margin-top:12px}}@media(max-width:760px){.hub-bar-row{grid-template-columns:90px 1fr 34px}.hub-action-table th:nth-child(3),.hub-action-table td:nth-child(3),.hub-action-table th:nth-child(4),.hub-action-table td:nth-child(4){display:none}.hub-work-row{grid-template-columns:1fr}.hub-dashboard-hero .hub-dashboard-note{width:100%;min-width:0}}



/* PHF role-based hub navigation and evaluation shortcut refinement */
.hub-overview-top-grid{display:grid;grid-template-columns:1.15fr 1.85fr;gap:16px;align-items:stretch}.hub-eval-entry-card{border:1.5px solid #0b4b39;background:linear-gradient(180deg,#fff,#f7fbf8);border-radius:8px;padding:22px 24px;box-shadow:0 12px 28px rgba(11,75,57,.08);display:grid;gap:16px;min-height:190px}.hub-eval-entry-head{display:flex;gap:14px;align-items:flex-start}.hub-eval-entry-icon{width:48px;height:48px;border-radius:10px;background:#eaf4ee;color:#0b4b39;display:grid;place-items:center;font-size:24px;font-weight:900;border:1px solid #cfe3d6}.hub-eval-entry-card h3{margin:0 0 6px;font-size:22px;color:#123b2b;letter-spacing:.2px}.hub-eval-entry-card p{margin:0;color:#52605a;font-weight:650;line-height:1.45}.hub-eval-entry-metrics{display:flex;gap:10px;flex-wrap:wrap}.hub-eval-entry-metrics span{display:inline-flex;align-items:center;gap:6px;border:1px solid #d9e2dd;background:#fff;padding:7px 10px;border-radius:6px;font-size:13px;font-weight:850;color:#344054}.hub-eval-entry-metrics b{color:#0b4b39}.hub-eval-entry-metrics .warn b{color:#8a5a00}.hub-eval-entry-metrics .danger b{color:#9f1d1d}.hub-eval-entry-card .eval-action{justify-content:center;width:100%;height:44px}.hub-kpi-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}.hub-learner-record-card{border:1.5px solid #0b4b39;background:#fbfdfc}.hub-learner-record-card h3{color:#123b2b}.hub-learner-record-list{display:grid;gap:8px;margin-top:12px}.hub-learner-record-list div{border:1px solid #e2e8e5;background:#fff;padding:10px 12px;font-weight:750;display:flex;align-items:center;justify-content:space-between;gap:10px}.hub-learner-record-list small{color:#667085;font-weight:650}.hub-learner-record-list span{color:#0b4b39;font-weight:900}@media(max-width:1180px){.hub-overview-top-grid{grid-template-columns:1fr}.hub-kpi-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));}}@media(max-width:760px){.hub-kpi-grid.compact{grid-template-columns:1fr}.hub-eval-entry-metrics{display:grid}.hub-eval-entry-head{display:block}.hub-eval-entry-icon{margin-bottom:12px}}


/* PATCH 2026-07-04 C: Tổng quan đầy đủ + vị trí Hồ sơ ở màn học */
/* PATCH 2026-07-04 C: Tổng quan đầy đủ + vị trí Hồ sơ ở màn học */
.phf-learning-profile-card{border:1.5px solid #9cc7ae!important;background:linear-gradient(180deg,#fbfffc,#fff)!important;box-shadow:0 10px 24px rgba(8,59,41,.06)!important;position:relative!important;margin-bottom:12px!important;padding:14px!important;border-radius:14px!important;}
.phf-learning-profile-card .profile-top{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;}
.phf-learning-profile-card .profile-icon{width:34px;height:34px;background:#e8f5ee;border:1px solid #cce6d6;color:#064533;border-radius:8px;display:grid;place-items:center;font-size:17px;flex:0 0 auto;}
.phf-learning-profile-card .profile-title{font-size:15px;font-weight:950;color:#064533;margin-bottom:4px;line-height:1.25;}
.phf-learning-profile-card .profile-desc{color:#53665e;font-weight:650;line-height:1.38;font-size:12.3px;}
.phf-learning-profile-card .profile-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:1px solid #e2ece6;border-bottom:1px solid #e2ece6;padding:10px 0;margin-top:10px;}
.phf-learning-profile-card .profile-meta div{min-width:0;}
.phf-learning-profile-card .profile-meta b{display:block;color:#6a7a72;font-size:10.5px;text-transform:uppercase;letter-spacing:.35px;margin-bottom:3px;font-weight:850;}
.phf-learning-profile-card .profile-meta span{display:block;color:#143d2d;font-size:12.2px;font-weight:900;line-height:1.3;word-break:break-word;}
.phf-learning-profile-card .profile-actions{display:grid;gap:8px;margin-top:12px;}
.phf-learning-profile-card .profile-actions .btn{height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #064533;color:#064533;background:#fff;padding:0 10px;font-weight:950;font-size:12.5px;border-radius:5px;flex:none;margin:0;width:100%;line-height:1.15;}
.phf-learning-profile-card .profile-actions .btn.primary{background:#064533;color:#fff;}
.phf-learning-profile-card .profile-actions .btn.secondary{height:auto;min-height:24px;border:0!important;background:transparent!important;color:#064533!important;justify-content:flex-start;padding:0!important;width:auto;font-size:12.3px;text-decoration:none;}
.phf-learning-profile-card .profile-actions .btn.secondary:hover{text-decoration:underline;}
.phf-learning-profile-card .profile-status{display:none!important;}
.phf-eval-entry{display:none!important;}
.hub-full-top-grid{display:grid;grid-template-columns:1.38fr 1fr 1fr 1fr;gap:16px;margin-bottom:16px;align-items:stretch;}
.hub-full-eval-card{padding:22px 24px;border:2px solid #9cc7ae;background:linear-gradient(180deg,#fbfffc,#fff);border-radius:8px;box-shadow:0 12px 28px rgba(11,75,57,.08);min-height:184px;display:flex;flex-direction:column;justify-content:space-between;}
.hub-full-card-head{display:flex;gap:12px;align-items:flex-start;}
.hub-full-icon{width:46px;height:46px;display:grid;place-items:center;background:#e8f5ee;border:1px solid #cde8d8;color:#0b4b39;font-size:22px;flex:0 0 auto;border-radius:8px;}
.hub-full-title{font-size:22px;font-weight:950;margin-bottom:5px;color:#17251e;}
.hub-full-count{font-size:20px;font-weight:950;margin-top:12px;color:#8a5a00;}
.hub-full-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.hub-full-actions .eval-action{min-height:40px;justify-content:center;}
.hub-kpi .hub-progress{height:8px;background:#e7ece9;margin-top:18px;overflow:hidden;border-radius:999px;}
.hub-kpi .hub-progress span{display:block;height:100%;background:#0b4b39;width:65%;border-radius:999px;}
.hub-kpi .hub-progress.green span{background:#167247;}.hub-kpi .hub-progress.orange span{background:#f59f26;}.hub-kpi .hub-progress.red span{background:#e5484d;}.hub-kpi .hub-progress.blue span{background:#2d6cdf;}
.hub-insight-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px;}
.hub-status-list{display:grid;}.hub-status-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid #edf1ef;font-weight:750;}.hub-status-row:last-child{border-bottom:0}.hub-status-label{display:flex;align-items:center;gap:9px}.hub-dot{width:10px;height:10px;display:inline-block;background:#0b4b39;border-radius:999px}.hub-dot.green{background:#167247}.hub-dot.orange{background:#f59f26}.hub-dot.red{background:#e5484d}.hub-dot.blue{background:#2d6cdf}
.hub-bar-fill.green{background:#167247}.hub-bar-fill.orange{background:#f59f26}.hub-bar-fill.red{background:#e5484d}.hub-bar-fill.blue{background:#2d6cdf}
.hub-status-pill.fail{border-color:#f1b2b2;background:#fff1f1;color:#a32020}.hub-status-pill.pass{border-color:#b8dec2;background:#edf8ef;color:#176334}.hub-status-pill.test{border-color:#b8d6ff;background:#eef6ff;color:#175cd3}
.hub-action-table .score-pass{color:#167247;font-weight:950}.hub-action-table .score-fail{color:#b42318;font-weight:950}.hub-action-table .score-none{color:#777;font-weight:850}
@media(max-width:1200px){.hub-full-top-grid{grid-template-columns:1fr 1fr}.hub-insight-grid{grid-template-columns:1fr}.hub-overview-top-grid{grid-template-columns:1fr!important}}
@media(max-width:760px){.hub-full-top-grid{grid-template-columns:1fr}.hub-full-actions{display:grid}.phf-learning-profile-card .profile-actions{display:grid}.hub-action-table th:nth-child(3),.hub-action-table td:nth-child(3),.hub-action-table th:nth-child(4),.hub-action-table td:nth-child(4){display:none}}

/* PHF Reports module - clean admin dashboard */
.hub-report-page{grid-column:1 / -1!important;display:grid;gap:18px}.hub-report-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end;background:#fff;border:1px solid #dce5df;border-radius:8px;padding:14px;box-shadow:0 10px 24px rgba(16,24,40,.035)}.hub-report-filter{display:grid;gap:6px;min-width:180px}.hub-report-filter label{font-size:11px;text-transform:uppercase;letter-spacing:.45px;color:#596963;font-weight:850}.hub-report-filter select{height:38px;border:1px solid #cfd9d4;border-radius:5px;background:#fff;color:#23332b;font-weight:750;padding:0 10px}.hub-report-top{display:grid;grid-template-columns:1.25fr repeat(3,minmax(0,1fr));gap:14px}.hub-report-main-card{border:2px solid #9cc7ae;background:linear-gradient(180deg,#fbfffc,#fff);padding:18px;border-radius:8px;box-shadow:0 12px 28px rgba(16,24,40,.04)}.hub-report-main-card h3{margin:0 0 8px;color:#0b4b39;font-size:20px}.hub-report-main-card p{margin:0;color:#617169;font-weight:650;line-height:1.45}.hub-report-main-card b{display:block;margin-top:12px;font-size:24px;color:#a86500}.hub-report-metric{background:#fff;border:1px solid #dce5df;border-radius:8px;padding:16px;box-shadow:0 10px 24px rgba(16,24,40,.035)}.hub-report-metric b{display:block;font-size:28px;line-height:1;color:#122019;margin-bottom:8px}.hub-report-metric span{display:block;color:#56645f;font-weight:850}.hub-report-metric p{margin:8px 0 0;color:#617169;font-size:12.5px;font-weight:650;line-height:1.35}.hub-report-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.hub-report-table-note{display:flex;justify-content:space-between;align-items:center;gap:12px}.hub-report-table-note small{color:#617169;font-weight:700}.hub-report-status{display:inline-flex;align-items:center;height:28px;padding:0 9px;border:1px solid #d7dfdc;background:#f7f9f8;border-radius:4px;font-size:12px;font-weight:850;white-space:nowrap}.hub-report-status.ok{background:#edf8ef;border-color:#b8dec2;color:#176334}.hub-report-status.warn{background:#fff7e8;border-color:#efc678;color:#8a5a00}.hub-report-status.bad{background:#fff1f1;border-color:#f1b2b2;color:#a32020}.hub-report-status.info{background:#eef6ff;border-color:#b8d6ff;color:#175cd3}.hub-report-action-row{display:flex;gap:8px;align-items:center;white-space:nowrap}.hub-report-table td small{display:block;color:#66756f;font-weight:650;margin-top:3px}.hub-report-empty{padding:18px;color:#66756f;background:#fbfcfc;border:1px dashed #cfd9d4;border-radius:8px;font-weight:700}@media(max-width:1100px){.hub-report-top,.hub-report-grid{grid-template-columns:1fr}.hub-report-filters{display:grid}.hub-report-filter{min-width:0}}


/* PHF logo + Vietnamese wording polish patch */
.logo,.logo-placeholder,.logo-vị,.logo-vị\ trí\ minh\ họa,.image-vị trí\ minh\ họa{
  border:0!important;background:transparent!important;padding:0!important;color:transparent!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;
}
.logo{width:174px!important;height:42px!important;flex:0 0 174px!important}
.logo-placeholder,.logo-vị{width:178px!important;height:44px!important;flex:0 0 178px!important}
.logo img,.logo-placeholder img,.logo-vị img{display:block;width:100%;height:100%;object-fit:contain}
.eval-admin-logo{width:132px!important;height:32px!important;border-radius:0!important;background:transparent!important;color:transparent!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important}
.eval-admin-logo img{width:100%;height:100%;object-fit:contain;display:block}
.print-head .phf-print-logo{width:150px;height:38px;display:flex;align-items:center;justify-content:flex-start;overflow:hidden}
.print-head .phf-print-logo img{width:100%;height:100%;object-fit:contain;display:block}
.original-goc-screen .topline{flex-wrap:wrap;align-items:center}
.original-goc-screen .badge{max-width:100%;white-space:normal;text-align:center;line-height:1.25;flex-shrink:1}
.eval-admin-brand{min-width:290px!important}.eval-admin-brand h1{white-space:nowrap}.eval-admin-nav{min-width:0;overflow:auto}.eval-admin-nav span{white-space:nowrap}.eval-tabbar{overflow:auto}.eval-tabbtn{white-space:nowrap}
@media(max-width:760px){.logo{width:150px!important;flex-basis:150px!important}.logo-placeholder,.logo-vị{width:150px!important;flex-basis:150px!important}.eval-admin-brand{min-width:0!important}.eval-admin-brand h1{font-size:18px!important}.eval-admin-logo{width:112px!important}.original-goc-screen .badge{width:100%;justify-content:center}}



/* PHF layout rà soát tổng thể - chống tràn giao diện sau khi gắn logo */
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
.app,.layout,.main,.focus-body,.eval-admin-shell,.eval-admin-content,.eval-admin-main,.hub-overview-page,.hub-report-page{min-width:0;max-width:100%}
img{max-width:100%;height:auto}

/* Header chính: logo không làm bung thanh trên */
.topbar{flex-wrap:wrap;min-width:0;overflow:hidden}
.brand{min-width:0;flex:1 1 520px}.brand>div:last-child{min-width:0}.brand h1{white-space:normal;line-height:1.18}.brand p{white-space:normal;line-height:1.35}.student-card{max-width:100%;white-space:normal;text-align:left}
.logo{max-width:178px!important}.logo img{max-width:100%;height:100%;object-fit:contain}

/* Header khu quản trị: menu được cuộn ngang, không đè nội dung */
.eval-admin-topbar{min-width:0;max-width:100%;overflow:hidden}.eval-admin-brand{flex:0 1 auto;min-width:0!important}.eval-admin-brand h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.eval-admin-nav{min-width:0;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;scrollbar-width:thin}.eval-admin-nav span{flex:0 0 auto}.eval-admin-user{flex:0 0 auto;min-width:0}

/* Tổng quan / Báo cáo: chống vỡ biểu đồ thanh và bảng */
.hub-content-grid,.hub-dashboard-grid,.hub-insight-grid,.hub-report-grid,.hub-report-top,.hub-overview-top-grid,.hub-full-top-grid{min-width:0;max-width:100%}.hub-panel,.hub-kpi,.hub-report-metric,.hub-report-main-card{min-width:0;max-width:100%;overflow:hidden}.hub-chart-box,.hub-bar-list{min-width:0;max-width:100%;overflow:hidden}.hub-bar-row{grid-template-columns:minmax(94px,138px) minmax(0,1fr) minmax(34px,max-content)!important;min-width:0;max-width:100%;gap:10px}.hub-bar-row b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-bar-track{min-width:0;max-width:100%}.hub-bar-row span{min-width:34px;max-width:72px;overflow:hidden;text-overflow:ellipsis;text-align:right;justify-self:end}
.hub-panel-head{min-width:0;flex-wrap:wrap}.hub-panel-head h3{min-width:0;line-height:1.25}.hub-panel-head span{line-height:1.25;text-align:right}.eval-table-wrap,.table-wrap,.b4-table-wrap{max-width:100%;overflow-x:auto}.hub-action-table,.hub-report-table{min-width:880px}

/* Nhãn/pill dài: cho xuống dòng đẹp, không tràn khỏi khung */
.original-goc-screen .badge,.student-card,.hub-status-pill,.hub-report-status,.eval-status-chip{max-width:100%;white-space:normal;line-height:1.25}.original-goc-screen .topline{display:flex;flex-wrap:wrap;gap:10px}.context-action{white-space:normal;text-align:right}

@media(max-width:920px){
  .topbar{align-items:flex-start}.brand{flex-basis:100%}.student-card{width:100%}.context-bar{grid-template-columns:1fr}.context-action{text-align:left;margin-top:8px}.hub-bar-row{grid-template-columns:minmax(84px,112px) minmax(0,1fr) minmax(28px,max-content)!important}.eval-admin-topbar{height:auto;min-height:62px;padding:10px 14px;flex-wrap:wrap}.eval-admin-nav{order:3;flex-basis:100%;padding-top:4px}.eval-admin-nav span{padding:10px 12px 8px}.eval-admin-logo{width:112px!important;height:28px!important}.eval-admin-brand h1{font-size:18px!important}.hub-action-table,.hub-report-table{min-width:760px}
}
@media(max-width:560px){
  .logo{width:132px!important;flex-basis:132px!important}.brand{gap:10px}.brand h1{font-size:19px}.brand p{font-size:12px}.hub-bar-row{grid-template-columns:1fr!important;gap:6px}.hub-bar-row span{justify-self:start;text-align:left}.hub-panel-head span{text-align:left}.hub-action-table,.hub-report-table{min-width:680px}
}



/* PHF layout fix v2 - sửa dứt điểm vùng học sau khi gắn logo */
body.phf-original-full-mode .layout{
  grid-template-columns:minmax(0,1fr)!important;
}
body.phf-original-full-mode .todo-panel,
body.phf-original-full-mode .right-panel{
  display:none!important;
}
body.phf-original-full-mode .main{
  width:100%!important;
  max-width:1280px!important;
  margin:0 auto!important;
  overflow:hidden!important;
}
body.phf-original-full-mode .original-goc-screen{
  padding:0!important;
  width:100%!important;
  max-width:100%!important;
}
body.phf-original-full-mode .original-goc-screen .topline{
  display:none!important;
}
body.phf-original-full-mode .original-goc-screen .welcome-card,
body.phf-original-full-mode .original-goc-screen .form-card{
  border-radius:24px!important;
  box-shadow:0 14px 32px rgba(7,59,45,.075)!important;
}
body.phf-original-full-mode .original-goc-screen .welcome-left{
  padding:42px 44px!important;
}
body.phf-original-full-mode .original-goc-screen h1{
  font-size:clamp(34px,4vw,52px)!important;
  line-height:1.08!important;
}

/* Logo: không để ảnh làm giãn/đè khung */
.logo,.logo-placeholder,.eval-admin-logo,.phf-print-logo{
  overflow:hidden!important;
}
.logo img,.logo-placeholder img,.eval-admin-logo img,.phf-print-logo img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
.topbar .logo{
  width:220px!important;
  height:56px!important;
  border:0!important;
  background:transparent!important;
  flex:0 0 220px!important;
  border-radius:0!important;
}
.topbar .brand{
  flex:1 1 auto!important;
  min-width:0!important;
}
.topbar .brand h1,
.topbar .brand p{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.student-card{
  flex:0 1 260px!important;
  white-space:normal!important;
  text-align:left!important;
}

/* Thanh giai đoạn và nhãn dài: không vỡ hàng */
.phase-strip{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  min-width:0!important;
  overflow:hidden!important;
}
.phase,.phase-top,.phase-title,.phase-date{
  min-width:0!important;
}
.phase-top{
  flex-wrap:wrap!important;
}
.phase-state{
  white-space:normal!important;
  text-align:center!important;
  line-height:1.2!important;
}
.phase-title,.context-action{
  overflow-wrap:anywhere!important;
  white-space:normal!important;
}

/* Biểu đồ thanh: giữ số liệu nằm trong card, không tràn mép phải */
.hub-panel{
  overflow:hidden!important;
}
.hub-chart-box,.hub-bar-list{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}
.hub-bar-row{
  display:grid!important;
  grid-template-columns:minmax(96px,150px) minmax(0,1fr) 48px!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
.hub-bar-row b{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.hub-bar-track{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
}
.hub-bar-row span{
  width:48px!important;
  max-width:48px!important;
  min-width:48px!important;
  justify-self:end!important;
  text-align:right!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.hub-report-grid,.hub-insight-grid,.hub-dashboard-grid,.hub-full-top-grid,.hub-report-top{
  min-width:0!important;
}
.hub-report-grid > *, .hub-insight-grid > *, .hub-dashboard-grid > *, .hub-full-top-grid > *, .hub-report-top > *{
  min-width:0!important;
}

/* Khu học tập: tránh thanh cuộn con gây cảm giác vỡ màn hình */
.todo-panel,.right-panel{
  scrollbar-width:thin;
}
.todo-item b,.todo-item span,.status-item b,.status-item span,.profile-title,.profile-desc{
  overflow-wrap:anywhere!important;
}

@media(max-width:1100px){
  .topbar .logo{width:190px!important;flex-basis:190px!important;height:50px!important}
  .topbar{align-items:flex-start!important}
  .phase-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hub-report-grid,.hub-insight-grid,.hub-dashboard-grid{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  .topbar .logo{width:170px!important;flex-basis:170px!important;height:46px!important}
  .topbar .brand{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .student-card{width:100%!important;flex-basis:auto!important}
  .phase-strip{grid-template-columns:1fr!important}
  .hub-bar-row{grid-template-columns:1fr!important;gap:6px!important}
  .hub-bar-row span{width:auto!important;max-width:100%!important;min-width:0!important;justify-self:start!important;text-align:left!important}
  body.phf-original-full-mode .original-goc-screen .welcome-card{grid-template-columns:1fr!important}
  body.phf-original-full-mode .original-goc-screen .welcome-left{padding:28px 22px!important}
}



/* PHF layout fix v3 - biểu đồ Báo cáo không lấn số + khôi phục nhận diện màn đầu */
.hub-report-page .hub-panel,
.hub-overview-page .hub-panel{
  overflow:hidden!important;
}
.hub-report-page .hub-bar-list,
.hub-overview-page .hub-bar-list,
.hub-chart-box .hub-bar-list{
  display:grid!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}
.hub-bar-row.phf-bar-safe{
  display:grid!important;
  grid-template-columns:minmax(132px,180px) minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
.hub-bar-row.phf-bar-safe .hub-bar-label{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  max-width:100%!important;
}
.hub-bar-row.phf-bar-safe .hub-bar-label b{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:13px!important;
  color:#344054!important;
}
.hub-bar-row.phf-bar-safe .hub-bar-label span{
  width:auto!important;
  min-width:22px!important;
  max-width:56px!important;
  text-align:right!important;
  justify-self:end!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#667085!important;
  font-weight:850!important;
}
.hub-bar-row.phf-bar-safe .hub-bar-track{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
.hub-bar-row.phf-bar-safe > span{
  display:none!important;
}
body.phf-original-full-mode .original-goc-screen .topline{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  margin-bottom:18px!important;
}
body.phf-original-full-mode .original-goc-screen .topline .logo,
body.phf-original-full-mode .original-goc-screen .topline .logo-placeholder{
  width:190px!important;
  height:48px!important;
  flex:0 0 190px!important;
}
body.phf-original-full-mode .original-goc-screen .topline .badge{
  max-width:100%!important;
  white-space:normal!important;
  line-height:1.2!important;
  text-align:center!important;
}
@media(max-width:760px){
  .hub-bar-row.phf-bar-safe{grid-template-columns:1fr!important;gap:7px!important;}
  .hub-bar-row.phf-bar-safe .hub-bar-label{grid-template-columns:minmax(0,1fr) auto!important;}
  body.phf-original-full-mode .original-goc-screen .topline{display:grid!important;}
}


/* PHF report compact chart v4 - Báo cáo dùng bảng tóm tắt gọn, tránh lấn/vỡ */
.hub-report-page .hub-report-grid{
  grid-template-columns:1fr 1fr!important;
  gap:14px!important;
}
.hub-report-page .hub-panel{
  overflow:hidden!important;
}
.phf-report-mini-list{
  display:grid;
  gap:8px;
  padding:12px 14px 14px;
}
.phf-report-mini-row{
  display:grid;
  grid-template-columns:minmax(82px,120px) 48px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-width:0;
  padding:7px 0;
  border-bottom:1px solid #eef1f3;
}
.phf-report-mini-row:last-child{border-bottom:0}
.phf-report-mini-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#1f2933;
  font-weight:850;
  font-size:13px;
}
.phf-report-mini-value{
  text-align:right;
  color:#475467;
  font-size:12.5px;
  font-weight:900;
  white-space:nowrap;
}
.phf-report-mini-track{
  height:8px;
  border-radius:999px;
  background:#eef1f3;
  overflow:hidden;
  min-width:0;
}
.phf-report-mini-fill{
  display:block;
  height:100%;
  min-width:5px;
  max-width:100%;
  border-radius:999px;
  background:#0b4b39;
}
.phf-report-mini-fill.warn{background:#f5a623}
.phf-report-mini-fill.danger{background:#e5484d}
.phf-report-mini-fill.muted{background:#98a2b3}
.phf-report-compact-note{
  color:#667085;
  font-size:12.5px;
  font-weight:700;
  padding:0 14px 12px;
}
@media(max-width:980px){
  .hub-report-page .hub-report-grid{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .phf-report-mini-row{grid-template-columns:minmax(0,1fr) 42px;gap:8px}
  .phf-report-mini-track{grid-column:1 / -1}
}



/* PHF logo welcome fix v5 - tránh logo màn chào mừng bị che/cắt mép */
body.phf-original-full-mode .main{
  overflow:visible!important;
}
body.phf-original-full-mode .original-goc-screen .shell{
  padding:22px 26px 28px!important;
}
body.phf-original-full-mode .original-goc-screen .topline{
  margin:0 0 18px!important;
  padding-top:2px!important;
  align-items:center!important;
}
body.phf-original-full-mode .original-goc-screen .topline .brand{
  align-items:center!important;
  min-width:0!important;
}
body.phf-original-full-mode .original-goc-screen .topline .logo-placeholder{
  width:176px!important;
  height:42px!important;
  flex:0 0 176px!important;
  overflow:visible!important;
}
body.phf-original-full-mode .original-goc-screen .topline .logo-placeholder img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
}
body.phf-original-full-mode .original-goc-screen .brand-title b{
  line-height:1.15!important;
}
@media(max-width:760px){
  body.phf-original-full-mode .original-goc-screen .shell{padding:18px 16px 22px!important;}
  body.phf-original-full-mode .original-goc-screen .topline .logo-placeholder{width:150px!important;height:38px!important;flex-basis:150px!important;}
}


/* PHF internal role chooser - lối vào nội bộ theo vai trò */
.phf-role-switcher{
  position:fixed;right:18px;bottom:18px;z-index:2147483646;
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(11,75,57,.18);border-radius:999px;
  background:#ffffff;color:#073b2d;box-shadow:0 14px 34px rgba(0,0,0,.14);
  padding:8px 10px;font-size:12px;font-weight:850;
}
.phf-role-switcher button{
  border:0;border-radius:999px;background:#0b4b39;color:#fff;
  padding:8px 11px;font-size:12px;font-weight:900;cursor:pointer;
}
.phf-role-switcher span{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phf-role-overlay{
  position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;
  padding:24px;background:linear-gradient(135deg,rgba(5,34,26,.90),rgba(6,65,47,.82));
  backdrop-filter:blur(5px);
}
.phf-role-dialog{
  width:min(860px,100%);background:#fff;border:1px solid rgba(255,255,255,.5);
  border-radius:26px;box-shadow:0 30px 70px rgba(0,0,0,.28);overflow:hidden;
}
.phf-role-dialog-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 24px;border-bottom:1px solid #e4eee8;background:linear-gradient(180deg,#fff,#f7fbf8);
}
.phf-role-dialog-brand{display:flex;align-items:center;gap:13px;min-width:0}
.phf-role-dialog-brand img{width:124px;max-height:42px;object-fit:contain;flex:0 0 auto}
.phf-role-dialog-brand h2{margin:0;color:#073b2d;font-size:24px;letter-spacing:-.3px;line-height:1.16}
.phf-role-dialog-brand p{margin:4px 0 0;color:#667085;font-size:13px;font-weight:700;line-height:1.4}
.phf-role-tag{display:inline-flex;align-items:center;border-radius:999px;border:1px solid #d7eadf;background:#eef8f2;color:#064533;padding:7px 10px;font-size:12px;font-weight:950;white-space:nowrap}
.phf-role-dialog-body{padding:22px 24px 24px}
.phf-role-dialog-body>p{margin:0 0 16px;color:#3f5b51;font-size:14px;font-weight:700;line-height:1.55}
.phf-role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.phf-role-card{
  border:1px solid #d8e8df;background:#fff;border-radius:18px;padding:16px;text-align:left;
  cursor:pointer;box-shadow:0 10px 22px rgba(7,59,45,.06);transition:.18s ease;
  display:grid;gap:9px;min-height:172px;
}
.phf-role-card:hover{border-color:#0b6b48;transform:translateY(-1px);box-shadow:0 16px 34px rgba(7,59,45,.12)}
.phf-role-card .icon{width:40px;height:40px;border-radius:14px;background:#edf7f2;display:grid;place-items:center;font-size:20px}
.phf-role-card h3{margin:0;color:#073b2d;font-size:17px;line-height:1.2}
.phf-role-card p{margin:0;color:#536d62;font-size:13px;font-weight:700;line-height:1.45}
.phf-role-card b{margin-top:auto;color:#0b4b39;font-size:12px;text-transform:uppercase;letter-spacing:.2px}
.phf-role-warning{margin-top:16px;border:1px solid #f1d59b;background:#fff9eb;color:#8a5a00;border-radius:14px;padding:11px 13px;font-size:12.5px;font-weight:750;line-height:1.45}
@media(max-width:760px){
  .phf-role-dialog-head{align-items:flex-start;flex-direction:column}
  .phf-role-grid{grid-template-columns:1fr}
  .phf-role-switcher{left:12px;right:12px;bottom:12px;justify-content:space-between}
}


/* PHF Company Intro official module - scoped riêng, không ảnh hưởng các màn đào tạo */
body.phf-intro-active > .app{display:none!important}
#introSection{min-height:100dvh;color:#173429;background:radial-gradient(circle at 8% 14%,rgba(240,219,157,.42),transparent 24%),radial-gradient(circle at 94% 84%,rgba(211,237,221,.88),transparent 28%),linear-gradient(135deg,#fffcf7 0%,#f4faf7 100%);font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;overflow:hidden}
#introSection[hidden]{display:none!important}.phf-intro-shell{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:10px 20px 10px}.phf-intro-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px}.phf-intro-brand{display:flex;align-items:center;gap:14px;min-width:0}.phf-intro-brand img{height:43px;width:auto;object-fit:contain;display:block}.phf-intro-brand div{border-left:1px solid rgba(22,77,57,.16);padding-left:14px;min-width:0}.phf-intro-brand b{display:block;color:#164d39;font-size:14px;line-height:1.05;letter-spacing:.08em}.phf-intro-brand span{display:block;color:#6b7c72;font-size:12px;font-weight:700;margin-top:4px;white-space:nowrap}.phf-intro-top-btn{border:1px solid #dce8e1;background:rgba(255,255,255,.94);color:#164d39;border-radius:999px;padding:10px 18px;font-weight:850;cursor:pointer;box-shadow:0 8px 22px rgba(22,77,57,.06)}.phf-intro-viewer{min-height:0;display:grid;place-items:center}.phf-intro-deck{width:min(1320px,100%);height:100%;position:relative}.phf-intro-slide{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(14px) scale(.992);transition:opacity .32s ease,transform .32s ease}.phf-intro-slide.active{opacity:1;pointer-events:auto;transform:none}.phf-intro-panel{height:100%;overflow:auto;border:1px solid rgba(22,77,57,.10);border-radius:24px;background:rgba(255,255,255,.87);box-shadow:0 18px 50px rgba(22,77,57,.12);position:relative}.phf-intro-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.80));pointer-events:none}.phf-intro-inner{position:relative;z-index:1;min-height:100%;padding:clamp(20px,2.3vw,32px)}.phf-intro-center .phf-intro-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.phf-intro-split .phf-intro-inner{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);gap:22px;align-items:center}.phf-intro-soft{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,249,237,.86))}.phf-intro-badge{display:inline-flex;align-items:center;gap:9px;border-radius:999px;background:#edf6f1;color:#164d39;padding:7px 12px;font-size:13px;font-weight:850;margin-bottom:10px}.phf-intro-badge:before{content:"";width:8px;height:8px;border-radius:50%;background:#d8aa3e;box-shadow:0 0 0 5px rgba(216,170,62,.16)}.phf-intro-logo-main{width:min(250px,34vw);max-width:100%;height:auto;object-fit:contain;margin-bottom:10px}.phf-intro-slide h1,.phf-intro-slide h2{margin:0;color:#164d39;font-weight:880;line-height:1.07;letter-spacing:-.035em}.phf-intro-slide h1{font-size:clamp(30px,4.1vw,50px);max-width:850px}.phf-intro-slide h2{font-size:clamp(26px,3.25vw,40px);max-width:760px}.phf-intro-lead{margin:10px 0 0;color:#496359;font-size:clamp(15px,1.08vw,18px);line-height:1.48;max-width:820px}.phf-intro-actions,.phf-intro-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}.phf-intro-chip{padding:9px 13px;border-radius:999px;border:1px solid #dce8e1;background:#fff;color:#355246;font-size:14px;font-weight:750;box-shadow:0 10px 24px rgba(22,77,57,.05)}.phf-intro-primary,.phf-intro-ghost{border-radius:999px;padding:11px 18px;font-size:14px;font-weight:900;cursor:pointer}.phf-intro-primary{border:0;background:#164d39;color:#fff;box-shadow:0 14px 32px rgba(22,77,57,.20)}.phf-intro-ghost{border:1px solid #dce8e1;background:#fff;color:#164d39}.phf-intro-media{display:grid;place-items:center;width:100%;max-width:470px;height:min(38vh,340px);min-height:250px;margin:auto;background:linear-gradient(180deg,#fff,#f8fcf9);border:1px solid #dce8e1;border-radius:28px;padding:18px;box-shadow:0 14px 36px rgba(22,77,57,.08);overflow:hidden}.phf-intro-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:18px;display:block}.phf-intro-media-cover img{width:100%;height:100%;object-fit:cover}.phf-intro-grid3,.phf-intro-products,.phf-intro-stores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.phf-intro-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px;width:100%;max-width:1040px}.phf-intro-card{background:#fff;border:1px solid #dce8e1;border-radius:20px;box-shadow:0 12px 28px rgba(22,77,57,.05);padding:14px}.phf-intro-card .ico{font-size:23px;display:block;margin-bottom:7px}.phf-intro-card strong{display:block;color:#164d39;font-size:17px;line-height:1.24}.phf-intro-card span{display:block;color:#5e6f66;font-size:13.5px;line-height:1.42;margin-top:7px}.phf-intro-quote-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.phf-intro-quote{min-height:132px}.phf-intro-quote small{display:inline-block;margin-bottom:7px;font-size:11px;font-weight:900;letter-spacing:.08em;color:#bf9024}.phf-intro-quote strong{font-size:21px;line-height:1.18}.phf-intro-quote.alt{background:linear-gradient(135deg,#164d39,#2e7154);color:#fff;border-color:transparent}.phf-intro-quote.alt small{color:rgba(255,255,255,.74)}.phf-intro-quote.alt strong{color:#fff}.phf-intro-quote.alt span{color:rgba(255,255,255,.88)}.phf-intro-store strong{font-size:17px}.phf-intro-video-slide{height:100%;display:flex;align-items:center;justify-content:center}.phf-intro-video-shell{width:min(1160px,100%);height:min(100%,calc(100dvh - 150px));border-radius:26px;overflow:hidden;background:#08261e;box-shadow:0 18px 50px rgba(22,77,57,.14)}.phf-intro-video-shell video{width:100%;height:100%;display:block;object-fit:cover;background:#08261e}.phf-intro-footer{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;min-height:58px}.phf-intro-nav,.phf-intro-auto{border:1px solid #dce8e1;background:rgba(255,255,255,.94);color:#164d39;border-radius:999px;padding:11px 18px;font-size:14px;font-weight:850;cursor:pointer;box-shadow:0 8px 22px rgba(22,77,57,.06);min-width:110px}.phf-intro-nav.primary{background:#164d39;color:#fff;border-color:#164d39}.phf-intro-nav:disabled{opacity:.45;cursor:not-allowed}.phf-intro-pager{display:flex;align-items:center;justify-content:center;gap:12px;min-width:178px;border-radius:999px;padding:10px 16px;color:#164d39;font-weight:850}.phf-intro-progress{width:90px;height:8px;background:#dfe9e4;border-radius:999px;overflow:hidden}.phf-intro-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#d8aa3e,#164d39);border-radius:999px;transition:width .24s ease}@media(max-height:760px){.phf-intro-shell{padding:6px 18px;gap:5px}.phf-intro-top{min-height:50px}.phf-intro-brand img{height:38px}.phf-intro-inner{padding:18px 26px}.phf-intro-slide h1{font-size:clamp(28px,3.8vw,44px)}.phf-intro-slide h2{font-size:clamp(24px,3vw,36px)}.phf-intro-lead{font-size:clamp(14px,1vw,16px);line-height:1.42}.phf-intro-media{height:min(30vh,260px);min-height:205px}.phf-intro-card{padding:12px}.phf-intro-card strong{font-size:15.5px}.phf-intro-card span{font-size:12.5px}.phf-intro-footer{min-height:54px}.phf-intro-video-shell{height:min(100%,calc(100dvh - 130px))}}@media(max-width:1100px){#introSection{overflow:auto}.phf-intro-shell{height:auto;min-height:100dvh}.phf-intro-deck{height:720px}.phf-intro-split .phf-intro-inner{grid-template-columns:1fr}.phf-intro-media{max-width:100%;height:265px}.phf-intro-grid3,.phf-intro-products,.phf-intro-stores{grid-template-columns:repeat(2,minmax(0,1fr))}.phf-intro-values{grid-template-columns:repeat(2,minmax(0,1fr))}.phf-intro-quote-grid{grid-template-columns:1fr}.phf-intro-brand div{display:none}}@media(max-width:700px){.phf-intro-shell{padding:10px}.phf-intro-brand img{height:38px}.phf-intro-top-btn{padding:9px 13px;font-size:13px}.phf-intro-deck{height:760px}.phf-intro-inner{padding:18px}.phf-intro-slide h1{font-size:32px}.phf-intro-slide h2{font-size:28px}.phf-intro-grid3,.phf-intro-products,.phf-intro-stores,.phf-intro-values{grid-template-columns:1fr}.phf-intro-media{height:230px;min-height:220px}.phf-intro-video-shell{height:min(58vw,300px)}.phf-intro-footer{gap:9px}.phf-intro-nav,.phf-intro-auto{min-width:0;flex:1 1 calc(50% - 9px)}.phf-intro-pager{order:-1;width:100%}}


/* PHF intro visual polish - giữ ảnh chìm và khung ảnh gọn */
#introSection .phf-intro-panel{overflow:hidden}
#introSection .phf-intro-panel:before{z-index:0}
#introSection .phf-intro-inner{z-index:2}
#introSection .phf-intro-ambient{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
#introSection .phf-intro-ambient img{position:absolute;display:block;max-width:none;user-select:none;filter:saturate(.95);opacity:.095}
#introSection .phf-intro-art-left{width:min(24vw,300px);left:-68px;top:92px;transform:rotate(-10deg)}
#introSection .phf-intro-art-right{width:min(40vw,540px);right:-46px;bottom:-86px;opacity:.12}
#introSection .phf-intro-art-corner{width:min(35vw,460px);right:-58px;bottom:-100px;opacity:.11}
#introSection .phf-intro-art-soft-left{width:min(28vw,340px);left:-80px;bottom:-80px;opacity:.08}
#introSection .phf-intro-media-cover img{object-position:center 24%}
#introSection .phf-intro-media{align-self:center}
#introSection .phf-intro-split .phf-intro-inner{align-items:center}
@media(max-height:760px){
  #introSection .phf-intro-media-cover img{object-position:center 20%}
  #introSection .phf-intro-art-right,#introSection .phf-intro-art-corner{bottom:-118px}
}
@media(max-width:1100px){
  #introSection .phf-intro-ambient img{opacity:.055}
  #introSection .phf-intro-art-right,#introSection .phf-intro-art-corner{right:-120px}
}
@media(max-width:700px){
  #introSection .phf-intro-ambient{display:none}
  #introSection .phf-intro-media-cover img{object-position:center 20%}
}



/* PHF intro visual fix - trang 2/3: ảnh chính gọn, ảnh chìm không tràn vào vùng điều khiển */
#introSection .phf-intro-split .phf-intro-media{
  height:min(34vh,300px);
  min-height:220px;
  padding:14px;
  align-self:center;
}
#introSection .phf-intro-split .phf-intro-media-cover img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  border-radius:18px;
}
#introSection .phf-intro-split .phf-intro-ambient{
  z-index:0;
  overflow:hidden;
}
#introSection .phf-intro-split .phf-intro-ambient img{
  opacity:.045;
  filter:saturate(.9) blur(.2px);
}
#introSection .phf-intro-split .phf-intro-art-corner{
  width:min(30vw,390px);
  right:-150px;
  bottom:-150px;
}
#introSection .phf-intro-split .phf-intro-panel:before{
  z-index:1;
}
#introSection .phf-intro-split .phf-intro-inner{
  z-index:2;
}
@media(max-height:760px){
  #introSection .phf-intro-split .phf-intro-media{
    height:min(30vh,248px);
    min-height:198px;
  }
  #introSection .phf-intro-split .phf-intro-art-corner{
    right:-180px;
    bottom:-180px;
  }
}
@media(max-width:1100px){
  #introSection .phf-intro-split .phf-intro-media{
    height:240px;
    min-height:210px;
  }
  #introSection .phf-intro-split .phf-intro-art-corner{
    right:-210px;
    bottom:-210px;
    opacity:.035;
  }
}


/* PHF intro image fix V3 - dùng ảnh ngang riêng, giữ ảnh chìm rõ nhưng không lấn */
#introSection .phf-intro-panel{overflow:hidden!important;}
#introSection .phf-intro-panel:before{z-index:0!important;background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.72))!important;}
#introSection .phf-intro-inner{position:relative!important;z-index:2!important;}
#introSection .phf-intro-ambient{position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;overflow:hidden!important;}
#introSection .phf-intro-ambient img{position:absolute!important;display:block!important;max-width:none!important;opacity:.14!important;filter:saturate(.95) blur(.15px)!important;}
#introSection .phf-intro-split .phf-intro-art-corner{width:min(34vw,440px)!important;right:-92px!important;bottom:-96px!important;transform:rotate(-2deg)!important;}
#introSection .phf-intro-split .phf-intro-media{
  width:min(520px,100%)!important;
  max-width:520px!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/9!important;
  padding:12px!important;
  align-self:center!important;
  overflow:hidden!important;
}
#introSection .phf-intro-split .phf-intro-media-cover img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:18px!important;
}
@media(max-height:760px){
  #introSection .phf-intro-split .phf-intro-media{width:min(500px,100%)!important;aspect-ratio:16/8.8!important;padding:10px!important;}
  #introSection .phf-intro-split .phf-intro-art-corner{right:-118px!important;bottom:-126px!important;opacity:.11!important;}
}
@media(max-width:1100px){
  #introSection .phf-intro-split .phf-intro-media{width:min(540px,100%)!important;margin-top:4px!important;}
  #introSection .phf-intro-split .phf-intro-art-corner{right:-140px!important;bottom:-120px!important;opacity:.09!important;}
}
@media(max-width:700px){
  #introSection .phf-intro-ambient{display:none!important;}
  #introSection .phf-intro-split .phf-intro-media{width:100%!important;aspect-ratio:16/10!important;}
}


/* PHF intro image fix V4 - giữ trọn ảnh, không mất phần dưới */
#introSection .phf-intro-split .phf-intro-media{
  width:min(500px,100%)!important;
  max-width:500px!important;
  aspect-ratio:16/9!important;
  padding:10px!important;
  transform:translateY(-6px)!important;
  background:linear-gradient(180deg,#fff,#fbfdfc)!important;
}
#introSection .phf-intro-split .phf-intro-media-cover img{
  object-fit:cover!important;
  object-position:center center!important;
}
#introSection .phf-intro-split .phf-intro-art-corner{
  bottom:-58px!important;
  right:-78px!important;
  opacity:.10!important;
}
#introSection .phf-intro-footer{
  position:relative!important;
  z-index:5!important;
  background:linear-gradient(180deg,rgba(245,252,248,.78),rgba(245,252,248,.96))!important;
  border-radius:24px 24px 0 0!important;
}
@media(max-height:760px){
  #introSection .phf-intro-split .phf-intro-media{width:min(470px,100%)!important;transform:translateY(-8px)!important;}
  #introSection .phf-intro-split .phf-intro-art-corner{bottom:-70px!important;right:-100px!important;opacity:.075!important;}
}
@media(max-width:1100px){
  #introSection .phf-intro-split .phf-intro-media{width:min(520px,100%)!important;transform:none!important;}
}


/* PHF intro image fix V5 - ảnh trang 2/3 phủ trọn khung, không letterbox */
#introSection .phf-intro-split .phf-intro-media{
  width:min(620px,100%)!important;
  max-width:620px!important;
  aspect-ratio:16/9!important;
  padding:0!important;
  overflow:hidden!important;
  transform:translateY(-2px)!important;
  background:#fff!important;
}
#introSection .phf-intro-split .phf-intro-media-cover img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:20px!important;
}
#introSection .phf-intro-split .phf-intro-art-corner{
  bottom:-54px!important;
  right:-74px!important;
  opacity:.095!important;
}
@media(max-height:760px){
  #introSection .phf-intro-split .phf-intro-media{width:min(560px,100%)!important;transform:translateY(-4px)!important;}
  #introSection .phf-intro-split .phf-intro-art-corner{bottom:-64px!important;right:-92px!important;opacity:.07!important;}
}
@media(max-width:1100px){
  #introSection .phf-intro-split .phf-intro-media{width:min(540px,100%)!important;transform:none!important;}
}
@media(max-width:700px){
  #introSection .phf-intro-split .phf-intro-media{width:100%!important;aspect-ratio:16/10!important;}
}


/* PHF intro page 2/3 final visual - theo mockup đã chốt */
#introSection .phf-intro-slide-p2 .phf-intro-ambient,
#introSection .phf-intro-slide-p3 .phf-intro-ambient{
  display:none!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-panel,
#introSection .phf-intro-slide-p3 .phf-intro-panel{
  background:rgba(255,255,255,.94)!important;
  border-radius:26px!important;
  overflow:hidden!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-panel:before,
#introSection .phf-intro-slide-p3 .phf-intro-panel:before{
  background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.90))!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-inner,
#introSection .phf-intro-slide-p3 .phf-intro-inner{
  grid-template-columns:minmax(0,1.02fr) minmax(390px,.88fr)!important;
  gap:clamp(20px,3vw,42px)!important;
  align-items:center!important;
  padding:clamp(24px,3vw,44px)!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-slide h2,
#introSection .phf-intro-slide-p3 .phf-intro-slide h2{
  letter-spacing:-.045em!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-media,
#introSection .phf-intro-slide-p3 .phf-intro-media{
  width:min(610px,100%)!important;
  max-width:610px!important;
  height:auto!important;
  max-height:min(63vh,610px)!important;
  aspect-ratio:1/1!important;
  padding:0!important;
  border-radius:28px!important;
  background:#fff!important;
  border:1px solid rgba(22,77,57,.10)!important;
  box-shadow:0 18px 46px rgba(22,77,57,.10)!important;
  overflow:hidden!important;
  transform:none!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-media-cover img,
#introSection .phf-intro-slide-p3 .phf-intro-media-cover img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:0!important;
  display:block!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-grid3,
#introSection .phf-intro-slide-p3 .phf-intro-products{
  gap:14px!important;
  margin-top:20px!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-card,
#introSection .phf-intro-slide-p3 .phf-intro-card{
  border-radius:22px!important;
  padding:18px!important;
  min-height:150px!important;
  box-shadow:0 14px 34px rgba(22,77,57,.045)!important;
}
@media(max-height:760px){
  #introSection .phf-intro-slide-p2 .phf-intro-inner,
  #introSection .phf-intro-slide-p3 .phf-intro-inner{padding:22px 30px!important;gap:24px!important;}
  #introSection .phf-intro-slide-p2 .phf-intro-media,
  #introSection .phf-intro-slide-p3 .phf-intro-media{width:min(505px,100%)!important;max-width:505px!important;max-height:min(58vh,505px)!important;}
  #introSection .phf-intro-slide-p2 .phf-intro-card,
  #introSection .phf-intro-slide-p3 .phf-intro-card{min-height:132px!important;padding:14px!important;}
}
@media(max-width:1100px){
  #introSection .phf-intro-slide-p2 .phf-intro-inner,
  #introSection .phf-intro-slide-p3 .phf-intro-inner{grid-template-columns:1fr!important;}
  #introSection .phf-intro-slide-p2 .phf-intro-media,
  #introSection .phf-intro-slide-p3 .phf-intro-media{width:min(520px,100%)!important;max-height:none!important;}
}
@media(max-width:700px){
  #introSection .phf-intro-slide-p2 .phf-intro-media,
  #introSection .phf-intro-slide-p3 .phf-intro-media{width:100%!important;aspect-ratio:1/1!important;}
}


.phf-intro-slide-p2 .phf-intro-media,
  .phf-intro-slide-p3 .phf-intro-media{
    width:min(500px,100%);
    max-width:500px;
    height:auto;
    min-height:0;
    aspect-ratio:1/1;
    padding:0;
    border-radius:30px;
    overflow:hidden;
    background:#fff;
    align-self:center;
    justify-self:center;
  }
  .phf-intro-slide-p2 .phf-intro-media img,
  .phf-intro-slide-p3 .phf-intro-media img{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:cover;
    object-position:center center;
    border-radius:inherit;
    display:block;
  }
  .phf-intro-slide-p2 .phf-intro-inner,
  .phf-intro-slide-p3 .phf-intro-inner{
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  }
  @media(max-height:760px){
    .phf-intro-slide-p2 .phf-intro-media,
    .phf-intro-slide-p3 .phf-intro-media{
      width:min(430px,100%);
      max-width:430px;
    }
  }
  @media(max-width:1100px){
    .phf-intro-slide-p2 .phf-intro-inner,
    .phf-intro-slide-p3 .phf-intro-inner{
      grid-template-columns:1fr;
    }
    .phf-intro-slide-p2 .phf-intro-media,
    .phf-intro-slide-p3 .phf-intro-media{
      width:min(420px,100%);
      max-width:420px;
    }
  }
  @media(max-width:700px){
    .phf-intro-slide-p2 .phf-intro-media,
    .phf-intro-slide-p3 .phf-intro-media{
      width:min(340px,100%);
      max-width:340px;
    }
  }


/* PHF intro trang 2/3 - đổi hẳn cách hiển thị ảnh: ảnh chính thu nhỏ vừa khung, không cắt */
#introSection .phf-intro-slide-p2 .phf-intro-media,
#introSection .phf-intro-slide-p3 .phf-intro-media{
  position:relative!important;
  width:min(560px,100%)!important;
  max-width:560px!important;
  aspect-ratio:1/1!important;
  height:auto!important;
  max-height:min(60vh,560px)!important;
  padding:16px!important;
  overflow:hidden!important;
  border-radius:30px!important;
  background:#fbfcf8!important;
  border:1px solid rgba(22,77,57,.10)!important;
  box-shadow:0 18px 46px rgba(22,77,57,.10)!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-media::before,
#introSection .phf-intro-slide-p3 .phf-intro-media::before{
  content:"";
  position:absolute;
  inset:-18px;
  z-index:0;
  background-size:cover;
  background-position:center center;
  filter:blur(18px);
  opacity:.18;
  transform:scale(1.08);
}
#introSection .phf-intro-slide-p2 .phf-intro-media::before{
  background-image:url('../intro/showcase/phf-intro-page2-exact.png');
}
#introSection .phf-intro-slide-p3 .phf-intro-media::before{
  background-image:url('../intro/showcase/phf-intro-page3-exact.png');
}
#introSection .phf-intro-slide-p2 .phf-intro-media::after,
#introSection .phf-intro-slide-p3 .phf-intro-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,.72));
}
#introSection .phf-intro-slide-p2 .phf-intro-media img,
#introSection .phf-intro-slide-p3 .phf-intro-media img,
#introSection .phf-intro-slide-p2 .phf-intro-media-cover img,
#introSection .phf-intro-slide-p3 .phf-intro-media-cover img{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.64)!important;
  box-shadow:0 12px 32px rgba(22,77,57,.08)!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-inner,
#introSection .phf-intro-slide-p3 .phf-intro-inner{
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
  align-items:center!important;
}
@media(max-height:760px){
  #introSection .phf-intro-slide-p2 .phf-intro-media,
  #introSection .phf-intro-slide-p3 .phf-intro-media{
    width:min(470px,100%)!important;
    max-width:470px!important;
    max-height:min(56vh,470px)!important;
    padding:12px!important;
  }
}
@media(max-width:1100px){
  #introSection .phf-intro-slide-p2 .phf-intro-inner,
  #introSection .phf-intro-slide-p3 .phf-intro-inner{grid-template-columns:1fr!important;}
  #introSection .phf-intro-slide-p2 .phf-intro-media,
  #introSection .phf-intro-slide-p3 .phf-intro-media{width:min(460px,100%)!important;max-width:460px!important;max-height:none!important;}
}
@media(max-width:700px){
  #introSection .phf-intro-slide-p2 .phf-intro-media,
  #introSection .phf-intro-slide-p3 .phf-intro-media{width:min(340px,100%)!important;max-width:340px!important;padding:10px!important;}
}


/* PHF intro trang 2/3 - khóa hình theo khung cứng, không zoom/crop/xén khi thay đổi màn hình */
#introSection .phf-intro-slide-p2 .phf-intro-inner,
#introSection .phf-intro-slide-p3 .phf-intro-inner{
  grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr)!important;
  align-items:center!important;
  gap:26px!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-media,
#introSection .phf-intro-slide-p3 .phf-intro-media{
  position:relative!important;
  width:min(600px,100%)!important;
  max-width:600px!important;
  height:clamp(285px,34vh,350px)!important;
  max-height:350px!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  align-self:center!important;
  justify-self:center!important;
  transform:translateY(-12px)!important;
  padding:10px!important;
  border-radius:30px!important;
  overflow:hidden!important;
  background:#fbfcf8!important;
  border:1px solid rgba(22,77,57,.10)!important;
  box-shadow:0 16px 40px rgba(22,77,57,.10)!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-media::before,
#introSection .phf-intro-slide-p3 .phf-intro-media::before{
  content:""!important;
  position:absolute!important;
  inset:-20px!important;
  z-index:0!important;
  background-size:cover!important;
  background-position:center center!important;
  filter:blur(18px) saturate(.95)!important;
  opacity:.13!important;
  transform:scale(1.06)!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-media::before{background-image:url('../intro/showcase/phf-intro-page2-exact.png')!important;}
#introSection .phf-intro-slide-p3 .phf-intro-media::before{background-image:url('../intro/showcase/phf-intro-page3-exact.png')!important;}
#introSection .phf-intro-slide-p2 .phf-intro-media::after,
#introSection .phf-intro-slide-p3 .phf-intro-media::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:linear-gradient(90deg,rgba(255,255,255,.42),rgba(255,255,255,.18),rgba(255,255,255,.42))!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-media img,
#introSection .phf-intro-slide-p3 .phf-intro-media img,
#introSection .phf-intro-slide-p2 .phf-intro-media-cover img,
#introSection .phf-intro-slide-p3 .phf-intro-media-cover img{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.70)!important;
  box-shadow:0 10px 28px rgba(22,77,57,.08)!important;
}
@media(max-height:760px){
  #introSection .phf-intro-slide-p2 .phf-intro-media,
  #introSection .phf-intro-slide-p3 .phf-intro-media{
    width:min(560px,100%)!important;
    height:clamp(250px,32vh,305px)!important;
    max-height:305px!important;
    transform:translateY(-14px)!important;
    padding:8px!important;
  }
  #introSection .phf-intro-slide-p2 .phf-intro-grid3,
  #introSection .phf-intro-slide-p3 .phf-intro-products{gap:10px!important;margin-top:12px!important;}
}
@media(max-width:1100px){
  #introSection .phf-intro-slide-p2 .phf-intro-inner,
  #introSection .phf-intro-slide-p3 .phf-intro-inner{grid-template-columns:1fr!important;}
  #introSection .phf-intro-slide-p2 .phf-intro-media,
  #introSection .phf-intro-slide-p3 .phf-intro-media{
    width:min(560px,100%)!important;
    height:clamp(250px,42vw,330px)!important;
    transform:none!important;
  }
}
@media(max-width:700px){
  #introSection .phf-intro-slide-p2 .phf-intro-media,
  #introSection .phf-intro-slide-p3 .phf-intro-media{
    width:100%!important;
    height:260px!important;
    padding:8px!important;
    border-radius:24px!important;
  }
}


/* PHF intro trang 2/3 - khung sát hình hơn, dùng đúng 2 ảnh gốc anh gửi */
#introSection .phf-intro-slide-p2 .phf-intro-inner,
#introSection .phf-intro-slide-p3 .phf-intro-inner{
  grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr)!important;
  align-items:center!important;
  gap:clamp(22px,3vw,38px)!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-media,
#introSection .phf-intro-slide-p3 .phf-intro-media{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:8px!important;
  border-radius:28px!important;
  background:#fbfcf8!important;
  border:1px solid rgba(22,77,57,.10)!important;
  box-shadow:0 14px 34px rgba(22,77,57,.09)!important;
  transform:translateY(-8px)!important;
  background-image:none!important;
  max-height:none!important;
  min-height:0!important;
  height:auto!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-media{
  width:min(580px,100%)!important;
  max-width:580px!important;
  aspect-ratio:842 / 575!important;
}
#introSection .phf-intro-slide-p3 .phf-intro-media{
  width:min(580px,100%)!important;
  max-width:580px!important;
  aspect-ratio:845 / 567!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-media::before,
#introSection .phf-intro-slide-p2 .phf-intro-media::after,
#introSection .phf-intro-slide-p3 .phf-intro-media::before,
#introSection .phf-intro-slide-p3 .phf-intro-media::after{
  content:none!important;
  display:none!important;
  background:none!important;
}
#introSection .phf-intro-slide-p2 .phf-intro-media img,
#introSection .phf-intro-slide-p3 .phf-intro-media img,
#introSection .phf-intro-slide-p2 .phf-intro-media-cover img,
#introSection .phf-intro-slide-p3 .phf-intro-media-cover img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:22px!important;
}
@media(max-height:760px){
  #introSection .phf-intro-slide-p2 .phf-intro-media,
  #introSection .phf-intro-slide-p3 .phf-intro-media{
    width:min(520px,100%)!important;
    max-width:520px!important;
    padding:6px!important;
    transform:translateY(-6px)!important;
  }
}
@media(max-width:1100px){
  #introSection .phf-intro-slide-p2 .phf-intro-inner,
  #introSection .phf-intro-slide-p3 .phf-intro-inner{grid-template-columns:1fr!important;}
  #introSection .phf-intro-slide-p2 .phf-intro-media,
  #introSection .phf-intro-slide-p3 .phf-intro-media{
    width:min(580px,100%)!important;
    max-width:580px!important;
    transform:none!important;
    margin-top:2px!important;
  }
}
@media(max-width:700px){
  #introSection .phf-intro-slide-p2 .phf-intro-media,
  #introSection .phf-intro-slide-p3 .phf-intro-media{
    width:100%!important;
    padding:6px!important;
    border-radius:22px!important;
  }
  #introSection .phf-intro-slide-p2 .phf-intro-media img,
  #introSection .phf-intro-slide-p3 .phf-intro-media img,
  #introSection .phf-intro-slide-p2 .phf-intro-media-cover img,
  #introSection .phf-intro-slide-p3 .phf-intro-media-cover img{
    border-radius:16px!important;
  }
}


/* PHF - màn nhận diện SĐT sau khi chọn Học viên */
.phf-phone-entry-overlay{position:fixed;inset:0;z-index:999999;background:rgba(5,38,30,.62);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.phf-phone-entry-card{width:min(560px,94vw);background:#fff;border:1px solid #dce8e1;border-radius:28px;box-shadow:0 28px 90px rgba(5,38,30,.34);padding:26px;color:#164d39}
.phf-phone-entry-head{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.phf-phone-entry-head img{width:138px;height:auto;object-fit:contain;flex:0 0 auto}
.phf-phone-entry-head div{border-left:1px solid rgba(22,77,57,.14);padding-left:13px;min-width:0}
.phf-phone-entry-head h2{margin:0;color:#164d39;font-size:22px;line-height:1.12;letter-spacing:-.02em}
.phf-phone-entry-head p{margin:4px 0 0;color:#63766d;font-size:13px;font-weight:750}
.phf-phone-entry-card .lead{margin:12px 0 18px;color:#425d52;font-size:14.5px;line-height:1.55;font-weight:650}
.phf-phone-entry-field{display:grid;gap:7px;margin-bottom:10px}
.phf-phone-entry-field label{font-size:13px;font-weight:900;color:#164d39}
.phf-phone-entry-field input{width:100%;height:50px;border:1px solid #cfe4d8;border-radius:16px;padding:0 15px;font-size:17px;font-weight:850;color:#143b2d;outline:none;background:#fbfefc}
.phf-phone-entry-field input:focus{border-color:#0b6b48;box-shadow:0 0 0 4px rgba(22,131,84,.12)}
.phf-phone-entry-error{min-height:22px;color:#b42318;font-size:13px;font-weight:850;margin:8px 0 0}
.phf-phone-entry-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:18px}
.phf-phone-entry-actions button{border-radius:999px;padding:12px 17px;font-weight:900;cursor:pointer;border:1px solid #dce8e1;background:#fff;color:#164d39}
.phf-phone-entry-actions .primary{border-color:#164d39;background:#164d39;color:#fff;box-shadow:0 12px 28px rgba(22,77,57,.18)}
.phf-phone-entry-actions .soft{background:#edf6f1;border-color:#cfe4d8}
.phf-phone-entry-note{margin-top:14px;border:1px solid #f1e0ad;background:#fffaf0;color:#6a5520;border-radius:16px;padding:11px 13px;font-size:12.5px;font-weight:750;line-height:1.45}
@media(max-width:640px){.phf-phone-entry-card{padding:20px;border-radius:22px}.phf-phone-entry-head{align-items:flex-start;flex-direction:column}.phf-phone-entry-head div{border-left:0;padding-left:0}.phf-phone-entry-actions button{flex:1 1 100%}}

/* Refactor Stage 2: điều hướng chính + giao diện cứng cáp hơn */
:root{
  --green-950:#09261d;
  --green-900:#123d2b;
  --green-800:#1f5137;
  --green-700:#2e704b;
  --green-600:#33885a;
  --green-100:#e8f2eb;
  --green-50:#f3f7f2;
  --line:#d4ded5;
  --text:#17231c;
  --muted:#647166;
  --soft:#f7f9f6;
  --shadow:0 10px 24px rgba(20,43,31,.075);
  --shadow2:0 16px 38px rgba(20,43,31,.10);
}
body{background:linear-gradient(180deg,#f3f6f1 0%,#f7f8f4 100%);color:var(--text)}
.topbar{border-radius:16px;border-color:#cdd8cf;box-shadow:0 8px 22px rgba(20,43,31,.075);padding:14px 16px;background:#fff}
.topbar .logo{border-style:solid;border-color:#cbd9cf;border-radius:10px;background:#fff}
.brand h1{letter-spacing:-.15px;color:#123d2b}.brand p{color:#68756b;font-weight:650}
.phf-main-nav{display:flex;align-items:center;justify-content:center;gap:6px;flex:1 1 360px;min-width:260px;background:#f4f7f3;border:1px solid #d7e0d8;border-radius:12px;padding:5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.phf-main-nav button{border:0;background:transparent;color:#526258;border-radius:9px;padding:10px 14px;font-weight:900;font-size:13.5px;cursor:pointer;white-space:nowrap;min-height:40px;letter-spacing:.1px}
.phf-main-nav button:hover{background:#fff;color:#123d2b;box-shadow:0 4px 12px rgba(20,43,31,.06)}
.phf-main-nav button.active{background:#123d2b;color:#fff;box-shadow:0 6px 16px rgba(18,61,43,.18)}
.student-card{border-radius:12px;background:#123d2b;border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 18px rgba(18,61,43,.14)}
.phase-strip,.context-bar,.panel,.main,.memory-card,.learn-card,.info-card,.b4-card,.value-card,.late-card,.today-box,.sample-box,details,.progress-card,.status-item{border-radius:12px;box-shadow:0 8px 22px rgba(20,43,31,.055)}
.phase-strip{border-color:#d3ddd5;padding:8px}.phase{border-radius:10px}.phase.active{background:#123d2b;border-color:#123d2b}.phase.done{background:#e8f2eb;border-color:#bfd4c4}
.context-bar{border-left-width:5px;border-color:#d1ded5;border-left-color:#2e704b;background:#fff}.context-action{border-radius:8px;background:#f3f7f2;border-color:#d1ded5;color:#1f5137}
.todo-item{border-radius:10px}.todo-item.active{background:#123d2b;border-color:#123d2b}.mark{border-radius:8px}
.main{border-radius:16px;border-color:#d1ded5}.focus-head{background:linear-gradient(135deg,#123d2b,#2e704b);padding:30px 34px}.focus-head .chip{border-radius:8px}.focus-body{background:#fff}.today-box,.sample-box,details{border-color:#d5e0d6}.memory-card,.learn-card,.info-card,.b4-card,.value-card,.late-card{border-color:#d6e0d8}
.btn,.eval-action,.eval-doc-btn,.phf-role-card b,.phf-phone-entry-card button{border-radius:9px!important}.btn{box-shadow:none!important}.btn-primary,.btn.primary,.eval-action.primary{background:#123d2b!important;border-color:#123d2b!important}.btn-soft{background:#f3f7f2!important;color:#123d2b!important;border:1px solid #d1ded5!important}
.eval-admin-topbar{border-bottom:1px solid #d6d6d6;box-shadow:0 6px 18px rgba(0,0,0,.04)}
.eval-admin-nav{gap:6px}.eval-admin-nav button{border-radius:0!important;font-weight:850}.eval-admin-nav button.active{color:#123d2b;border-bottom-color:#123d2b}.eval-admin-logo{border-radius:8px!important;background:#123d2b!important}
.hub-panel,.hub-kpi,.eval-card{border-radius:10px!important;box-shadow:0 8px 22px rgba(0,0,0,.045)!important}.hub-hero{border-radius:12px!important;background:linear-gradient(135deg,#123d2b,#2e704b)!important}
@media(max-width:980px){.phf-main-nav{order:3;flex-basis:100%;justify-content:flex-start;overflow:auto}.student-card{margin-left:auto}}
@media(max-width:760px){.phf-main-nav{width:100%;min-width:0}.phf-main-nav button{flex:1;padding:9px 8px;font-size:12.5px}.student-card{width:100%;margin-left:0}.topbar{border-radius:14px}}

/* ===== PHF Stage 2.1: navigation fix + professional visual tone ===== */
:root{
  --phf-deep:#034832;
  --phf-green:#0a5a3f;
  --phf-line:#dde4de;
  --phf-soft:#f6f8f6;
  --phf-text:#1f2b24;
  --phf-muted:#66736b;
}
html,body{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,-apple-system,sans-serif!important;background:#f6f7f5!important;color:var(--phf-text)!important;font-weight:400!important}
.app{max-width:1440px!important;padding:14px 22px!important}
.topbar{height:auto!important;min-height:60px!important;border-radius:0!important;border:0!important;border-bottom:1px solid var(--phf-line)!important;box-shadow:none!important;margin:-14px -22px 16px!important;padding:10px 22px!important;background:#fff!important;position:sticky;top:0;z-index:30}
.brand,.phf-logo-home{border:0;background:transparent;padding:0;margin:0;text-align:left;font-family:inherit;cursor:pointer;color:inherit;text-decoration:none}
.phf-logo-home:hover h1,.phf-logo-home:focus h1{color:var(--phf-green)!important;text-decoration:none}.phf-logo-home:focus{outline:2px solid rgba(10,90,63,.18);outline-offset:4px;border-radius:8px}
.topbar .logo{width:130px!important;height:42px!important;border:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important}.topbar .logo img{object-fit:contain!important;width:100%!important;height:100%!important}
.brand h1{font-size:21px!important;font-weight:700!important;color:var(--phf-deep)!important;letter-spacing:-.1px!important}.brand p{font-size:12.5px!important;font-weight:400!important;color:var(--phf-muted)!important;margin-top:1px!important}
.phf-main-nav{gap:4px!important;background:transparent!important;border:0!important;padding:0!important}.phf-main-nav button{border-radius:0!important;border:0!important;background:transparent!important;color:#27372f!important;font-size:14px!important;font-weight:600!important;padding:20px 14px 17px!important;border-bottom:3px solid transparent!important;box-shadow:none!important}.phf-main-nav button.active{color:var(--phf-deep)!important;border-bottom-color:var(--phf-deep)!important;background:transparent!important}.phf-main-nav button:hover{background:#f3f6f4!important;color:var(--phf-deep)!important}
.student-card{border:0!important;background:transparent!important;box-shadow:none!important;color:var(--phf-deep)!important;font-weight:600!important;text-align:left!important;padding:0!important}.student-card span{font-weight:400!important;color:var(--phf-muted)!important}
.phase-strip,.context-bar{border-radius:8px!important;box-shadow:none!important;border:1px solid var(--phf-line)!important;background:#fff!important}.context-action{background:#f2f6f3!important;border:1px solid var(--phf-line)!important;color:var(--phf-deep)!important;border-radius:6px!important;font-weight:600!important}.pin{background:#eef4ef!important;color:var(--phf-deep)!important}
.panel,.focus-body,.focus-head,.lesson-card,.form-card,.hub-panel,.hub-kpi,.eval-card,.progress-card,.status-item{border-radius:8px!important;border-color:var(--phf-line)!important;box-shadow:none!important;background:#fff!important}.todo-panel,.right-panel{padding:14px!important}.panel-title,.focus-head h2,.lesson-hero h2,.hub-panel h3,.eval-toolbar h2{font-weight:700!important;color:var(--phf-deep)!important;letter-spacing:0!important}.panel-sub,.focus-head p,.hub-panel small,.hub-row small,.status-item span{font-weight:400!important;color:var(--phf-muted)!important}.todo-item{border-radius:6px!important;border-color:#edf0ed!important;background:#fff!important;box-shadow:none!important}.todo-item b{font-weight:600!important}.todo-item.active{background:#f0f6f2!important;border-color:#b9d4c4!important}.todo-item .mark{border-radius:4px!important;background:#eef4ef!important;color:var(--phf-deep)!important}
.progress-num{font-size:31px!important;font-weight:700!important;color:var(--phf-deep)!important}.progress-label{font-weight:500!important;color:var(--phf-muted)!important}.bar{background:#edf2ee!important}.bar span{background:var(--phf-green)!important}.status-list{display:grid!important;gap:10px!important}.status-item b{font-weight:650!important;color:#36443d!important}.right-panel .status-item{padding:12px!important;border-radius:7px!important}
.btn,.btn-primary,.eval-action,.thin-btn,.phf-intro-primary,.phf-intro-nav{border-radius:6px!important;font-weight:650!important;box-shadow:none!important}.btn-primary,.eval-action.primary{background:var(--phf-deep)!important;border-color:var(--phf-deep)!important;color:#fff!important}.btn-soft,.eval-action:not(.primary){background:#fff!important;color:var(--phf-deep)!important;border:1px solid #cbd8cf!important}.btn:hover,.eval-action:hover{filter:none!important;transform:none!important;background:#f2f6f3!important}.btn-primary:hover,.eval-action.primary:hover{background:#063f2d!important;color:#fff!important}
.hub-hero,.hub-dashboard-hero{background:#fff!important;border:1px solid var(--phf-line)!important;color:var(--phf-text)!important;border-radius:8px!important;box-shadow:none!important}.hub-hero h2,.hub-dashboard-hero h2{color:var(--phf-deep)!important;font-weight:700!important}.hub-hero p,.hub-dashboard-hero p{color:var(--phf-muted)!important;font-weight:400!important}.hub-badge,.hub-dashboard-note{background:#f4f7f5!important;border:1px solid var(--phf-line)!important;color:var(--phf-deep)!important;border-radius:6px!important;font-weight:600!important}.hub-kpi b{font-size:26px!important;font-weight:700!important;color:var(--phf-deep)!important}.hub-kpi span{font-weight:650!important;color:#394840!important}.hub-kpi p{font-weight:400!important;color:var(--phf-muted)!important}.hub-row{border-radius:6px!important;border-color:#e7ece8!important}.hub-row b{font-weight:650!important;color:#25332b!important}
.eval-admin-shell{background:#f6f7f5!important;font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important}.eval-admin-topbar{height:58px!important;border-bottom:1px solid var(--phf-line)!important;box-shadow:none!important;padding:0 22px!important}.eval-admin-brand{border:0;background:transparent;padding:0;margin:0;text-align:left;font-family:inherit;cursor:pointer}.eval-admin-logo{background:transparent!important;border-radius:0!important;width:118px!important;height:38px!important}.eval-admin-logo img{width:100%!important;height:100%!important;object-fit:contain!important}.eval-admin-brand h1{font-size:20px!important;font-weight:700!important;color:var(--phf-deep)!important}.eval-admin-nav button{border-radius:0!important;background:transparent!important;border:0!important;border-bottom:3px solid transparent!important;color:#28372f!important;font-weight:600!important;padding:19px 13px 16px!important}.eval-admin-nav button.active{border-bottom-color:var(--phf-deep)!important;color:var(--phf-deep)!important}.eval-admin-user b{font-weight:650!important}.eval-admin-avatar{background:var(--phf-deep)!important}
.field label{font-weight:650!important;color:#2d3b33!important}.required-mark{color:#b42318;font-weight:700}.field input,.field select,.field textarea{border-radius:6px!important;border:1px solid #cfd8d1!important;box-shadow:none!important;background:#fff!important;font-family:inherit!important}.field input:focus,.field select:focus,.field textarea:focus{outline:none!important;border-color:var(--phf-green)!important;box-shadow:0 0 0 3px rgba(10,90,63,.10)!important}.phf-field-error input,.phf-field-error select{border-color:#d92d20!important;background:#fffafa!important}.phf-field-error-text{font-size:12px;color:#b42318;margin-top:5px;font-weight:500}.phf-form-error-box{border:1px solid #f4b8b8;background:#fff5f5;color:#9a1f1f;border-radius:6px;padding:10px 12px;margin:0 0 14px;font-weight:600;font-size:13px}.help-box,.timeline-note{border-radius:6px!important;box-shadow:none!important}
.phf-learning-profile-card,.hub-learner-record-card{display:none!important}
*{text-shadow:none!important}.chip,.badge,.tag{font-weight:650!important;border-radius:6px!important}.profile-icon,.icon{box-shadow:none!important}
@media(max-width:760px){.topbar{margin:-12px -12px 14px!important;padding:10px 12px!important;position:static}.topbar .logo{width:112px!important}.brand h1{font-size:18px!important}.phf-main-nav{width:100%!important;overflow:auto!important;justify-content:flex-start!important}.phf-main-nav button{padding:12px 10px 10px!important;white-space:nowrap!important}.student-card{width:100%!important}.app{padding:12px!important}.eval-admin-topbar{height:auto!important;min-height:58px!important;flex-wrap:wrap;padding:10px 12px!important}.eval-admin-nav{order:3;width:100%;overflow:auto;justify-content:flex-start!important}.eval-admin-nav button{white-space:nowrap;padding:11px 10px 9px!important}}

/* ===== PHF Stage 2.2: UI/state readability fix - vuông cứng cáp, chữ rõ ===== */
:root{
  --phf-deep:#034832;
  --phf-green:#0a5a3f;
  --phf-text:#1f2b24;
  --phf-muted:#5f6f66;
  --phf-line:#d9e1da;
  --phf-soft:#f7f8f6;
}
html,body,
button,input,select,textarea{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,-apple-system,sans-serif!important;
  letter-spacing:0!important;
}
body{font-weight:400!important;color:var(--phf-text)!important;background:#f6f7f5!important;}
/* giảm cảm giác hoạt hình: ô vuông hơn, viền mảnh, ít bóng */
.topbar,.panel,.main,.lesson-card,.form-card,.hub-panel,.hub-kpi,.eval-card,
.progress-card,.status-item,.todo-item,.today-box,.remember-box,.memory-card,
.learn-card,.info-card,.b4-card,.value-card,.late-card,.sample-box,details,
.table-card,.table-wrap,.b4-table-wrap,.scenario,.callout,.b4-callout,.warning,
.b4-safe,.test-note,.avoid-box,.bluebox,.hero-card,.b4-note,.note-strip,
.row-card,.note,.quick-item,.culture-item,.b4-list-item,.quiz-card,.b4-quiz,
.question-block,.image-placeholder,.hub-dashboard-hero,.hub-hero,.phf-phone-entry-card,
.phf-role-dialog,.phf-role-card{
  border-radius:6px!important;
  box-shadow:none!important;
}
/* tránh icon/ô tròn tròn; giữ dạng vuông mềm rất nhẹ */
.mark,.tick,.pin,.dot,.b4-dot,.hub-dot,.profile-icon,.icon,.phf-role-card .icon,
.eval-admin-avatar,.hub-eval-entry-icon,.hub-full-icon,.logo-placeholder,
.original-goc-screen .logo-vị{
  border-radius:4px!important;
}
.chip,.badge,.tag,.phase-state,.hub-status-pill,.eval-status-chip,.context-action,
.btn,.btn-primary,.btn-soft,.eval-action,.phf-phone-entry-actions button,
.phf-intro-primary,.phf-intro-nav{
  border-radius:5px!important;
}
/* Chữ tiêu đề và mô tả: đồng bộ với câu “Đọc phần lõi trên màn hình chính” */
h1,h2,h3,h4,
.focus-head h2,.lesson-hero h2,.lesson-card h1,.lesson-card h2,
.hub-dashboard-hero h2,.hub-hero h2,.eval-toolbar h2{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  font-weight:700!important;
  color:var(--phf-deep)!important;
  letter-spacing:0!important;
  text-shadow:none!important;
}
p,li,span,small,td,label,
.focus-head p,.lesson-hero p,.panel-sub,.status-item span,.hub-row small,.hub-panel small{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  font-weight:400!important;
  color:inherit;
  text-shadow:none!important;
}
/* Sửa chữ trắng/chìm trên nền sáng */
.lesson-hero,.focus-head{
  background:#fff!important;
  color:var(--phf-text)!important;
  border-bottom:1px solid var(--phf-line)!important;
}
.lesson-hero .kicker,.focus-head .chip,.kicker{
  color:var(--phf-deep)!important;
  background:#f1f5f2!important;
  border:1px solid var(--phf-line)!important;
  font-weight:600!important;
  border-radius:4px!important;
}
.focus-head h2,.focus-head p,.lesson-hero h2,.lesson-hero p{
  color:var(--phf-deep)!important;
}
.lesson-hero p,.focus-head p{color:var(--phf-muted)!important;font-weight:400!important;}
/* Sidebar bài học: active không dùng chữ trắng trên nền sáng */
.todo-item{
  background:#fff!important;
  border:1px solid #e2e8e3!important;
  color:var(--phf-text)!important;
}
.todo-item:hover{background:#f4f7f4!important;border-color:#c9d8ce!important;}
.todo-item.active,
.todo-item.current,
.todo-item[aria-current="true"]{
  background:#eef5f0!important;
  border-color:#9fc2ad!important;
  color:var(--phf-deep)!important;
  border-left:4px solid var(--phf-deep)!important;
}
.todo-item.done{background:#f5faf6!important;border-color:#cfe1d5!important;color:var(--phf-text)!important;}
.todo-item b,.todo-item.active b,.todo-item.current b,.todo-item[aria-current="true"] b{
  color:var(--phf-deep)!important;
  font-weight:650!important;
}
.todo-item span,.todo-item.active span,.todo-item.current span,.todo-item[aria-current="true"] span{
  color:var(--phf-muted)!important;
  font-weight:400!important;
}
.todo-item .mark,.todo-item.active .mark,.todo-item.current .mark,.todo-item[aria-current="true"] .mark{
  background:#e7f0ea!important;
  color:var(--phf-deep)!important;
  border:1px solid #d2ded6!important;
}
/* Các khối nội dung: giảm đậm, giảm màu */
.today-box,.remember-box,.bluebox,.hero-card,.b4-note,.note-strip{
  background:#f8faf8!important;
  border:1px solid var(--phf-line)!important;
  color:var(--phf-text)!important;
}
.check-list li{font-weight:400!important;color:#2f4037!important;}
.check-list li b,.remember-box b,.status-item b,.learn-card h4,.memory-card b{
  font-weight:650!important;color:var(--phf-deep)!important;
}
.tick{background:#eef5f0!important;color:var(--phf-deep)!important;border:1px solid #d4e1d8!important;}
.memory-card span,.tag{background:#f3f6f4!important;border-color:var(--phf-line)!important;color:var(--phf-deep)!important;font-weight:600!important;}
/* Header/menu giữ sạch như web chính thức */
.phf-main-nav button,.eval-admin-nav button{font-weight:600!important;color:#26372f!important;}
.phf-main-nav button.active,.eval-admin-nav button.active{color:var(--phf-deep)!important;border-bottom-color:var(--phf-deep)!important;background:transparent!important;}
.student-card{font-weight:600!important;}
/* Nút đổi vai trò bớt nổi và không che cảm giác UI */
.phf-role-switcher{
  border-radius:6px!important;
  box-shadow:0 4px 14px rgba(0,0,0,.08)!important;
  border:1px solid var(--phf-line)!important;
  background:#fff!important;
}
.phf-role-switcher button{border-radius:5px!important;font-weight:600!important;}
/* Card bên phải rõ ràng, không tròn */
.right-panel .status-item,.right-panel .progress-card{border-radius:6px!important;background:#fff!important;}
.progress-num{font-weight:700!important;color:var(--phf-deep)!important;}
.bar,.hub-kpi .hub-progress{border-radius:3px!important;}
.bar span,.hub-kpi .hub-progress span{border-radius:3px!important;background:var(--phf-green)!important;}
/* Bảng và tiêu đề bảng không dùng xanh/blue quá mạnh */
th{background:#f2f5f3!important;color:#2b3a32!important;font-weight:650!important;border-bottom:1px solid var(--phf-line)!important;}
.table-title{background:#f2f5f3!important;color:var(--phf-deep)!important;font-weight:650!important;}
/* Màn nhập SĐT / chọn vai trò: vuông và nghiêm túc hơn */
.phf-phone-entry-overlay,.phf-role-overlay{backdrop-filter:none!important;background:rgba(10,28,21,.55)!important;}
.phf-phone-entry-field input,.field input,.field select,.field textarea{border-radius:5px!important;font-weight:400!important;}
.phf-role-card .icon{display:none!important;}
.phf-role-card h3{font-weight:700!important;color:var(--phf-deep)!important;}
.phf-role-card p{font-weight:400!important;color:var(--phf-muted)!important;}
/* Bỏ các mảng xanh quá lớn trong dashboard học viên */
.hub-hero,.hub-dashboard-hero{
  background:#fff!important;
  color:var(--phf-text)!important;
  border:1px solid var(--phf-line)!important;
}
.hub-badge,.hub-dashboard-note{background:#f5f7f5!important;border-color:var(--phf-line)!important;color:var(--phf-deep)!important;}
/* đảm bảo không có text trắng lạc trên nền trắng, trừ các nút/nền xanh thật sự */
.panel *:not(.btn-primary):not(.primary):not(.phase.active):not(.eval-admin-avatar),
.main *:not(.btn-primary):not(.primary):not(.phase.active):not(.eval-admin-avatar){
  text-shadow:none!important;
}

/* =========================================================
   PHF Training Hub - Refactor Stage 3
   Trang chủ/header theo hướng website chính thức + ảnh đào tạo thật.
   Không đổi logic dữ liệu, chỉ chỉnh lớp điều hướng và nhận diện thị giác.
   ========================================================= */
:root{
  --phf-header-height:74px;
  --phf-corporate-green:#064533;
  --phf-corporate-green-2:#0b5b42;
  --phf-corporate-line:#d8e2dc;
  --phf-corporate-text:#16221c;
  --phf-corporate-muted:#5e6963;
}
body{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  background:#f5f7f5!important;
  color:var(--phf-corporate-text)!important;
}
.app{
  max-width:none!important;
  margin:0!important;
  padding:0 24px 24px!important;
}
.topbar.phf-site-header,
.eval-admin-topbar.phf-site-header{
  min-height:var(--phf-header-height)!important;
  height:auto!important;
  width:calc(100% + 48px)!important;
  margin:0 -24px 20px!important;
  padding:0 26px!important;
  border:0!important;
  border-bottom:1px solid var(--phf-corporate-line)!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:0 2px 12px rgba(15,23,42,.045)!important;
  display:flex!important;
  align-items:center!important;
  gap:24px!important;
  overflow:visible!important;
}
.topbar .brand,
.eval-admin-brand{
  flex:0 0 auto!important;
  min-width:260px!important;
  gap:12px!important;
  border:0!important;
  background:transparent!important;
  padding:0!important;
  cursor:pointer!important;
  text-align:left!important;
}
.topbar .logo,
.eval-admin-logo{
  width:148px!important;
  height:42px!important;
  flex:0 0 148px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.topbar .brand h1,
.eval-admin-brand h1{
  margin:0!important;
  font-size:20px!important;
  line-height:1.15!important;
  color:#063f31!important;
  font-weight:700!important;
  letter-spacing:-.2px!important;
}
.topbar .brand p{
  margin:2px 0 0!important;
  color:#6a756f!important;
  font-size:12.5px!important;
  font-weight:400!important;
}
.phf-main-nav,
.eval-admin-nav{
  flex:1 1 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:4px!important;
  min-width:0!important;
  overflow:auto!important;
  scrollbar-width:none!important;
}
.phf-main-nav::-webkit-scrollbar,.eval-admin-nav::-webkit-scrollbar{display:none!important;}
.phf-main-nav button,
.eval-admin-nav button{
  height:42px!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#2b3932!important;
  font-size:15px!important;
  font-weight:600!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  position:relative!important;
  box-shadow:none!important;
}
.phf-main-nav button:hover,
.eval-admin-nav button:hover{
  color:var(--phf-corporate-green)!important;
  background:#f4f7f5!important;
}
.phf-main-nav button.active,
.eval-admin-nav button.active{
  color:var(--phf-corporate-green)!important;
  background:transparent!important;
  font-weight:700!important;
}
.phf-main-nav button.active:after,
.eval-admin-nav button.active:after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  height:3px;
  background:var(--phf-corporate-green)!important;
}
.phf-login-entry{
  flex:0 0 auto!important;
  min-width:178px!important;
  min-height:42px!important;
  padding:7px 14px!important;
  border:1px solid var(--phf-corporate-green)!important;
  border-radius:2px!important;
  background:var(--phf-corporate-green)!important;
  color:#fff!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:1px!important;
  line-height:1.15!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.phf-login-entry span{font-size:13.5px!important;font-weight:700!important;color:#fff!important;}
.phf-login-entry small{font-size:11px!important;font-weight:400!important;color:rgba(255,255,255,.82)!important;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.phf-login-entry:hover{background:#08382d!important;border-color:#08382d!important;}
.student-card{display:none!important;}
.phf-role-switcher{display:none!important;}
.phase-strip,.context-bar{
  max-width:1440px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.layout{
  max-width:1440px!important;
  margin:0 auto!important;
}
.eval-admin-shell{
  max-width:1440px!important;
  margin:0 auto!important;
}
.eval-admin-shell>.phf-site-header{
  width:calc(100vw)!important;
  margin-left:calc((1440px - 100vw)/2)!important;
  margin-right:calc((1440px - 100vw)/2)!important;
  padding-left:max(26px,calc((100vw - 1440px)/2 + 26px))!important;
  padding-right:max(26px,calc((100vw - 1440px)/2 + 26px))!important;
}
.hub-hero.phf-photo-hero,
.hub-dashboard-hero.phf-photo-hero{
  position:relative!important;
  min-height:260px!important;
  padding:34px 38px!important;
  border:0!important;
  border-radius:3px!important;
  overflow:hidden!important;
  color:#fff!important;
  background-image:linear-gradient(90deg,rgba(3,36,28,.86),rgba(3,36,28,.62) 44%,rgba(3,36,28,.22)),url('../images/training/phf-training-hero.jpg')!important;
  background-size:cover!important;
  background-position:center 46%!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:24px!important;
  box-shadow:none!important;
}
.hub-hero.phf-photo-hero:after,
.hub-dashboard-hero.phf-photo-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.18));
  pointer-events:none;
}
.hub-hero.phf-photo-hero>*,
.hub-dashboard-hero.phf-photo-hero>*{position:relative!important;z-index:1!important;}
.phf-hero-kicker{
  display:inline-block!important;
  margin-bottom:10px!important;
  color:#dfeee6!important;
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:.3px!important;
  text-transform:uppercase!important;
}
.hub-hero.phf-photo-hero h2,
.hub-dashboard-hero.phf-photo-hero h2{
  color:#fff!important;
  font-size:clamp(32px,4vw,52px)!important;
  line-height:1.05!important;
  margin:0 0 10px!important;
  font-weight:700!important;
  letter-spacing:-.8px!important;
}
.hub-hero.phf-photo-hero p,
.hub-dashboard-hero.phf-photo-hero p{
  color:rgba(255,255,255,.88)!important;
  max-width:650px!important;
  font-size:17px!important;
  line-height:1.55!important;
  font-weight:400!important;
  margin:0!important;
}
.hub-badge,.hub-dashboard-note{
  border-radius:2px!important;
  background:rgba(255,255,255,.92)!important;
  color:#063f31!important;
  border:1px solid rgba(255,255,255,.85)!important;
  box-shadow:none!important;
  min-width:150px!important;
  font-weight:700!important;
}
.hub-badge small,.hub-dashboard-note small{color:#4f5f57!important;font-weight:400!important;}
.hub-kpi,.hub-panel,.eval-card,.status-item,.progress-card,.todo-item,.memory-card,.learn-card,.info-card,.b4-card,.value-card,.late-card{
  border-radius:3px!important;
  box-shadow:none!important;
}
.btn,.eval-action,.phf-intro-primary,.phf-intro-ghost,.context-action{
  border-radius:2px!important;
}
.mark,.tick,.pin,.hub-dot,.eval-admin-avatar,.phf-role-card .icon{
  border-radius:2px!important;
}
.focus-head{
  border-radius:0!important;
  background:#fff!important;
  color:#17231c!important;
  border-bottom:1px solid var(--phf-corporate-line)!important;
}
.focus-head .chip{
  border-radius:2px!important;
  color:#064533!important;
  background:#edf4ef!important;
  border-color:#d3e0d8!important;
}
.focus-head h2{color:#064533!important;font-weight:700!important;}
.focus-head p{color:#4f6259!important;font-weight:400!important;}
@media(max-width:980px){
  .topbar.phf-site-header,.eval-admin-topbar.phf-site-header{gap:12px!important;padding:12px 16px!important;width:calc(100% + 32px)!important;margin-left:-16px!important;margin-right:-16px!important;flex-wrap:wrap!important;}
  .app{padding-left:16px!important;padding-right:16px!important;}
  .topbar .brand,.eval-admin-brand{min-width:0!important;flex:1 1 100%!important;}
  .phf-main-nav,.eval-admin-nav{order:3;flex-basis:100%!important;}
  .phf-login-entry{margin-left:auto!important;}
  .hub-hero.phf-photo-hero,.hub-dashboard-hero.phf-photo-hero{min-height:230px!important;padding:26px 22px!important;display:block!important;}
  .hub-badge,.hub-dashboard-note{margin-top:18px!important;display:inline-block!important;}
}

/* Stage 3.1 - landing/header chính thức + vuông hóa giao diện */
html,body{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;}
body.phf-intro-active{background:#f4f7f3!important;}
.phf-intro-shell{border-radius:0!important;background:#f4f7f3!important;}
.phf-intro-top.phf-landing-header{height:78px!important;padding:0 34px!important;background:#fff!important;border-bottom:1px solid #e1e7e1!important;box-shadow:0 8px 22px rgba(0,0,0,.04)!important;display:flex!important;align-items:center!important;gap:26px!important;}
.phf-landing-brand{border:0!important;background:transparent!important;padding:0!important;display:flex!important;align-items:center!important;gap:16px!important;min-width:290px!important;cursor:pointer!important;text-align:left!important;border-radius:0!important;}
.phf-landing-brand img{width:174px!important;height:auto!important;display:block!important;}
.phf-landing-brand b{display:block!important;font-size:13px!important;letter-spacing:2.4px!important;color:#064533!important;font-weight:800!important;line-height:1.1!important;}
.phf-landing-brand span{display:block!important;margin-top:4px!important;font-size:12.5px!important;color:#66746c!important;font-weight:500!important;}
.phf-landing-nav{display:flex!important;align-items:center!important;gap:4px!important;flex:1!important;justify-content:center!important;}
.phf-landing-nav button{height:42px!important;padding:0 16px!important;border:0!important;background:transparent!important;color:#26362f!important;font-size:14.5px!important;font-weight:700!important;letter-spacing:.1px!important;cursor:pointer!important;border-radius:0!important;}
.phf-landing-nav button:hover{background:#f2f6f3!important;color:#064533!important;}
.phf-intro-top-btn.phf-landing-login{height:42px!important;border-radius:0!important;border:1px solid #064533!important;background:#064533!important;color:#fff!important;padding:0 18px!important;font-weight:800!important;box-shadow:none!important;white-space:nowrap!important;}
.phf-intro-top-btn.phf-landing-login:hover{background:#083f31!important;}
.phf-intro-viewer{padding:24px 32px 0!important;}
.phf-intro-deck{border-radius:0!important;}
.phf-landing-slide{background:transparent!important;}
.phf-landing-home{position:relative!important;min-height:calc(100vh - 146px)!important;overflow:hidden!important;border:1px solid #dfe7df!important;background:#0b3329!important;border-radius:0!important;display:flex!important;align-items:center!important;}
.phf-landing-photo{position:absolute!important;inset:0!important;background-image:url('../images/training/phf-training-hero.jpg')!important;background-size:cover!important;background-position:center!important;filter:saturate(1.03) contrast(1.02)!important;}
.phf-landing-overlay{position:absolute!important;inset:0!important;background:linear-gradient(90deg,rgba(3,35,26,.90) 0%,rgba(3,35,26,.78) 34%,rgba(3,35,26,.35) 72%,rgba(3,35,26,.18) 100%)!important;}
.phf-landing-content{position:relative!important;z-index:2!important;max-width:760px!important;padding:68px 70px!important;color:#fff!important;}
.phf-landing-kicker{display:inline-block!important;border-left:4px solid #d9b447!important;padding:0 0 0 12px!important;margin-bottom:18px!important;font-size:13px!important;letter-spacing:2.4px!important;font-weight:800!important;color:#f5f1d6!important;}
.phf-landing-content h1{margin:0 0 18px!important;color:#fff!important;font-size:48px!important;line-height:1.12!important;font-weight:800!important;letter-spacing:-.6px!important;}
.phf-landing-content p{margin:0!important;color:rgba(255,255,255,.88)!important;font-size:18px!important;line-height:1.6!important;font-weight:500!important;max-width:660px!important;}
.phf-landing-actions{display:flex!important;gap:12px!important;margin-top:30px!important;flex-wrap:wrap!important;}
.phf-landing-actions .phf-intro-primary,.phf-landing-actions .phf-intro-ghost{height:48px!important;border-radius:0!important;padding:0 24px!important;font-weight:800!important;box-shadow:none!important;}
.phf-landing-actions .phf-intro-primary{background:#fff!important;color:#064533!important;border:1px solid #fff!important;}
.phf-landing-actions .phf-intro-ghost{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.72)!important;}
.phf-landing-points{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1px!important;margin-top:40px!important;border:1px solid rgba(255,255,255,.28)!important;background:rgba(255,255,255,.20)!important;max-width:720px!important;}
.phf-landing-points div{background:rgba(5,38,30,.72)!important;padding:16px!important;border-radius:0!important;}
.phf-landing-points b{display:block!important;color:#fff!important;font-size:13px!important;font-weight:800!important;margin-bottom:4px!important;}
.phf-landing-points span{display:block!important;color:rgba(255,255,255,.76)!important;font-size:12.5px!important;line-height:1.45!important;font-weight:500!important;}
#introSection.is-landing .phf-intro-footer{display:none!important;}
#introSection:not(.is-landing) .phf-intro-top.phf-landing-header{height:68px!important;}
#introSection:not(.is-landing) .phf-intro-viewer{padding:18px 28px 0!important;}
#introSection:not(.is-landing) .phf-landing-nav button:first-child{background:#f2f6f3!important;color:#064533!important;border-bottom:2px solid #064533!important;}

/* Vuông hóa các ô/nút/card đang bị bo tròn quá nhiều */
.topbar,.phase-strip,.phase,.context-bar,.panel,.main,.focus-head,.today-box,.memory-card,.sample-box,details,.progress-card,.status-item,.learn-card,.info-card,.b4-card,.value-card,.late-card,.table-card,.table-wrap,.b4-table-wrap,.scenario,.callout,.b4-callout,.warning,.b4-safe,.test-note,.avoid-box,.bluebox,.remember-box,.hero-card,.b4-note,.note-strip,.row-card,.note,.quick-item,.culture-item,.b4-list-item,.todo-item,.student-card,.eval-table-card,.eval-detail-panel,.eval-role-note.clean,.eval-learner-picker{border-radius:4px!important;box-shadow:none!important;}
.btn,.btn-primary,.btn-soft,.phf-login-entry,.eval-login-entry,.phf-main-nav button,.eval-admin-nav button,.phf-intro-nav,.phf-intro-auto,.phf-intro-primary,.phf-intro-ghost,.phf-intro-top-btn,.context-action,.phase-state,.chip,.tag,.phf-intro-chip,.phf-intro-badge{border-radius:3px!important;box-shadow:none!important;}
.logo,.eval-admin-logo,.mark,.tick,.pin{border-radius:3px!important;}
.phf-intro-panel,.phf-intro-card,.phf-intro-media,.phf-intro-video-shell{border-radius:4px!important;box-shadow:none!important;}
.phf-intro-footer{border-radius:0!important;background:#fff!important;border-top:1px solid #dfe7df!important;box-shadow:none!important;}
.phf-intro-nav,.phf-intro-auto{height:42px!important;padding:0 18px!important;}
.phf-intro-progress,.bar{border-radius:0!important;}
.phf-intro-progress i,.bar span{border-radius:0!important;}

/* Giảm cảm giác màu mè/hoạt hình, tăng độ đọc */
h1,h2,h3,h4{font-weight:800!important;letter-spacing:-.2px;}
button{letter-spacing:.05px;}
.phf-intro-chip,.chip,.tag{font-weight:700!important;}
.phf-intro-card .ico{display:none!important;}
.todo-item.active{background:#eaf3ee!important;color:#0b392d!important;border-color:#8ebda7!important;}
.todo-item.active span{color:#4b6258!important;}
.todo-item.active .mark{background:#0b4b39!important;color:#fff!important;}
.phase.active{background:#0b4b39!important;color:#fff!important;}
.focus-head{background:#fff!important;color:#15382d!important;border-bottom:1px solid #dfe7df!important;}
.focus-head h2{color:#0b4b39!important;}
.focus-head p{color:#536d62!important;}
.focus-head .chip{background:#eef5f0!important;color:#0b4b39!important;border:1px solid #d4e3da!important;}

@media(max-width:900px){
  .phf-intro-top.phf-landing-header{height:auto!important;padding:14px 18px!important;flex-wrap:wrap!important;gap:12px!important;}
  .phf-landing-brand{min-width:0!important;flex:1 1 100%!important;}
  .phf-landing-nav{order:3;flex-basis:100%!important;justify-content:flex-start!important;overflow:auto!important;}
  .phf-intro-viewer{padding:12px!important;}
  .phf-landing-home{min-height:calc(100vh - 150px)!important;}
  .phf-landing-content{padding:42px 26px!important;}
  .phf-landing-content h1{font-size:34px!important;}
  .phf-landing-points{grid-template-columns:1fr!important;}
}

/* Stage 3.2 - homepage typography, professional cover, usage guide */
.phf-intro-top.phf-landing-header{
  height:76px!important;
  padding:0 32px!important;
  gap:24px!important;
}
.phf-landing-brand b{
  font-size:13px!important;
  letter-spacing:2px!important;
  font-weight:700!important;
}
.phf-landing-brand span{
  font-size:12.5px!important;
  font-weight:400!important;
  color:#596b62!important;
}
.phf-landing-nav button{
  font-size:14.5px!important;
  font-weight:600!important;
  color:#202b26!important;
  letter-spacing:0!important;
}
.phf-intro-top-btn.phf-landing-login{
  height:40px!important;
  padding:0 22px!important;
  font-size:14.5px!important;
  font-weight:600!important;
  letter-spacing:.05px!important;
  border-radius:2px!important;
}
.phf-landing-home{
  min-height:calc(100vh - 154px)!important;
  border:0!important;
  background:#092f25!important;
}
.phf-landing-photo{
  background-image:url('../images/training/phf-training-hero.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  filter:saturate(1.02) contrast(1.02) brightness(1.02)!important;
}
.phf-landing-overlay{
  background:
    linear-gradient(90deg,rgba(4,38,29,.86) 0%,rgba(4,38,29,.76) 34%,rgba(4,38,29,.34) 72%,rgba(4,38,29,.12) 100%),
    linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.10))!important;
}
.phf-landing-content{
  max-width:720px!important;
  padding:62px 66px!important;
}
.phf-landing-kicker{
  text-transform:none!important;
  letter-spacing:.8px!important;
  font-size:14px!important;
  font-weight:600!important;
  color:#f0e7bf!important;
  border-left:3px solid #d4ad45!important;
  margin-bottom:18px!important;
}
.phf-landing-content h1{
  font-size:42px!important;
  line-height:1.16!important;
  font-weight:700!important;
  letter-spacing:-.35px!important;
  max-width:620px!important;
}
.phf-landing-content p{
  font-size:17px!important;
  line-height:1.58!important;
  font-weight:400!important;
  color:rgba(255,255,255,.88)!important;
  max-width:620px!important;
}
.phf-landing-actions .phf-intro-primary,
.phf-landing-actions .phf-intro-ghost{
  height:46px!important;
  padding:0 24px!important;
  font-size:15px!important;
  font-weight:600!important;
  letter-spacing:0!important;
  border-radius:2px!important;
}
.phf-landing-points{
  margin-top:34px!important;
  max-width:680px!important;
  background:rgba(255,255,255,.16)!important;
  border-color:rgba(255,255,255,.24)!important;
}
.phf-landing-points div{
  background:rgba(4,35,27,.66)!important;
  padding:15px 16px!important;
}
.phf-landing-points b{
  font-size:13px!important;
  font-weight:650!important;
}
.phf-landing-points span{
  font-size:12.5px!important;
  font-weight:400!important;
}
/* guide slide/page */
.phf-guide-slide{background:#f4f7f3!important;}
.phf-guide-page{
  min-height:calc(100vh - 154px)!important;
  padding:54px 64px!important;
  background:#fff!important;
  border:1px solid #dfe7df!important;
  color:#17231c!important;
}
.phf-guide-intro{display:flex!important;flex-direction:column!important;justify-content:center!important;}
.phf-guide-head span,.phf-guide-eyebrow{
  display:inline-block!important;
  color:#064533!important;
  font-size:13px!important;
  font-weight:650!important;
  letter-spacing:.3px!important;
  border-left:3px solid #d2ad4a!important;
  padding-left:10px!important;
  margin-bottom:12px!important;
}
.phf-guide-head h2,.phf-guide-app h2{
  margin:0 0 12px!important;
  color:#064533!important;
  font-size:34px!important;
  line-height:1.2!important;
  font-weight:700!important;
  letter-spacing:-.25px!important;
}
.phf-guide-head p,.phf-guide-app p{
  margin:0!important;
  color:#4f6259!important;
  font-size:15.5px!important;
  line-height:1.58!important;
  font-weight:400!important;
}
.phf-guide-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  margin-top:26px!important;
}
.phf-guide-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
.phf-guide-grid article{
  background:#fff!important;
  border:1px solid #dfe7df!important;
  padding:18px!important;
  border-radius:2px!important;
  box-shadow:none!important;
}
.phf-guide-grid article>b{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  background:#064533!important;
  color:#fff!important;
  border-radius:2px!important;
  font-size:13px!important;
  margin-bottom:12px!important;
}
.phf-guide-grid h3,.phf-guide-grid h4{
  margin:0 0 8px!important;
  color:#17231c!important;
  font-size:16px!important;
  line-height:1.35!important;
  font-weight:650!important;
}
.phf-guide-grid p{font-size:14px!important;color:#53645c!important;line-height:1.55!important;}
.phf-guide-actions{display:flex!important;gap:10px!important;margin-top:26px!important;}
.phf-guide-actions .phf-intro-primary,.phf-guide-actions .phf-intro-ghost{height:44px!important;border-radius:2px!important;font-weight:600!important;}
.phf-guide-app{padding:6px!important;}
.phf-guide-hero{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
  background:#fff!important;
  border:1px solid #dfe7df!important;
  padding:26px!important;
  border-radius:2px!important;
  margin-bottom:16px!important;
}
.phf-guide-section{
  background:#fff!important;
  border:1px solid #dfe7df!important;
  padding:22px!important;
  border-radius:2px!important;
  margin-bottom:16px!important;
}
.phf-guide-section h3{margin:0!important;color:#064533!important;font-size:20px!important;font-weight:700!important;}
.phf-guide-note{
  background:#f4f7f3!important;
  border:1px solid #dfe7df!important;
  padding:18px!important;
  border-radius:2px!important;
  color:#293a32!important;
  line-height:1.55!important;
}
.phf-guide-note b{color:#064533!important;}
/* soften overly heavy text globally without losing professional square style */
.phf-intro-primary,.phf-intro-ghost,.phf-intro-top-btn,.btn,.eval-action,.phf-login-entry{font-weight:600!important;}
h1,h2,h3,h4{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;}
@media(max-width:980px){
  .phf-landing-content{padding:42px 26px!important;}
  .phf-landing-content h1{font-size:32px!important;}
  .phf-guide-page{padding:34px 22px!important;}
  .phf-guide-grid,.phf-guide-grid.compact{grid-template-columns:1fr!important;}
  .phf-guide-hero{display:block!important;}
  .phf-guide-hero .eval-action{margin-top:16px!important;}
}


/* Stage 3.3 - đồng bộ phông chữ toàn hệ thống PHF Training Hub
   Mục tiêu: mọi khu vực (landing, học viên, modal, form, đánh giá, báo cáo, hướng dẫn)
   dùng cùng một ngôn ngữ chữ: rõ, chuyên nghiệp, không lệch font giữa các màn. */
:root{
  --phf-font-main: Arial,"Helvetica Neue",Helvetica,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}
html,body,
body *:not(svg):not(path):not(i),
button,input,select,textarea,
table,th,td,
.phf-landing-header,.phf-landing-header *,
.phf-landing-home,.phf-landing-home *,
.phf-guide-page,.phf-guide-page *,
.eval-admin-shell,.eval-admin-shell *,
.eval-document,.eval-document *,
.weekly-eval-shell,.weekly-eval-shell *,
.modal,.modal *,
[role="dialog"],[role="dialog"] *{
  font-family:var(--phf-font-main)!important;
}
body{font-size:15px!important;font-weight:400!important;letter-spacing:0!important;}
p,span,li,td,th,label,input,select,textarea,small{
  letter-spacing:0!important;
}
h1,h2,h3,h4,.phf-landing-content h1,.phf-guide-head h2,.phf-guide-app h2{
  font-family:var(--phf-font-main)!important;
  font-weight:700!important;
  letter-spacing:-.2px!important;
}
/* Hạ độ nặng chữ ở menu, nút, modal để không bị cảm giác template/hoạt hình */
.phf-main-nav button,.phf-landing-nav button,.eval-admin-nav button,
.btn,.btn-primary,.btn-soft,.phf-intro-primary,.phf-intro-ghost,.phf-intro-top-btn,
.eval-action,.eval-primary-action,.phf-login-entry,.eval-login-entry,
button{
  font-family:var(--phf-font-main)!important;
  font-weight:600!important;
  letter-spacing:0!important;
}
/* Modal/form nhập SĐT và tạo hồ sơ: cùng font, chữ nhẹ hơn nhưng vẫn rõ */
.role-modal,.role-modal *,
.phone-modal,.phone-modal *,
.learner-modal,.learner-modal *,
.form-modal,.form-modal *,
.login-modal,.login-modal *,
.phf-modal,.phf-modal *,
.phf-form-error-box,.phf-field-error-text{
  font-family:var(--phf-font-main)!important;
}
.role-modal h2,.phone-modal h2,.learner-modal h2,.form-modal h2,.login-modal h2,.phf-modal h2,
.role-modal h3,.phone-modal h3,.learner-modal h3,.form-modal h3,.login-modal h3,.phf-modal h3{
  font-weight:700!important;
  letter-spacing:-.15px!important;
}
.role-modal p,.phone-modal p,.learner-modal p,.form-modal p,.login-modal p,.phf-modal p{
  font-weight:400!important;
  line-height:1.55!important;
}
/* Phiếu đánh giá/PDF preview cũng dùng font hệ thống, không dùng serif riêng. */
.eval-document,.eval-document-title h2,.eval-doc-section h4,.eval-doc-field,
.eval-doc-table th,.eval-doc-table td,.eval-doc-note b,.eval-doc-note p,
.eval-sign-row b,.eval-sign-row span,.eval-rate{
  font-family:var(--phf-font-main)!important;
}
.eval-document-title h2,.eval-doc-section h4,.eval-sign-row b{
  font-weight:700!important;
  letter-spacing:.2px!important;
}
/* Giữ giao diện vuông vức, nhưng chữ mềm hơn ở các nút chính trang chủ. */
.phf-landing-login,.phf-landing-actions .phf-intro-primary,.phf-landing-actions .phf-intro-ghost{
  font-size:15px!important;
  font-weight:600!important;
}

/* Stage 3.4 - dùng đúng ảnh ghép anh duyệt cho trang chủ, chỉnh chữ hiện đại và tách Hướng dẫn khỏi intro controls */
.phf-landing-home{
  min-height:calc(100vh - 154px)!important;
  background:#f5f8f4!important;
  border:1px solid #dfe7df!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
}
.phf-landing-photo{
  background-image:url('../images/training/phf-training-hero-collage.png')!important;
  background-size:cover!important;
  background-position:center center!important;
  filter:none!important;
}
.phf-landing-overlay{
  background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 30%,rgba(255,255,255,.18) 58%,rgba(255,255,255,0) 100%)!important;
}
.phf-landing-content{
  position:relative!important;
  z-index:2!important;
  margin-left:52px!important;
  max-width:470px!important;
  padding:30px 32px!important;
  color:#153b2d!important;
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(19,78,58,.16)!important;
  border-left:5px solid #0b5a3f!important;
  box-shadow:0 16px 38px rgba(14,45,32,.10)!important;
}
.phf-landing-kicker{
  display:block!important;
  margin:0 0 10px!important;
  padding:0!important;
  border-left:0!important;
  color:#0b5a3f!important;
  font-size:13px!important;
  line-height:1.25!important;
  letter-spacing:.2px!important;
  font-weight:600!important;
  text-transform:none!important;
}
.phf-landing-content h1{
  margin:0 0 12px!important;
  color:#073f2e!important;
  font-size:34px!important;
  line-height:1.18!important;
  font-weight:700!important;
  letter-spacing:-.2px!important;
  max-width:430px!important;
}
.phf-landing-content p{
  margin:0!important;
  color:#42564c!important;
  font-size:16px!important;
  line-height:1.56!important;
  font-weight:400!important;
  max-width:430px!important;
}
.phf-landing-actions{
  margin-top:22px!important;
  gap:10px!important;
}
.phf-landing-actions .phf-intro-primary,
.phf-landing-actions .phf-intro-ghost{
  height:43px!important;
  border-radius:0!important;
  padding:0 20px!important;
  font-size:14.5px!important;
  font-weight:600!important;
  box-shadow:none!important;
}
.phf-landing-actions .phf-intro-primary{
  background:#0b4d39!important;
  color:#fff!important;
  border:1px solid #0b4d39!important;
}
.phf-landing-actions .phf-intro-ghost{
  background:#fff!important;
  color:#0b4d39!important;
  border:1px solid #cfded5!important;
}
.phf-landing-points{
  margin-top:24px!important;
  max-width:430px!important;
  grid-template-columns:1fr!important;
  gap:0!important;
  border:1px solid #dce6df!important;
  background:#fff!important;
}
.phf-landing-points div{
  background:#fff!important;
  border-bottom:1px solid #e6eee8!important;
  padding:12px 14px!important;
}
.phf-landing-points div:last-child{border-bottom:0!important;}
.phf-landing-points b{
  color:#0b4d39!important;
  font-size:13px!important;
  font-weight:650!important;
}
.phf-landing-points span{
  color:#5c6d64!important;
  font-size:12.5px!important;
  font-weight:400!important;
}
#introSection.is-guide-page .phf-intro-footer{display:none!important;}
#introSection.is-guide-page .phf-intro-deck{height:calc(100vh - 96px)!important;}
#introSection.is-guide-page .phf-guide-page{min-height:calc(100vh - 118px)!important;}
.phf-guide-note-inline{
  margin:22px 0 0!important;
  border:1px solid #dfe7df!important;
  background:#f7faf7!important;
  padding:14px 16px!important;
  color:#354b41!important;
  line-height:1.55!important;
  font-size:14.5px!important;
}
@media(max-width:980px){
  .phf-landing-home{min-height:760px!important;align-items:flex-end!important;}
  .phf-landing-overlay{background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.90) 58%,rgba(255,255,255,.96) 100%)!important;}
  .phf-landing-content{margin:0 18px 22px!important;max-width:none!important;padding:24px!important;}
  .phf-landing-content h1{font-size:28px!important;}
}

/* === PHF Stage 3.5: homepage layout like approved demo, guide nav cleanup === */
:root{--phf-brand:#064533;--phf-brand-2:#0b6b45;--phf-soft:#f5faf6;--phf-line:#dfe8e1;--phf-text:#15352a;--phf-muted:#66766d;--phf-gold:#d7b14b;}
body,button,input,select,textarea{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;}
body.phf-landing-active .phf-intro-footer,
body.phf-guide-intro-active .phf-intro-footer{display:none!important;}
#introSection.is-guide-page .phf-landing-nav button{background:transparent!important;color:#26362f!important;border-bottom:0!important;}
#introSection.is-guide-page .phf-landing-nav button[data-intro-guide]{background:#f2f6f3!important;color:var(--phf-brand)!important;border-bottom:2px solid var(--phf-brand)!important;}
#introSection:not(.is-landing):not(.is-guide-page) .phf-landing-nav button:first-child{background:#f2f6f3!important;color:var(--phf-brand)!important;border-bottom:2px solid var(--phf-brand)!important;}
#introSection.is-landing .phf-landing-nav button{background:transparent!important;color:#26362f!important;border-bottom:0!important;}
#introSection.is-landing .phf-landing-nav button:first-child{background:#f2f6f3!important;color:var(--phf-brand)!important;border-bottom:2px solid var(--phf-brand)!important;}
.phf-intro-top.phf-landing-header{height:76px!important;padding:0 32px!important;background:#fff!important;border-bottom:1px solid #e3ebe5!important;box-shadow:0 8px 24px rgba(6,69,51,.06)!important;}
.phf-landing-brand b{font-size:14px!important;letter-spacing:2.3px!important;color:var(--phf-brand)!important;font-weight:700!important;}
.phf-landing-brand span{font-size:12.5px!important;color:var(--phf-muted)!important;font-weight:400!important;}
.phf-landing-nav button{font-weight:600!important;font-size:14.5px!important;letter-spacing:0!important;height:44px!important;border-radius:0!important;}
.phf-intro-top-btn.phf-landing-login{border-radius:0!important;height:44px!important;font-weight:600!important;font-size:14.5px!important;letter-spacing:0!important;background:var(--phf-brand)!important;border:1px solid var(--phf-brand)!important;box-shadow:none!important;padding:0 22px!important;}
.phf-intro-viewer{padding:0!important;background:#f6faf6!important;}
.phf-intro-deck{height:calc(100vh - 76px)!important;overflow:auto!important;}
.phf-landing-slide{height:auto!important;min-height:100%!important;padding:0!important;background:#f6faf6!important;}
.phf-homepage-wrap{min-height:100%;padding:0 28px 26px;background:linear-gradient(180deg,#fff 0%,#f5faf6 100%);}
.phf-homepage-hero{max-width:1540px;margin:0 auto;padding:44px 16px 26px;display:grid;grid-template-columns:minmax(380px,520px) minmax(560px,1fr);gap:34px;align-items:center;}
.phf-homepage-copy{position:relative;z-index:2;padding:18px 0 8px;color:var(--phf-text);}
.phf-homepage-kicker{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;background:#eaf5ee;border:1px solid #d7eadc;color:var(--phf-brand);font-size:13px;font-weight:700;text-transform:none;letter-spacing:.2px;margin-bottom:28px;}
.phf-homepage-kicker:before{content:"";width:14px;height:14px;background:var(--phf-brand);clip-path:polygon(50% 0,100% 30%,100% 70%,50% 100%,0 70%,0 30%);display:inline-block;}
.phf-homepage-copy h1{margin:0 0 20px!important;color:var(--phf-brand)!important;font-size:58px!important;line-height:1.08!important;font-weight:700!important;letter-spacing:-1.2px!important;text-transform:none!important;}
.phf-homepage-subtitle{margin:0 0 28px!important;color:#475a51!important;font-size:18px!important;line-height:1.65!important;font-weight:400!important;max-width:520px!important;}
.phf-homepage-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0 0 34px;}
.phf-homepage-actions .phf-intro-primary,.phf-homepage-actions .phf-intro-ghost{height:50px!important;border-radius:0!important;padding:0 24px!important;font-size:15px!important;font-weight:600!important;letter-spacing:0!important;box-shadow:none!important;}
.phf-homepage-actions .phf-intro-primary{background:var(--phf-brand)!important;color:#fff!important;border:1px solid var(--phf-brand)!important;}
.phf-homepage-actions .phf-intro-ghost{background:#fff!important;color:var(--phf-brand)!important;border:1px solid #b7d2c2!important;}
.phf-homepage-learn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--phf-line);background:var(--phf-line);max-width:620px;}
.phf-homepage-learn div{background:#fff;padding:16px 14px;min-height:92px;}
.phf-homepage-learn b{display:block;color:var(--phf-brand);font-size:14px;font-weight:700;margin-bottom:6px;line-height:1.3;}
.phf-homepage-learn span{display:block;color:#69766f;font-size:12.5px;font-weight:400;line-height:1.5;}
.phf-homepage-visual{position:relative;min-height:520px;}
.phf-homepage-visual:before{content:"";position:absolute;right:-28px;top:-28px;width:210px;height:210px;border-top:18px solid #248a4a;border-right:18px solid #248a4a;opacity:.8;z-index:0;}
.phf-homepage-main-photo{position:relative;z-index:1;margin:0;border:12px solid #fff;background:#fff;box-shadow:0 20px 48px rgba(11,67,49,.16);overflow:hidden;border-radius:0;}
.phf-homepage-main-photo img{display:block;width:100%;height:460px;object-fit:cover;object-position:center;filter:saturate(1.03) contrast(1.01);}
.phf-homepage-photo-strip{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:-42px 34px 0;}
.phf-homepage-photo-strip figure{margin:0;border:8px solid #fff;background:#fff;box-shadow:0 14px 34px rgba(11,67,49,.14);height:150px;overflow:hidden;border-radius:0;}
.phf-homepage-photo-strip img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;}
.phf-homepage-bottom{max-width:1540px;margin:0 auto;background:#fff;border:1px solid #e2eae3;display:grid;grid-template-columns:1.05fr .95fr;gap:0;box-shadow:0 18px 45px rgba(10,60,43,.06);}
.phf-homepage-block{padding:28px 30px;}
.phf-homepage-block + .phf-homepage-block{border-left:1px solid #e2eae3;}
.phf-homepage-block h2{margin:0 0 18px!important;color:var(--phf-brand)!important;font-size:19px!important;line-height:1.25!important;font-weight:700!important;}
.phf-homepage-program-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.phf-homepage-program-grid article{border:1px solid #e2eae3;background:#fbfdfb;padding:18px 14px;min-height:124px;text-align:center;}
.phf-homepage-program-grid b{display:block;color:var(--phf-brand);font-size:14px;font-weight:700;line-height:1.35;margin-bottom:8px;}
.phf-homepage-program-grid span{display:block;color:#66766d;font-size:12.5px;line-height:1.45;font-weight:400;}
.phf-homepage-block-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.phf-homepage-block-head h2{margin:0!important;}
.phf-homepage-block-head span{color:#7a877f;font-size:12.5px;}
.phf-homepage-gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.phf-homepage-gallery-grid figure{margin:0;}
.phf-homepage-gallery-grid img{display:block;width:100%;height:112px;object-fit:cover;border:1px solid #e2eae3;}
.phf-homepage-gallery-grid figcaption{margin-top:8px;text-align:center;color:var(--phf-brand);font-size:13px;font-weight:600;line-height:1.35;}
.phf-guide-actions{display:none!important;}
.phf-guide-note-inline b{font-weight:600;color:inherit;}
@media (max-width:1100px){
  .phf-homepage-hero{grid-template-columns:1fr;padding-top:30px;}
  .phf-homepage-copy h1{font-size:42px!important;}
  .phf-homepage-bottom{grid-template-columns:1fr;}
  .phf-homepage-block + .phf-homepage-block{border-left:0;border-top:1px solid #e2eae3;}
}
@media (max-width:720px){
  .phf-intro-deck{height:auto!important;min-height:calc(100vh - 150px)!important;}
  .phf-homepage-wrap{padding:0 14px 18px;}
  .phf-homepage-hero{padding:22px 0 18px;gap:20px;}
  .phf-homepage-copy h1{font-size:34px!important;}
  .phf-homepage-subtitle{font-size:15.5px!important;}
  .phf-homepage-learn,.phf-homepage-program-grid,.phf-homepage-gallery-grid{grid-template-columns:1fr;}
  .phf-homepage-main-photo img{height:320px;}
  .phf-homepage-photo-strip{grid-template-columns:1fr;margin:12px 0 0;}
  .phf-homepage-photo-strip figure{height:170px;}
  .phf-homepage-block{padding:22px 18px;}
}

/* Stage 3.8 - Admin-only direct training test frame + clean guide page */
.phf-admin-test-builder{
  border:1px solid #cfd9d2!important;
  background:#fff!important;
  padding:22px!important;
  margin:18px 0!important;
  border-radius:4px!important;
  box-shadow:none!important;
}
.phf-admin-test-builder .hub-panel-head{align-items:flex-start!important;margin-bottom:10px!important;}
.phf-admin-test-builder .hub-panel-head span{
  border:1px solid #d7e0da!important;
  color:#1d4d35!important;
  background:#f3f7f4!important;
  padding:6px 10px!important;
  border-radius:2px!important;
  font-size:12px!important;
  font-weight:600!important;
}
.phf-admin-test-desc{margin:0 0 16px!important;color:#41544a!important;line-height:1.55!important;max-width:860px!important;}
.phf-admin-test-steps{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  margin:16px 0!important;
}
.phf-admin-test-steps button{
  height:44px!important;
  border:1px solid #d4ddd6!important;
  background:#f7f9f7!important;
  color:#2d4037!important;
  border-radius:2px!important;
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  font-weight:600!important;
  opacity:1!important;
  cursor:not-allowed!important;
}
.phf-admin-test-actions{display:flex!important;gap:10px!important;flex-wrap:wrap!important;margin:12px 0!important;}
.phf-admin-test-actions button[disabled]{opacity:.7!important;cursor:not-allowed!important;filter:grayscale(.1)!important;}
.phf-guide-standalone-page{
  max-width:1080px!important;
  margin:0 auto!important;
  padding:8px 0 28px!important;
}
.phf-guide-standalone-page .phf-guide-hero.clean{
  background:#fff!important;
  border:1px solid #d7ded9!important;
  border-left:5px solid #155f3f!important;
  color:#17231c!important;
  min-height:auto!important;
  padding:28px!important;
  box-shadow:none!important;
}
.phf-guide-standalone-page .phf-guide-hero.clean h2{color:#143b2b!important;font-size:30px!important;font-weight:700!important;letter-spacing:0!important;}
.phf-guide-standalone-page .phf-guide-hero.clean p{color:#40544a!important;max-width:760px!important;}
.phf-guide-standalone-page .phf-guide-section,
.phf-guide-standalone-page .phf-guide-note{
  border-radius:4px!important;
  box-shadow:none!important;
}
.phf-guide-standalone-page .phf-guide-grid article{border-radius:4px!important;box-shadow:none!important;}
@media(max-width:760px){
  .phf-admin-test-steps{grid-template-columns:1fr!important;}
  .phf-guide-standalone-page .phf-guide-hero.clean{padding:20px!important;}
}

/* Stage 3.9 - direct training test menu page */
.phf-direct-test-page{
  padding:6px!important;
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
}
.phf-direct-test-page .hub-panel{
  border-radius:4px!important;
  border:1px solid #dde5de!important;
  box-shadow:none!important;
  background:#fff!important;
  padding:24px!important;
}
.phf-building-box{
  border:1px solid #dfe7e1!important;
  background:#f7faf8!important;
  padding:22px!important;
  margin:12px 0 18px!important;
}
.phf-building-box h2{
  margin:0 0 8px!important;
  color:#123d2b!important;
  font-size:26px!important;
  font-weight:700!important;
}
.phf-building-box p{
  margin:0!important;
  color:#40544a!important;
  line-height:1.55!important;
  max-width:760px!important;
}


/* Stage 3.9.1 - Guide/Direct training pages keep the official top menu visible */
body.phf-module-page-mode.phf-eval-mode > .app{
  max-width:none!important;
  margin:0!important;
  padding:0 24px 24px!important;
}
body.phf-module-page-mode.phf-eval-mode > .app > .topbar.phf-site-header{
  display:flex!important;
}
body.phf-module-page-mode.phf-eval-mode > .app > .phase-strip,
body.phf-module-page-mode.phf-eval-mode > .app > .context-bar{
  display:none!important;
}
body.phf-module-page-mode.phf-eval-mode .layout{
  max-width:1440px!important;
  margin:0 auto!important;
  padding:0!important;
}
body.phf-module-page-mode.phf-eval-mode .main{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body.phf-module-page-mode .phf-main-nav button[data-phf-main-nav="directTrainingTest"]{
  display:inline-flex!important;
  align-items:center!important;
}


/* Stage 3.9.2 - Header/menu visibility fix */
.topbar.phf-site-header{
  display:grid!important;
  grid-template-columns:minmax(300px,auto) minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:18px!important;
  overflow:hidden!important;
}
.topbar.phf-site-header .brand{
  min-width:300px!important;
  max-width:360px!important;
}
.topbar.phf-site-header .brand .logo{
  width:132px!important;
  height:38px!important;
  flex-basis:132px!important;
}
.topbar.phf-site-header .brand h1{
  font-size:18px!important;
  white-space:nowrap!important;
}
.topbar.phf-site-header .brand p{
  font-size:12px!important;
  white-space:nowrap!important;
}
.phf-main-nav{
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  flex-wrap:nowrap!important;
  justify-content:center!important;
}
.phf-main-nav button{
  flex:0 0 auto!important;
  padding:0 10px!important;
  font-size:14px!important;
}
.phf-login-entry{
  min-width:164px!important;
  max-width:178px!important;
  padding-left:12px!important;
  padding-right:12px!important;
}
body.phf-module-page-mode.phf-eval-mode .layout{
  display:block!important;
}
body.phf-module-page-mode.phf-eval-mode .todo-panel,
body.phf-module-page-mode.phf-eval-mode .right-panel{
  display:none!important;
}
body.phf-module-page-mode.phf-eval-mode .main{
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto!important;
}
@media(max-width:1180px){
  .topbar.phf-site-header{
    grid-template-columns:1fr!important;
    row-gap:8px!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
  }
  .topbar.phf-site-header .brand{max-width:none!important;min-width:0!important;}
  .phf-main-nav{justify-content:flex-start!important;width:100%!important;}
  .phf-login-entry{justify-self:start!important;}
}


/* Stage 3.9.3 - unified homepage header menu */
.phf-landing-nav{min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;justify-content:center!important;scrollbar-width:none!important;}
.phf-landing-nav::-webkit-scrollbar{display:none!important;}
.phf-landing-nav button{flex:0 0 auto!important;white-space:nowrap!important;padding-left:12px!important;padding-right:12px!important;}
.phf-landing-brand{flex:0 1 330px!important;min-width:250px!important;}
.phf-intro-top-btn.phf-landing-login{flex:0 0 auto!important;}
@media(max-width:1180px){
  .phf-intro-top.phf-landing-header{gap:14px!important;padding-left:20px!important;padding-right:20px!important;}
  .phf-landing-brand{flex-basis:280px!important;min-width:220px!important;}
  .phf-landing-nav{justify-content:flex-start!important;}
  .phf-landing-nav button{padding-left:10px!important;padding-right:10px!important;font-size:13.5px!important;}
}


/* Stage 3.9.4 - Mobile responsive / vertical menu fix
   Scope: display only. Do not change data, Supabase, progress, or learning logic. */
html, body{
  max-width:100%!important;
  overflow-x:hidden!important;
}
*, *:before, *:after{
  box-sizing:border-box!important;
}
img, video, canvas, svg{
  max-width:100%!important;
}

@media(max-width:760px){
  html, body{
    width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }
  body{
    margin:0!important;
  }
  .app,
  .phf-intro-shell,
  .phf-homepage-wrap,
  .eval-admin-shell,
  .eval-admin-page,
  .focus-body,
  .hub-page,
  .phf-guide-app,
  .phf-direct-test-page{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }

  /* Landing/header on phone: logo first, menu vertical below. */
  .phf-intro-top.phf-landing-header{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:10px 12px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    overflow:visible!important;
    position:sticky!important;
    top:0!important;
    z-index:50!important;
  }
  .phf-landing-brand,
  .phf-intro-brand.phf-landing-brand{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    flex:0 0 auto!important;
    justify-content:flex-start!important;
    padding:0!important;
  }
  .phf-landing-brand img,
  .phf-intro-brand.phf-landing-brand img{
    width:104px!important;
    max-width:104px!important;
    height:auto!important;
    flex:0 0 auto!important;
  }
  .phf-landing-brand div,
  .phf-intro-brand.phf-landing-brand div{
    min-width:0!important;
  }
  .phf-landing-brand b,
  .phf-intro-brand.phf-landing-brand b{
    font-size:15px!important;
    line-height:1.2!important;
  }
  .phf-landing-brand span,
  .phf-intro-brand.phf-landing-brand span{
    display:none!important;
  }
  .phf-landing-nav{
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    order:2!important;
    padding:0!important;
  }
  .phf-landing-nav button{
    width:100%!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 12px!important;
    justify-content:flex-start!important;
    text-align:left!important;
    white-space:normal!important;
    border:1px solid #dfe8e2!important;
    border-bottom:1px solid #dfe8e2!important;
    background:#fff!important;
    font-size:13.5px!important;
    line-height:1.25!important;
  }
  .phf-landing-nav button:first-child,
  #introSection.is-guide-page .phf-landing-nav button[data-intro-guide],
  #introSection.is-landing .phf-landing-nav button:first-child{
    border-left:4px solid var(--phf-brand)!important;
    border-bottom:1px solid #dfe8e2!important;
    background:#f4f8f5!important;
  }
  .phf-intro-top-btn.phf-landing-login{
    width:100%!important;
    height:40px!important;
    order:3!important;
    margin:0!important;
  }

  /* App/internal header on phone: vertical menu, no sideways scrolling. */
  .topbar.phf-site-header,
  .eval-admin-topbar.phf-site-header{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 0 10px 0!important;
    padding:10px 12px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    overflow:visible!important;
    position:sticky!important;
    top:0!important;
    z-index:40!important;
  }
  .topbar.phf-site-header .brand,
  .eval-admin-brand{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    flex:0 0 auto!important;
    padding:0!important;
  }
  .topbar.phf-site-header .brand .logo,
  .eval-admin-logo{
    width:104px!important;
    max-width:104px!important;
    height:34px!important;
    flex:0 0 104px!important;
  }
  .topbar.phf-site-header .brand h1,
  .eval-admin-brand h1{
    font-size:15.5px!important;
    line-height:1.2!important;
    white-space:normal!important;
  }
  .topbar.phf-site-header .brand p{
    display:none!important;
  }
  .phf-main-nav,
  .eval-admin-nav{
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    padding:0!important;
    order:2!important;
  }
  .phf-main-nav button,
  .eval-admin-nav button{
    width:100%!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 12px!important;
    text-align:left!important;
    justify-content:flex-start!important;
    white-space:normal!important;
    border:1px solid #dfe8e2!important;
    border-bottom:1px solid #dfe8e2!important;
    background:#fff!important;
    font-size:13.5px!important;
    line-height:1.25!important;
  }
  .phf-main-nav button.active,
  .eval-admin-nav button.active{
    border-left:4px solid var(--phf-deep)!important;
    border-bottom:1px solid #dfe8e2!important;
    background:#f4f8f5!important;
  }
  .phf-main-nav button.active:after,
  .eval-admin-nav button.active:after{
    display:none!important;
  }
  .phf-login-entry,
  .eval-login-entry,
  .student-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    order:3!important;
  }

  /* Page containers: never wider than phone screen. */
  .app{
    padding:10px!important;
  }
  .layout,
  body.phf-eval-mode .layout,
  .eval-admin-page,
  .eval-clean-layout,
  .eval-top-line,
  .weekly-eval-shell,
  .phf-homepage-hero,
  .phf-homepage-bottom,
  .phf-homepage-program-grid,
  .phf-homepage-gallery-grid,
  .phf-homepage-learn,
  .phf-guide-grid,
  .phf-admin-test-steps,
  .grid,
  .learning-grid,
  .b4-grid,
  .criteria-grid,
  .weekly-text-grid,
  .weekly-months,
  .eval-summary-strip{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .main,
  body.phf-module-page-mode.phf-eval-mode .main,
  body.phf-eval-mode .main,
  .panel,
  .focus-body,
  .focus-head,
  .hub-panel,
  .eval-card,
  .eval-table-card,
  .eval-detail-panel,
  .lesson-card,
  .form-card,
  .phf-guide-section,
  .phf-guide-note,
  .phf-building-box{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
  }

  /* Homepage mobile: one column, no image/card overflow. */
  .phf-homepage-wrap{
    padding:0 10px 16px!important;
  }
  .phf-homepage-hero{
    padding:20px 0 14px!important;
    gap:18px!important;
  }
  .phf-homepage-copy{
    padding:0!important;
  }
  .phf-homepage-copy h1{
    font-size:34px!important;
    line-height:1.12!important;
    letter-spacing:-.4px!important;
  }
  .phf-homepage-subtitle{
    font-size:15px!important;
    line-height:1.55!important;
    max-width:100%!important;
  }
  .phf-homepage-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .phf-homepage-actions .phf-intro-primary,
  .phf-homepage-actions .phf-intro-ghost{
    width:100%!important;
  }
  .phf-homepage-visual{
    min-height:0!important;
    width:100%!important;
    overflow:hidden!important;
  }
  .phf-homepage-visual:before{
    display:none!important;
  }
  .phf-homepage-main-photo{
    border-width:6px!important;
    width:100%!important;
  }
  .phf-homepage-main-photo img{
    height:auto!important;
    aspect-ratio:4/3!important;
  }
  .phf-homepage-photo-strip{
    display:grid!important;
    grid-template-columns:1fr!important;
    margin:10px 0 0!important;
    gap:8px!important;
  }
  .phf-homepage-photo-strip figure{
    height:auto!important;
    border-width:5px!important;
  }
  .phf-homepage-photo-strip img{
    height:auto!important;
    aspect-ratio:16/9!important;
  }
  .phf-homepage-bottom{
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
    gap:10px!important;
  }
  .phf-homepage-block{
    padding:16px 12px!important;
    border:1px solid #e2eae3!important;
    background:#fff!important;
  }
  .phf-homepage-block + .phf-homepage-block{
    border-left:1px solid #e2eae3!important;
  }

  /* Tables are allowed to scroll inside their own box, not break the whole page. */
  .table-wrap,
  .b4-table-wrap,
  .eval-table-wrap,
  .weekly-table-wrap,
  .record-table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  table{
    max-width:none!important;
  }

  .context-bar,
  .phase-strip{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .context-main,
  .weekly-form-head,
  .eval-toolbar,
  .eval-table-head,
  .hub-panel-head{
    display:block!important;
  }
  .focus-head h2,
  .lesson-hero h2,
  .phf-guide-app h2{
    font-size:24px!important;
    line-height:1.22!important;
  }
  .btn,
  .btn-primary,
  .btn-soft,
  .eval-action,
  .thin-btn,
  .context-action{
    max-width:100%!important;
    white-space:normal!important;
  }
}


/* Stage 3.9.5 - Mobile header/page overflow correction
   Purpose: remove the large blank header/visual area on phones and keep a visible vertical menu.
   Display-only patch: no Supabase/schema/progress changes. */
@media (max-width:760px){
  html, body{
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  #introSection,
  #introSection .phf-intro-shell,
  #introSection .phf-intro-viewer,
  #introSection .phf-intro-deck,
  #introSection .phf-homepage-wrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }

  /* Intro/home shell must not reserve a desktop slide height on phone. */
  #introSection .phf-intro-shell{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    padding:0 10px 14px!important;
    background:#f4f7f3!important;
  }
  #introSection .phf-intro-viewer{
    display:block!important;
    padding:10px 0 0!important;
  }
  #introSection .phf-intro-deck{
    position:static!important;
    height:auto!important;
    min-height:0!important;
  }
  #introSection.is-landing .phf-intro-slide,
  #introSection.is-guide-page .phf-intro-slide{
    position:static!important;
    inset:auto!important;
    display:none!important;
    height:auto!important;
    min-height:0!important;
    opacity:1!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  #introSection.is-landing .phf-intro-slide.active,
  #introSection.is-guide-page .phf-intro-slide.active,
  #introSection.is-landing .phf-landing-slide,
  #introSection.is-guide-page .phf-guide-slide{
    display:block!important;
  }

  /* Visible vertical menu for phone. */
  .phf-intro-top.phf-landing-header{
    position:sticky!important;
    top:0!important;
    z-index:80!important;
    display:block!important;
    height:auto!important;
    min-height:0!important;
    padding:10px 10px!important;
    margin:0!important;
    background:#fff!important;
    border:1px solid #e3ebe5!important;
    box-shadow:0 6px 18px rgba(6,69,51,.06)!important;
  }
  .phf-intro-brand.phf-landing-brand{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    margin:0 0 8px!important;
    padding:0!important;
  }
  .phf-intro-brand.phf-landing-brand img{
    width:148px!important;
    max-width:48vw!important;
    height:auto!important;
    object-fit:contain!important;
  }
  .phf-intro-brand.phf-landing-brand div{
    display:none!important;
  }
  .phf-landing-nav{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    padding:0!important;
    margin:0!important;
  }
  .phf-landing-nav button{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    height:auto!important;
    padding:9px 12px!important;
    border:1px solid #dfe8e2!important;
    border-left:4px solid transparent!important;
    background:#fff!important;
    color:#0b3f31!important;
    text-align:left!important;
    white-space:normal!important;
    font-size:14px!important;
    line-height:1.25!important;
    font-weight:700!important;
  }
  .phf-landing-nav button.active,
  #introSection.is-landing .phf-landing-nav button[data-intro-about],
  #introSection.is-guide-page .phf-landing-nav button[data-intro-guide]{
    border-left-color:#064533!important;
    background:#f3f8f5!important;
  }
  .phf-intro-top-btn.phf-landing-login{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:40px!important;
    margin:8px 0 0!important;
    padding:10px 12px!important;
    border-radius:2px!important;
    text-align:center!important;
  }

  /* Homepage: keep text first and remove the phone visual block that caused a tall blank area. */
  .phf-homepage-wrap{
    padding:0!important;
  }
  .phf-homepage-hero{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    padding:12px 0 0!important;
    margin:0!important;
  }
  .phf-homepage-copy{
    width:100%!important;
    max-width:100%!important;
    padding:18px 12px!important;
    margin:0!important;
    background:#fff!important;
    border:1px solid #e3ebe5!important;
  }
  .phf-homepage-visual,
  .phf-homepage-visual:before,
  .phf-homepage-photo-strip{
    display:none!important;
  }
  .phf-homepage-copy h1{
    font-size:34px!important;
    line-height:1.12!important;
    margin:0 0 16px!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
  .phf-homepage-subtitle{
    font-size:16px!important;
    line-height:1.55!important;
    margin-bottom:18px!important;
  }
  .phf-homepage-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .phf-homepage-actions button{
    width:100%!important;
    min-height:46px!important;
  }
  .phf-homepage-learn,
  .phf-homepage-bottom,
  .phf-homepage-program-grid,
  .phf-homepage-gallery-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
  }
  .phf-homepage-bottom{
    margin-top:10px!important;
  }
  .phf-homepage-block,
  .phf-homepage-learn > div{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* Internal/app header also uses a visible vertical menu on phone. */
  .topbar.phf-site-header,
  .eval-admin-topbar.phf-site-header{
    position:sticky!important;
    top:0!important;
    z-index:70!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    padding:10px!important;
    margin:0 0 10px!important;
    border-radius:0!important;
    overflow:visible!important;
  }
  .topbar.phf-site-header .brand,
  .eval-admin-brand{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 0 8px!important;
  }
  .phf-main-nav,
  .eval-admin-nav{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
  }
  .phf-main-nav button,
  .eval-admin-nav button{
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    height:auto!important;
    padding:9px 12px!important;
    justify-content:flex-start!important;
    text-align:left!important;
    white-space:normal!important;
  }
  .phf-login-entry,
  .eval-login-entry{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:8px 0 0!important;
  }
}

/* Stage 3.9.6 - Mobile menu collision fix
   Purpose: on phones, menu is collapsed by default and expands downward as a normal block,
   so it does not overlap or cover the web functions below. Desktop remains unchanged. */
.phf-mobile-menu-toggle{
  display:none!important;
}

@media (max-width:760px){
  .phf-mobile-menu-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:40px!important;
    padding:9px 14px!important;
    border:1px solid #cbd8cf!important;
    background:#fff!important;
    color:#064533!important;
    font-weight:800!important;
    font-size:14px!important;
    line-height:1.2!important;
    border-radius:2px!important;
    cursor:pointer!important;
    box-shadow:none!important;
    white-space:nowrap!important;
  }

  .phf-intro-top.phf-landing-header,
  .topbar.phf-site-header,
  .eval-admin-topbar.phf-site-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    overflow:visible!important;
    isolation:isolate!important;
  }

  .phf-intro-brand.phf-landing-brand,
  .topbar.phf-site-header .brand,
  .eval-admin-brand{
    grid-column:1!important;
    grid-row:1!important;
    margin:0!important;
    min-width:0!important;
    max-width:100%!important;
  }

  .phf-landing-menu-toggle,
  .phf-app-menu-toggle{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:end!important;
  }

  .phf-landing-nav,
  .phf-main-nav,
  .eval-admin-nav,
  .phf-intro-top-btn.phf-landing-login,
  .phf-login-entry,
  .eval-login-entry{
    grid-column:1 / -1!important;
  }

  /* Collapsed by default: no overlap, no hidden sideways menu. */
  .phf-landing-nav,
  .phf-main-nav,
  .eval-admin-nav,
  .phf-intro-top-btn.phf-landing-login,
  .phf-login-entry,
  .eval-login-entry{
    display:none!important;
  }

  /* Open state: menu expands downward and pushes page content down. */
  .phf-landing-header.phf-mobile-open .phf-landing-nav,
  .phf-site-header.phf-mobile-open .phf-main-nav,
  .phf-site-header.phf-mobile-open .eval-admin-nav{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    width:100%!important;
    max-width:100%!important;
    margin-top:8px!important;
    padding-top:8px!important;
    border-top:1px solid #e3ebe5!important;
    overflow:visible!important;
  }

  .phf-landing-header.phf-mobile-open .phf-intro-top-btn.phf-landing-login,
  .phf-site-header.phf-mobile-open .phf-login-entry,
  .phf-site-header.phf-mobile-open .eval-login-entry{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin-top:8px!important;
  }

  .phf-landing-nav button,
  .phf-main-nav button,
  .eval-admin-nav button{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    height:auto!important;
    padding:10px 12px!important;
    text-align:left!important;
    white-space:normal!important;
    border:1px solid #dfe8e2!important;
    border-left:4px solid transparent!important;
    background:#fff!important;
    color:#0b3f31!important;
    font-size:14px!important;
    line-height:1.25!important;
    font-weight:750!important;
    border-radius:2px!important;
  }

  .phf-landing-nav button.active,
  .phf-main-nav button.active,
  .eval-admin-nav button.active,
  #introSection.is-landing .phf-landing-nav button[data-intro-about],
  #introSection.is-guide-page .phf-landing-nav button[data-intro-guide]{
    border-left-color:#064533!important;
    background:#f3f8f5!important;
    color:#064533!important;
  }

  .phf-landing-nav button.active:after,
  .phf-main-nav button.active:after,
  .eval-admin-nav button.active:after{
    display:none!important;
  }

  .phf-intro-top.phf-landing-header,
  .topbar.phf-site-header,
  .eval-admin-topbar.phf-site-header{
    position:sticky!important;
    top:0!important;
    z-index:120!important;
    background:#fff!important;
  }

  /* Keep real page content below the opened header; no absolute/floating menu. */
  .phf-intro-viewer,
  .layout,
  .context-bar,
  .phase-strip,
  .phf-homepage-wrap{
    position:relative!important;
    z-index:1!important;
  }
}

/* Stage 3.9.7 - unified mobile header/menu across all pages
   Purpose: every main page uses the same mobile behavior: compact header, Menu button,
   vertical menu that opens in normal document flow, no overlap/collision, no horizontal overflow.
   Display-only patch: no Supabase/schema/progress changes. */
@media (max-width:760px){
  html, body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }
  body,
  #introSection,
  .app,
  .phf-intro-shell,
  .phf-intro-viewer,
  .phf-intro-deck,
  .phf-homepage-wrap,
  .layout,
  .main,
  #mainLesson,
  .eval-admin-shell,
  .eval-admin-page,
  .eval-admin-main,
  .eval-admin-sidebar,
  .phf-guide-app,
  .phf-direct-test-page,
  .hub-panel,
  .focus-body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }

  body.phf-eval-mode .app,
  body.phf-module-page-mode.phf-eval-mode > .app{
    padding:0!important;
    margin:0!important;
    max-width:100%!important;
  }
  body.phf-eval-mode .layout,
  body.phf-module-page-mode.phf-eval-mode .layout{
    display:block!important;
    margin:0!important;
    padding:0!important;
    max-width:100%!important;
  }
  body.phf-eval-mode .main,
  body.phf-module-page-mode.phf-eval-mode .main{
    display:block!important;
    margin:0!important;
    padding:10px!important;
    max-width:100%!important;
  }

  .phf-intro-top.phf-landing-header,
  .topbar.phf-site-header,
  .eval-admin-topbar.phf-site-header{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    z-index:10!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    margin:0 0 10px 0!important;
    padding:10px!important;
    overflow:visible!important;
    border-radius:0!important;
    background:#fff!important;
    border-bottom:1px solid #e2e9e4!important;
    box-shadow:none!important;
    box-sizing:border-box!important;
  }
  body.phf-module-page-mode.phf-eval-mode > .app > .topbar.phf-site-header{
    display:grid!important;
  }

  .phf-intro-brand.phf-landing-brand,
  .topbar.phf-site-header .brand,
  .eval-admin-brand{
    grid-column:1!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .phf-intro-brand.phf-landing-brand img{
    width:126px!important;
    max-width:42vw!important;
    height:auto!important;
    object-fit:contain!important;
    flex:0 0 auto!important;
  }
  .topbar.phf-site-header .brand .logo,
  .eval-admin-logo{
    width:118px!important;
    max-width:42vw!important;
    height:38px!important;
    flex:0 0 auto!important;
    padding:0!important;
  }
  .topbar.phf-site-header .brand .logo img,
  .eval-admin-logo img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  .phf-intro-brand.phf-landing-brand div,
  .topbar.phf-site-header .brand div:not(.logo){
    min-width:0!important;
    overflow:hidden!important;
  }
  .phf-intro-brand.phf-landing-brand b,
  .topbar.phf-site-header .brand h1,
  .eval-admin-brand h1{
    font-size:15px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    margin:0!important;
  }
  .phf-intro-brand.phf-landing-brand span,
  .topbar.phf-site-header .brand p{
    display:none!important;
  }

  .phf-mobile-menu-toggle,
  .phf-landing-menu-toggle,
  .phf-app-menu-toggle{
    grid-column:2!important;
    grid-row:1!important;
    display:inline-flex!important;
    justify-self:end!important;
    align-self:center!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:76px!important;
    min-height:40px!important;
    padding:8px 12px!important;
    border:1px solid #cbd8cf!important;
    background:#fff!important;
    color:#064533!important;
    font-size:14px!important;
    font-weight:800!important;
    line-height:1.2!important;
    border-radius:2px!important;
    box-shadow:none!important;
    white-space:nowrap!important;
  }

  .phf-landing-nav,
  .phf-main-nav,
  .eval-admin-nav,
  .phf-intro-top-btn.phf-landing-login,
  .phf-login-entry,
  .eval-login-entry{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    overflow:visible!important;
  }
  .phf-landing-nav,
  .phf-main-nav,
  .eval-admin-nav,
  .phf-intro-top-btn.phf-landing-login,
  .phf-login-entry,
  .eval-login-entry{
    display:none!important;
  }
  .phf-landing-header.phf-mobile-open .phf-landing-nav,
  .phf-site-header.phf-mobile-open .phf-main-nav,
  .phf-site-header.phf-mobile-open .eval-admin-nav,
  .eval-admin-topbar.phf-mobile-open .eval-admin-nav{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    margin-top:8px!important;
    padding-top:8px!important;
    border-top:1px solid #e2e9e4!important;
  }
  .phf-landing-header.phf-mobile-open .phf-intro-top-btn.phf-landing-login,
  .phf-site-header.phf-mobile-open .phf-login-entry,
  .phf-site-header.phf-mobile-open .eval-login-entry,
  .eval-admin-topbar.phf-mobile-open .eval-login-entry{
    display:block!important;
    margin-top:8px!important;
  }

  .phf-landing-nav button,
  .phf-main-nav button,
  .eval-admin-nav button{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    height:auto!important;
    padding:10px 12px!important;
    border:1px solid #dfe8e2!important;
    border-left:4px solid transparent!important;
    border-bottom:1px solid #dfe8e2!important;
    background:#fff!important;
    color:#0b3f31!important;
    text-align:left!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    font-size:14px!important;
    line-height:1.25!important;
    font-weight:750!important;
    border-radius:2px!important;
    box-shadow:none!important;
  }
  .phf-landing-nav button.active,
  .phf-main-nav button.active,
  .eval-admin-nav button.active,
  #introSection.is-landing .phf-landing-nav button[data-intro-about],
  #introSection.is-guide-page .phf-landing-nav button[data-intro-guide]{
    border-left-color:#064533!important;
    background:#f3f8f5!important;
    color:#064533!important;
  }
  .phf-landing-nav button.active:after,
  .phf-main-nav button.active:after,
  .eval-admin-nav button.active:after{
    display:none!important;
  }

  .phf-login-entry,
  .eval-login-entry,
  .phf-intro-top-btn.phf-landing-login{
    min-height:42px!important;
    padding:10px 12px!important;
    text-align:left!important;
    border-radius:2px!important;
  }
  .phf-login-entry span,
  .eval-login-entry span,
  .phf-login-entry small,
  .eval-login-entry small{
    display:block!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .eval-admin-page,
  .eval-clean-layout,
  .eval-top-line,
  .eval-view-top,
  .eval-summary-strip,
  .eval-doc-grid,
  .eval-doc-note-grid,
  .eval-sign-row,
  .phf-guide-grid,
  .phf-admin-test-steps,
  .hub-shortcuts,
  .hub-metric-grid,
  .hub-program-grid,
  .hub-main-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .eval-admin-page{
    padding:10px!important;
  }
  .eval-admin-main,
  .eval-admin-sidebar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .eval-toolbar,
  .eval-table-head,
  .hub-panel-head{
    display:block!important;
  }
  .eval-toolbar > *,
  .eval-table-head > *,
  .hub-panel-head > *{
    margin-bottom:8px!important;
  }
  .eval-table-wrap,
  .eval-table-card,
  .weekly-eval-table-wrap,
  .table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  table,
  .eval-table,
  .eval-history-table{
    max-width:none!important;
  }
  .phf-guide-standalone-page,
  .phf-direct-test-page{
    padding:0!important;
  }
  .phf-guide-standalone-page .phf-guide-hero.clean,
  .phf-direct-test-page .hub-panel{
    padding:16px!important;
  }
}

/* === PHF Stage 3.10: shared header/menu baseline === */
.phf-site-header .phf-main-nav button[data-phf-main-nav="reports"]{
  display:inline-flex;
}
.eval-admin-shell > .eval-admin-topbar.phf-site-header{
  display:none!important;
}
.eval-admin-shell .eval-admin-page{
  margin-top:0!important;
}
body.phf-eval-mode .context-bar,
body.phf-guide-standalone-mode .context-bar,
body.phf-module-page-mode .context-bar{
  display:grid!important;
}
@media (min-width: 761px){
  .phf-mobile-menu-toggle{display:none!important;}
  .phf-intro-top.phf-landing-header,
  .topbar.phf-site-header{
    display:flex!important;
    align-items:center!important;
  }
  .topbar.phf-site-header .phf-main-nav,
  .phf-intro-top.phf-landing-header .phf-landing-nav{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    min-width:0!important;
  }
}
@media (max-width: 760px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;}
  *,*::before,*::after{box-sizing:border-box!important;}
  .app,
  #introSection,
  .phf-intro-shell,
  .phf-intro-viewer,
  .phf-homepage-wrap,
  .phf-homepage-hero,
  .layout,
  .main,
  #mainLesson,
  .eval-admin-shell,
  .eval-admin-page,
  .eval-admin-main,
  .hub-panel,
  .phf-guide-app,
  .phf-direct-test-page{
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }
  .phf-intro-top.phf-landing-header,
  .topbar.phf-site-header{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:56px!important;
    margin:0 0 12px 0!important;
    padding:10px 12px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-auto-rows:auto!important;
    align-items:center!important;
    gap:8px!important;
    overflow:visible!important;
    background:#fff!important;
    border-bottom:1px solid #dfe8e2!important;
    box-shadow:none!important;
    z-index:10!important;
  }
  .phf-intro-brand.phf-landing-brand,
  .topbar.phf-site-header .brand,
  .eval-admin-brand{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    overflow:hidden!important;
    padding:0!important;
    margin:0!important;
  }
  .phf-intro-brand.phf-landing-brand img,
  .topbar.phf-site-header .brand .logo,
  .eval-admin-logo{
    width:104px!important;
    max-width:36vw!important;
    height:34px!important;
    flex:0 0 auto!important;
  }
  .topbar.phf-site-header .brand .logo img,
  .eval-admin-logo img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  .phf-intro-brand.phf-landing-brand b,
  .topbar.phf-site-header .brand h1,
  .eval-admin-brand h1{
    font-size:15px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    margin:0!important;
  }
  .phf-intro-brand.phf-landing-brand span,
  .topbar.phf-site-header .brand p{
    display:none!important;
  }
  .phf-mobile-menu-toggle,
  .phf-landing-menu-toggle,
  .phf-app-menu-toggle{
    grid-column:2!important;
    grid-row:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:78px!important;
    min-height:38px!important;
    padding:8px 12px!important;
    border:1px solid #cbd8cf!important;
    background:#fff!important;
    color:#064533!important;
    border-radius:2px!important;
    font-size:14px!important;
    font-weight:800!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    box-shadow:none!important;
  }
  .phf-landing-nav,
  .phf-main-nav,
  .eval-admin-nav,
  .phf-intro-top-btn.phf-landing-login,
  .phf-login-entry,
  .eval-login-entry{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    overflow:visible!important;
    display:none!important;
  }
  .phf-landing-header.phf-mobile-open .phf-landing-nav,
  .phf-site-header.phf-mobile-open .phf-main-nav,
  .eval-admin-topbar.phf-mobile-open .eval-admin-nav{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    padding-top:8px!important;
    margin-top:8px!important;
    border-top:1px solid #e1e8e3!important;
    position:static!important;
    transform:none!important;
  }
  .phf-landing-header.phf-mobile-open .phf-intro-top-btn.phf-landing-login,
  .phf-site-header.phf-mobile-open .phf-login-entry,
  .eval-admin-topbar.phf-mobile-open .eval-login-entry{
    display:block!important;
    position:static!important;
    width:100%!important;
    margin-top:6px!important;
  }
  .phf-landing-nav button,
  .phf-main-nav button,
  .eval-admin-nav button{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    height:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:10px 12px!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    text-align:left!important;
    border:1px solid #dfe8e2!important;
    border-left:4px solid transparent!important;
    background:#fff!important;
    color:#0b3f31!important;
    border-radius:2px!important;
    font-size:14px!important;
    font-weight:750!important;
    line-height:1.25!important;
    box-shadow:none!important;
  }
  .phf-main-nav button.active,
  .eval-admin-nav button.active,
  .phf-landing-nav button.active,
  #introSection.is-landing .phf-landing-nav button[data-intro-about],
  #introSection.is-guide-page .phf-landing-nav button[data-intro-guide]{
    border-left-color:#064533!important;
    background:#f3f8f5!important;
    color:#064533!important;
  }
  .phf-login-entry,
  .eval-login-entry,
  .phf-intro-top-btn.phf-landing-login{
    min-height:42px!important;
    padding:10px 12px!important;
    border-radius:2px!important;
    text-align:left!important;
  }
  .context-bar,
  .phase-strip,
  .layout,
  .phf-homepage-hero,
  .phf-homepage-bottom,
  .phf-homepage-program-grid,
  .phf-homepage-gallery-grid,
  .eval-summary-strip,
  .hub-full-top-grid,
  .hub-insight-grid,
  .hub-dashboard-grid,
  .hub-report-grid,
  .phf-guide-grid,
  .phf-admin-test-steps{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .context-bar{margin:0 0 12px 0!important;}
  .layout{gap:12px!important;}
  .panel,.right-panel,.todo-panel{width:100%!important;max-width:100%!important;min-width:0!important;}
  img,video,canvas,svg{max-width:100%!important;height:auto;}
  .eval-table-wrap,.table-wrap,.weekly-eval-table-wrap{overflow-x:auto!important;max-width:100%!important;-webkit-overflow-scrolling:touch!important;}
}

/* === PHF Stage 3.10.1: true shared header fix for Reports/Profile/Evaluation ===
   Purpose: pages rendered in phf-eval-mode (Tổng quan/Báo cáo/Hồ sơ đánh giá)
   must keep the same official header/menu as Trang chủ/Hướng dẫn/Kiểm tra.
   This overrides older evaluation CSS that hid the topbar and created a separate header flow. */
body.phf-eval-mode > .app > .topbar.phf-site-header,
body.phf-module-page-mode.phf-eval-mode > .app > .topbar.phf-site-header{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
}
body.phf-eval-mode > .app > .phase-strip{
  display:none!important;
}
body.phf-eval-mode > .app{
  max-width:none!important;
  margin:0!important;
  padding:18px 24px 24px!important;
}
body.phf-eval-mode .layout{
  display:block!important;
  width:100%!important;
  max-width:1440px!important;
  margin:0 auto!important;
  padding:0!important;
}
body.phf-eval-mode .todo-panel,
body.phf-eval-mode .right-panel{
  display:none!important;
}
body.phf-eval-mode .main{
  width:100%!important;
  max-width:1280px!important;
  margin:0 auto!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.eval-admin-shell > .eval-admin-topbar,
.eval-admin-shell > .eval-admin-topbar.phf-site-header{
  display:none!important;
}
@media (min-width: 761px){
  .topbar.phf-site-header{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:16px!important;
    min-height:64px!important;
    overflow:visible!important;
  }
  .topbar.phf-site-header .brand{
    flex:0 0 310px!important;
    max-width:330px!important;
    min-width:260px!important;
  }
  .topbar.phf-site-header .phf-main-nav{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
    gap:4px!important;
  }
  .topbar.phf-site-header .phf-main-nav button{
    flex:0 0 auto!important;
    min-width:0!important;
    max-width:none!important;
    padding:18px 10px 15px!important;
    font-size:13px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  .topbar.phf-site-header .phf-login-entry{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:150px!important;
    max-width:205px!important;
    margin-left:8px!important;
  }
  .topbar.phf-site-header .phf-login-entry span,
  .topbar.phf-site-header .phf-login-entry small{
    max-width:180px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}
@media (max-width: 760px){
  body.phf-eval-mode > .app > .topbar.phf-site-header,
  body.phf-module-page-mode.phf-eval-mode > .app > .topbar.phf-site-header{
    display:grid!important;
  }
  body.phf-eval-mode > .app{
    padding:10px 12px 16px!important;
    max-width:100%!important;
  }
  body.phf-eval-mode .layout,
  body.phf-eval-mode .main,
  body.phf-eval-mode #mainLesson{
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  body.phf-eval-mode .eval-admin-page,
  body.phf-eval-mode .eval-admin-main,
  body.phf-eval-mode .hub-overview-page,
  body.phf-eval-mode .hub-report-page{
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }
}

/* PHF STAGE 3.11 — MAIN SHELL + FONT BASELINE
   Mục tiêu: một header/menu chung cho các module chính, không còn header phụ lẻ tẻ gây kẹt/vỡ layout. */
:root{--phf-font-main:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;}
html,body,body *,button,input,select,textarea,table,th,td,label,a,span,small,b,strong,p,h1,h2,h3,h4,h5,h6,div,section,article,aside,main,nav{
  font-family:var(--phf-font-main)!important;
}

body.phf-main-shell-mode:not(.phf-intro-active) > .app{display:block!important;max-width:1440px!important;margin:0 auto!important;padding:14px 22px!important;}
body.phf-main-shell-mode:not(.phf-intro-active) > .app > .topbar.phf-site-header,
body.phf-main-shell-mode.phf-eval-mode > .app > .topbar.phf-site-header,
body.phf-main-shell-mode.phf-module-page-mode.phf-eval-mode > .app > .topbar.phf-site-header{
  display:flex!important;visibility:visible!important;opacity:1!important;position:sticky!important;top:0!important;z-index:1000!important;
}
body.phf-main-shell-mode > .app > .topbar.phf-site-header{
  width:100%!important;box-sizing:border-box!important;margin:0 0 14px!important;
}
body.phf-main-shell-mode .topbar.phf-site-header .brand{flex:0 0 auto!important;min-width:250px!important;max-width:360px!important;}
body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav{flex:1 1 auto!important;min-width:0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;overflow:visible!important;}
body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry{flex:0 0 auto!important;margin-left:auto!important;}

/* Các module như Hồ sơ/Báo cáo/Hướng dẫn/Kiểm tra dùng nội dung dưới shell chung: ẩn panel học phụ để tránh bị kẹt trong layout bài học. */
body.phf-main-shell-mode.phf-module-page-mode > .app > .phase-strip,
body.phf-main-shell-mode.phf-module-page-mode > .app > .context-bar{display:none!important;}
body.phf-main-shell-mode.phf-module-page-mode .layout{display:block!important;width:100%!important;max-width:1200px!important;margin:0 auto!important;}
body.phf-main-shell-mode.phf-module-page-mode .todo-panel,
body.phf-main-shell-mode.phf-module-page-mode .right-panel{display:none!important;}
body.phf-main-shell-mode.phf-module-page-mode .main{display:block!important;width:100%!important;max-width:none!important;margin:0!important;border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;overflow:visible!important;}
body.phf-main-shell-mode.phf-module-page-mode .eval-admin-shell{min-height:0!important;background:transparent!important;}
body.phf-main-shell-mode.phf-module-page-mode .eval-admin-shell > .eval-admin-topbar,
body.phf-main-shell-mode.phf-module-page-mode .eval-admin-shell > .eval-admin-topbar.phf-site-header{display:none!important;}
body.phf-main-shell-mode.phf-module-page-mode .eval-admin-page{padding:0!important;display:block!important;}
body.phf-main-shell-mode.phf-module-page-mode .eval-admin-main{width:100%!important;max-width:none!important;}

/* Bảng/card dài cuộn trong chính vùng bảng, không làm vỡ toàn trang. */
.eval-table-wrap,.hub-table-wrap,.table-wrap{max-width:100%!important;overflow-x:auto!important;}
.eval-table-wrap table,.hub-action-table,.hub-report-table{width:100%!important;}

@media(max-width:980px){
  body.phf-main-shell-mode .topbar.phf-site-header{flex-wrap:wrap!important;gap:10px!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .brand{min-width:220px!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav{order:3;flex-basis:100%!important;justify-content:flex-start!important;overflow-x:auto!important;}
}
@media(max-width:760px){
  body.phf-main-shell-mode:not(.phf-intro-active) > .app{padding:10px 12px!important;max-width:100%!important;overflow-x:hidden!important;}
  body.phf-main-shell-mode > .app > .topbar.phf-site-header{position:relative!important;top:auto!important;margin:0 0 12px!important;padding:10px 12px!important;display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .brand{min-width:0!important;max-width:none!important;width:auto!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .brand .logo{width:118px!important;height:40px!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .brand h1{font-size:16px!important;line-height:1.15!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .brand p{display:none!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .phf-mobile-menu-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:40px!important;padding:8px 12px!important;border:1px solid #cfe1d7!important;background:#fff!important;color:#063f31!important;font-weight:800!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav,
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry{display:none!important;}
  body.phf-main-shell-mode .topbar.phf-site-header.phf-mobile-open .phf-main-nav{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr!important;gap:6px!important;width:100%!important;margin-top:10px!important;overflow:visible!important;background:#fff!important;border:1px solid #dbe9e1!important;padding:8px!important;}
  body.phf-main-shell-mode .topbar.phf-site-header.phf-mobile-open .phf-main-nav button{width:100%!important;text-align:left!important;justify-content:flex-start!important;min-height:42px!important;border:1px solid #e3eee8!important;background:#fff!important;padding:10px 12px!important;}
  body.phf-main-shell-mode .topbar.phf-site-header.phf-mobile-open .phf-main-nav button.active{background:#ecf7f1!important;border-color:#0b5b43!important;}
  body.phf-main-shell-mode .topbar.phf-site-header.phf-mobile-open .phf-login-entry{grid-column:1/-1!important;display:flex!important;width:100%!important;margin:0!important;justify-content:center!important;}
  body.phf-main-shell-mode.phf-module-page-mode .layout{max-width:100%!important;}
  body.phf-main-shell-mode.phf-module-page-mode .eval-admin-page{padding:0!important;}
  body.phf-main-shell-mode.phf-module-page-mode .eval-admin-sidebar,
  body.phf-main-shell-mode.phf-module-page-mode .hub-insight-grid,
  body.phf-main-shell-mode.phf-module-page-mode .hub-dashboard-grid,
  body.phf-main-shell-mode.phf-module-page-mode .hub-full-top-grid,
  body.phf-main-shell-mode.phf-module-page-mode .hub-report-grid,
  body.phf-main-shell-mode.phf-module-page-mode .hub-report-top,
  body.phf-main-shell-mode.phf-module-page-mode .eval-summary-strip{grid-template-columns:1fr!important;}
}

/* Stage 3.11.1 - Unified menu baseline: all menu items visible, same component style */
.topbar.phf-site-header .phf-main-nav button[data-phf-main-nav]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:42px!important;
  min-height:42px!important;
  padding:0 14px!important;
  margin:0!important;
  line-height:1!important;
  border:0!important;
  border-bottom:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  font-size:15px!important;
  font-weight:600!important;
  color:#2b3932!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
}
.topbar.phf-site-header .phf-main-nav button[data-phf-main-nav="directTrainingTest"]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:42px!important;
  min-height:42px!important;
  padding:0 14px!important;
  margin:0!important;
  line-height:1!important;
}
.topbar.phf-site-header .phf-main-nav button[data-phf-main-nav].active{
  color:var(--phf-corporate-green,#064533)!important;
  font-weight:700!important;
  background:transparent!important;
}
.topbar.phf-site-header .phf-main-nav button[data-phf-main-nav].active:after{
  content:""!important;
  position:absolute!important;
  left:12px!important;
  right:12px!important;
  bottom:0!important;
  height:3px!important;
  background:var(--phf-corporate-green,#064533)!important;
}
/* Keep the single official header visible on module/report/profile screens. */
body.phf-eval-mode > .app > .topbar.phf-site-header{
  display:grid!important;
}
body.phf-eval-mode > .app > .phase-strip,
body.phf-eval-mode > .app > .context-bar{
  display:none!important;
}
body.phf-eval-mode .layout{
  display:block!important;
  max-width:1440px!important;
  margin:0 auto!important;
  padding:0!important;
}
body.phf-eval-mode .todo-panel,
body.phf-eval-mode .right-panel{
  display:none!important;
}
body.phf-eval-mode .main{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
@media(max-width:760px){
  .topbar.phf-site-header .phf-main-nav button[data-phf-main-nav],
  .topbar.phf-site-header .phf-main-nav button[data-phf-main-nav="directTrainingTest"]{
    justify-content:flex-start!important;
    width:100%!important;
    height:auto!important;
    min-height:42px!important;
    padding:10px 12px!important;
    line-height:1.25!important;
  }
}

/* Stage 3.11.2: đồng bộ menu Trang chủ/Giới thiệu với menu chính */
.phf-landing-nav button[data-intro-report]{
  font-family: Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif !important;
}
@media (min-width: 761px){
  .phf-landing-nav{gap:2px!important;}
  .phf-landing-nav button{padding-left:11px!important;padding-right:11px!important;}
}


/* PHF PATCH 2026-07-08: Đồng bộ font cho khu Xem nội dung học chi tiết */
.original,
.original *,
details,
details *,
summary,
.original-content,
.original-content *,
.lesson-card,
.lesson-card *,
.phf-details-card,
.phf-details-card *{
  font-family: Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif !important;
}
summary{
  line-height:1.45;
}
.original-content{
  line-height:1.62;
}


/* PATCH STAGE 3.12.6 - originalFull chỉ là nội dung trong cột giữa, không được phá khung học */
#mainLesson .phf-original-inline{margin-top:18px;border-top:1px solid #edf3f0;padding-top:18px;}
#mainLesson .phf-original-inline .original-goc-screen{font-family:var(--phf-font-main,Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif)!important;}
#mainLesson .phf-original-inline .original-goc-screen .topline,
#mainLesson .phf-original-inline .original-goc-screen .footer-note{display:none!important;}
#mainLesson .phf-original-inline .original-goc-screen .welcome-card{display:block!important;border-radius:20px!important;box-shadow:none!important;border:1px solid var(--line)!important;background:#fff!important;}
#mainLesson .phf-original-inline .original-goc-screen .welcome-card:before{display:none!important;}
#mainLesson .phf-original-inline .original-goc-screen .welcome-left{padding:22px!important;}
#mainLesson .phf-original-inline .original-goc-screen .welcome-right{display:none!important;}
#mainLesson .phf-original-inline .original-goc-screen h1{font-size:28px!important;line-height:1.15!important;letter-spacing:-.3px!important;}
#mainLesson .phf-original-inline .original-goc-screen .lead{font-size:16px!important;line-height:1.55!important;}
#mainLesson .phf-original-inline .original-goc-screen .welcome-note{font-size:14px!important;line-height:1.6!important;}
#mainLesson .phf-original-inline .original-goc-screen .form-card{border-radius:20px!important;box-shadow:none!important;border:1px solid var(--line)!important;}
#mainLesson .phf-original-inline .original-goc-screen .form-head{border-radius:20px 20px 0 0!important;}
#mainLesson .phf-original-inline .original-goc-screen .shell{max-width:100%!important;margin:0!important;}

/* PHF Stage 3.12.7 - Contain legacy originalFull content inside the unified learning shell */
#mainLesson .phf-original-contained,
#mainLesson .phf-original-contained *{
  font-family: Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif !important;
}
#mainLesson .phf-original-inline .original-goc-screen{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#mainLesson .phf-original-inline .original-goc-screen .shell,
#mainLesson .phf-original-inline .original-goc-screen .form-wrap{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#mainLesson .phf-original-inline .original-goc-screen .topline,
#mainLesson .phf-original-inline .original-goc-screen .footer-note{
  display: none !important;
}
#mainLesson .phf-original-inline .original-goc-screen .form-card,
#mainLesson .phf-original-inline .original-goc-screen .welcome-card{
  border-radius: 20px !important;
  box-shadow: none !important;
  border: 1px solid var(--line,#d9eadf) !important;
  display: block !important;
  overflow: hidden !important;
}
#mainLesson .phf-original-inline .original-goc-screen .welcome-card:before{
  display: none !important;
}
#mainLesson .phf-original-inline .original-goc-screen .welcome-left,
#mainLesson .phf-original-inline .original-goc-screen .welcome-right,
#mainLesson .phf-original-inline .original-goc-screen .form-body{
  padding: 20px !important;
}
#mainLesson .phf-original-inline .original-goc-screen .welcome-right{
  display: none !important;
}
#mainLesson .phf-original-inline .original-goc-screen h1{
  font-size: 30px !important;
  line-height: 1.15 !important;
}
#mainLesson .phf-original-inline .original-goc-screen .lead,
#mainLesson .phf-original-inline .original-goc-screen .welcome-note{
  font-size: 15px !important;
}


/* PHF STAGE 3.12.8 - Hard fix F5/resume: không cho legacy originalFull phá khung học */
body.phf-original-full-mode .phase-strip{display:grid!important;}
body.phf-original-full-mode .context-bar{display:grid!important;}
body.phf-original-full-mode .layout{
  display:grid!important;
  grid-template-columns:265px minmax(730px,1fr) 230px!important;
  gap:16px!important;
  align-items:start!important;
}
body.phf-original-full-mode .todo-panel,
body.phf-original-full-mode .right-panel{display:block!important;}
body.phf-original-full-mode .main{
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  overflow:hidden!important;
}
body.phf-original-full-mode .focus-head,
body.phf-original-full-mode .focus-body{display:block!important;}
body.phf-original-full-mode .app{max-width:1440px!important;}
@media(max-width:1160px){
  body.phf-original-full-mode .layout{grid-template-columns:1fr!important;}
  body.phf-original-full-mode .todo-panel,
  body.phf-original-full-mode .right-panel{position:static!important;max-height:none!important;}
}
/* Đồng bộ phông chữ phần Xem nội dung học chi tiết và toàn bộ nội dung mở rộng */
.original,
.original details,
.original summary,
.original .original-content,
.original .original-content *,
#mainLesson details,
#mainLesson summary,
#mainLesson .original-content,
#mainLesson .original-content *,
#mainLesson .phf-original-contained,
#mainLesson .phf-original-contained *{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
}
#mainLesson summary{
  line-height:1.45!important;
  letter-spacing:0!important;
}


/* PHF Stage 3.12.9 - hard lock learning shell after F5/refresh
   Khi đang ở Bài học của tôi, mọi class cũ của module/eval không được ẩn phase/context/sidebar. */
body.phf-learning-mode > .app{max-width:1440px!important;margin:0 auto!important;padding:22px!important;}
body.phf-learning-mode > .app > .topbar.phf-site-header{display:flex!important;}
body.phf-learning-mode > .app > .phase-strip{display:grid!important;}
body.phf-learning-mode > .app > .context-bar{display:grid!important;}
body.phf-learning-mode .layout{display:grid!important;grid-template-columns:265px minmax(730px,1fr) 230px!important;gap:16px!important;align-items:start!important;max-width:100%!important;margin:0!important;padding:0!important;}
body.phf-learning-mode .todo-panel,
body.phf-learning-mode .right-panel{display:block!important;visibility:visible!important;position:sticky!important;top:18px!important;max-height:calc(100vh - 36px)!important;overflow:auto!important;}
body.phf-learning-mode .main{display:block!important;background:#fff!important;border:1px solid var(--line)!important;border-radius:28px!important;box-shadow:var(--shadow)!important;overflow:hidden!important;padding:0!important;max-width:none!important;}
body.phf-learning-mode #mainLesson{display:block!important;}
body.phf-learning-mode .focus-body,
body.phf-learning-mode .focus-head{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;}
body.phf-learning-mode details,
body.phf-learning-mode summary,
body.phf-learning-mode .original,
body.phf-learning-mode .original-content,
body.phf-learning-mode .original-content *{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;}
@media(max-width:1160px){body.phf-learning-mode .layout{grid-template-columns:1fr!important;}body.phf-learning-mode .todo-panel,body.phf-learning-mode .right-panel{position:static!important;max-height:none!important;}}
@media(max-width:760px){body.phf-learning-mode > .app{padding:12px!important;}body.phf-learning-mode > .app > .phase-strip{grid-template-columns:1fr!important;}body.phf-learning-mode > .app > .context-bar{display:block!important;}}

/* PHF PATCH 2026-07-08: Bản cam kết bảo mật thông tin */
.phf-bmtt-lesson .lesson-body{display:block!important}
.phf-bmtt-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 16px;padding:12px;border:1px solid #cfe4d9;background:#f7fcf9;border-radius:16px}
.phf-bmtt-status{min-height:22px;margin:8px 0 14px;font-weight:800;color:#35594d}
.phf-bmtt-status.ok{color:#067647}.phf-bmtt-status.warn{color:#b54708}.phf-bmtt-status.info{color:#175cd3}
.phf-bmtt-paper{background:#fff;border:1px solid #d6e5dc;border-radius:18px;padding:28px;box-shadow:0 18px 42px rgba(7,59,45,.08);font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;color:#18372d;line-height:1.55;font-size:15px}
.phf-bmtt-paper h2{text-align:center;font-size:22px;margin:12px 0 3px;text-transform:uppercase;color:var(--green-900);font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif}
.phf-bmtt-paper h3{font-size:17px;margin:18px 0 8px;color:var(--green-900);font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;text-transform:none}
.phf-bmtt-paper p{margin:6px 0}.phf-bmtt-paper ul{margin:8px 0 10px 22px}.phf-bmtt-paper li{margin:5px 0}
.phf-bmtt-national{text-align:center;line-height:1.5}.phf-bmtt-subtitle{text-align:center;font-weight:700;margin-bottom:16px}
.phf-bmtt-grid,.phf-bmtt-sign-extra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin:10px 0 6px}
.phf-bmtt-grid label,.phf-bmtt-sign-extra label{font-weight:700;color:#111;display:flex;gap:8px;align-items:center;min-width:0}
.phf-bmtt-sign-extra label.full{grid-column:1/-1}
.phf-bmtt-paper input{border:0;border-bottom:1px dotted #8aa79b;border-radius:0;background:transparent;min-width:0;flex:1;padding:4px 3px;font:700 15px Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;color:#18372d;outline:none}
.phf-bmtt-paper input:focus{background:#fff9e8;border-bottom-color:#064533}
.phf-bmtt-inline{display:inline-block!important;width:46px!important;text-align:center!important;min-width:46px!important;flex:none!important}.phf-bmtt-inline.year{width:70px!important;min-width:70px!important}
.phf-bmtt-confirm{border:1px solid #cfe4d9;background:#f8fcfa;border-radius:16px;padding:14px;margin:18px 0;font-family:Segoe UI,Arial,sans-serif;color:#18372d}
.phf-bmtt-confirm h3{font-family:Segoe UI,Arial,sans-serif;color:#064533;margin-top:0}.phf-bmtt-confirm label{display:flex;gap:10px;align-items:flex-start;padding:9px 0;font-weight:750}.phf-bmtt-confirm input{flex:none;min-width:auto;width:18px;height:18px;margin-top:2px}
.phf-bmtt-sign-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;text-align:center;break-inside:avoid}.phf-bmtt-sign-grid>div{min-height:150px}.phf-bmtt-sign-space{height:52px}.phf-bmtt-sign-grid span{font-size:14px}.phf-bmtt-sign-grid div div{margin:4px 0}
@media(max-width:760px){.phf-bmtt-paper{padding:18px;font-size:15px}.phf-bmtt-grid,.phf-bmtt-sign-extra,.phf-bmtt-sign-grid{grid-template-columns:1fr}.phf-bmtt-grid label,.phf-bmtt-sign-extra label{display:block}.phf-bmtt-paper input{width:100%;display:block;margin-top:3px}.phf-bmtt-actions .btn{width:100%;justify-content:center}}
#phfBmtPrintOnly{display:none}
.phf-bmtt-print-value{display:inline;min-width:34px;border-bottom:1px dotted #000;padding:0 3px;font-weight:700;color:#000}

@page{size:A4 portrait;margin:13mm 14mm}
@media print{
  body.phf-bmtt-print-mode *{visibility:hidden!important}
  body.phf-bmtt-print-mode #phfBmtPrintOnly,body.phf-bmtt-print-mode #phfBmtPrintOnly *{visibility:visible!important}
  body.phf-bmtt-print-mode #phfBmtPrintOnly{display:block!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;box-sizing:border-box!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0!important;background:#fff!important;color:#000!important;font-family:"Times New Roman",Times,serif!important;font-size:11pt!important;line-height:1.28!important}
  body.phf-bmtt-print-mode #phfBmtPrintOnly h2{font-family:"Times New Roman",Times,serif!important;font-size:15pt!important;line-height:1.15!important;text-align:center!important;margin:7px 0 2px!important;color:#000!important;text-transform:uppercase!important}
  body.phf-bmtt-print-mode #phfBmtPrintOnly h3{font-family:"Times New Roman",Times,serif!important;font-size:11.5pt!important;line-height:1.2!important;margin:9px 0 4px!important;color:#000!important}
  body.phf-bmtt-print-mode #phfBmtPrintOnly p,body.phf-bmtt-print-mode #phfBmtPrintOnly li{margin:2.3px 0!important;color:#000!important}
  body.phf-bmtt-print-mode #phfBmtPrintOnly ul{margin:4px 0 6px 18px!important;padding:0!important}
  body.phf-bmtt-print-mode #phfBmtPrintOnly .phf-bmtt-national{line-height:1.25!important;text-align:center!important}
  body.phf-bmtt-print-mode #phfBmtPrintOnly .phf-bmtt-subtitle{text-align:center!important;font-weight:700!important;margin-bottom:8px!important}
  body.phf-bmtt-print-mode #phfBmtPrintOnly .phf-bmtt-grid,body.phf-bmtt-print-mode #phfBmtPrintOnly .phf-bmtt-sign-extra{display:grid!important;grid-template-columns:1fr 1fr!important;gap:3px 12px!important;margin:4px 0!important}
  body.phf-bmtt-print-mode #phfBmtPrintOnly .phf-bmtt-grid label,body.phf-bmtt-print-mode #phfBmtPrintOnly .phf-bmtt-sign-extra label{display:block!important;color:#000!important;font-weight:700!important}
  body.phf-bmtt-print-mode #phfBmtPrintOnly .phf-bmtt-sign-extra label.full{grid-column:1/-1!important}
  body.phf-bmtt-print-mode #phfBmtPrintOnly .phf-bmtt-screen-only{display:none!important}
  body.phf-bmtt-print-mode #phfBmtPrintOnly .phf-bmtt-sign-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:20px!important;margin-top:14px!important;text-align:center!important;break-inside:avoid!important;page-break-inside:avoid!important}
  body.phf-bmtt-print-mode #phfBmtPrintOnly .phf-bmtt-sign-grid>div{min-height:88px!important}
  body.phf-bmtt-print-mode #phfBmtPrintOnly .phf-bmtt-sign-space{height:32px!important}
}

/* PATCH STAGE3.13.1: Đồng bộ font giao diện và thông báo */
html,body,button,input,select,textarea,.btn,.phf-bmtt-actions,.phf-bmtt-status,.phf-bmtt-confirm,.toast,.phf-toast,.phf-toast *,[class*="notice"],[class*="status"],[class*="message"]{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif}
.phf-bmtt-confirm h3,.phf-bmtt-confirm label,.phf-bmtt-paper,.phf-bmtt-paper h2,.phf-bmtt-paper h3,.phf-bmtt-paper input{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif}

/* PHF Stage 3.13.2: in cam ket BMTT bang cua so rieng, tranh keo/lech layout web. */
@media print{
  body.phf-bmtt-print-mode #phfBmtPrintOnly{max-width:none!important;overflow:visible!important;}
}


/* PHF STAGE 3.13.4: Font đồng bộ + trạng thái chờ chuyển module */
:root{--phf-font-main:Arial,"Helvetica Neue",Helvetica,system-ui,-apple-system,sans-serif;}
html,body,button,input,select,textarea,table,th,td,label,a,span,small,b,strong,p,h1,h2,h3,h4,h5,h6,div,section,article,aside,main,nav,
.phf-toast-wrap,.phf-toast,.phf-toast *,.phf-modal,.phf-modal *,.phf-bmtt-status,.phf-bmtt-status *,
.phf-form-error-box,.phf-field-error-text,.weekly-save-note,.eval-save-note,.record-note,.context-action,.context-title,.context-sub,
[class*="notice"],[class*="status"],[class*="message"]{font-family:var(--phf-font-main)!important;}
.phf-toast{font-family:var(--phf-font-main)!important;font-weight:650!important;letter-spacing:0!important;}
.phf-toast b,.phf-toast small{font-family:var(--phf-font-main)!important;}
.phf-module-loading-bar{position:fixed;left:50%;top:14px;transform:translate(-50%,-12px);z-index:1000000;display:flex;align-items:center;gap:10px;max-width:min(520px,calc(100vw - 32px));padding:10px 14px;border-radius:999px;background:#064533;color:#fff;border:1px solid rgba(255,255,255,.24);box-shadow:0 16px 42px rgba(6,69,51,.28);opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;font-family:var(--phf-font-main)!important;font-size:14px;font-weight:700;line-height:1.35;}
.phf-module-loading-bar.show{opacity:1;transform:translate(-50%,0);}
.phf-module-loading-spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.6);border-top-color:#fff;border-radius:50%;animation:phfSpin .75s linear infinite;flex:none;}
#phfModuleLoadingText{font-family:var(--phf-font-main)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* PHF PATCH 2026-07-08 Stage 3.13.5: font consistency + required tick UX + BMTT signature layout */
:root{--phf-font-main:Arial,"Helvetica Neue",Helvetica,system-ui,-apple-system,sans-serif;}
body,button,input,select,textarea,label,summary,details,.original summary,.original-content,.original-content *,
.phf-toast-wrap,.phf-toast,.phf-toast *,.phf-modal,.phf-modal *,
.phf-bmtt-paper,.phf-bmtt-paper *,.phf-bmtt-status,.phf-bmtt-status *,
[class*="notice"],[class*="status"],[class*="message"]{font-family:var(--phf-font-main)!important;}
#mainLesson summary,.original summary,body.phf-learning-mode summary{font-family:var(--phf-font-main)!important;font-weight:800!important;letter-spacing:0!important;}
.required-mark{color:#d92d20!important;font-weight:800!important;}
.phf-required-help{margin:8px 0 10px;padding:9px 11px;border:1px dashed #efb5b5;background:#fff7f7;color:#8f1f1f;border-radius:10px;font-size:13px;font-weight:700;line-height:1.45;font-family:var(--phf-font-main)!important;}
.phf-required-inline{display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:999px;background:#fff1f1;color:#b42318;border:1px solid #f0b6b6;font-style:normal;font-size:11px;font-weight:800;vertical-align:middle;white-space:nowrap;font-family:var(--phf-font-main)!important;}
.feedback-option.phf-required-option,.commit-check.phf-required-option{border-color:#f0c3c3!important;background:#fffafa!important;}
.feedback-option.phf-required-option input,.commit-check.phf-required-option input{accent-color:#0b6b48;}
.late-approval-note{margin:12px 14px!important;border-left-color:#b7791f!important;background:#fffaf0!important;color:#5c512d!important;font-weight:700!important;}
.phf-bmtt-grid label,.phf-bmtt-sign-extra label,.phf-bmtt-version-label{font-family:var(--phf-font-main)!important;font-weight:700!important;color:#18372d!important;}
.phf-bmtt-sign-wrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.9fr);gap:14px;margin:20px 0 18px;align-items:stretch;}
.phf-bmtt-sign-section{border:1px solid #cfe4d8;background:#fbfefc;border-radius:16px;padding:14px;box-shadow:0 8px 18px rgba(7,59,45,.04);}
.phf-bmtt-section-head{border-bottom:1px solid #e5f0ea;margin-bottom:12px;padding-bottom:9px;}
.phf-bmtt-section-head h3{margin:0 0 4px!important;font-size:16px!important;color:#064533!important;text-transform:none!important;font-family:var(--phf-font-main)!important;}
.phf-bmtt-section-head p{margin:0;color:#5a7067;font-size:13px;font-weight:600;line-height:1.45;}
.phf-bmtt-sign-extra{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin:0!important;}
.phf-bmtt-sign-extra label{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;align-items:start!important;}
.phf-bmtt-sign-extra label:nth-child(3){grid-column:1/-1;max-width:360px;}
.phf-bmtt-sign-extra input,.phf-bmtt-version-label input{width:100%!important;border-radius:10px!important;border:1px solid #cfe4d8!important;padding:10px 12px!important;background:#fff!important;box-shadow:none!important;font-family:var(--phf-font-main)!important;}
.phf-bmtt-version-section{display:flex;flex-direction:column;justify-content:space-between;}
.phf-bmtt-version-label{display:grid;gap:6px;margin-top:4px;}
.phf-bmtt-confirm{font-family:var(--phf-font-main)!important;}
.phf-bmtt-confirm h3,.phf-bmtt-confirm label,.phf-bmtt-confirm span,.phf-bmtt-confirm em{font-family:var(--phf-font-main)!important;}
.phf-bmtt-confirm label span{display:block;line-height:1.45;}
@media(max-width:900px){.phf-bmtt-sign-wrap{grid-template-columns:1fr}.phf-bmtt-sign-extra{grid-template-columns:1fr!important}.phf-bmtt-sign-extra label:nth-child(3){max-width:none}}


/* PHF STAGE 3.13.6: sửa popup chờ không treo + sắp xếp lại xác nhận điện tử BMTT */
.phf-module-loading-bar{font-family:var(--phf-font-main)!important;}
.phf-module-loading-bar.show{pointer-events:none;}
.phf-bmtt-sign-wrap{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(260px,.75fr)!important;gap:16px!important;margin:20px 0 18px!important;align-items:stretch!important;}
.phf-bmtt-sign-section{border:1px solid #cfe4d8!important;background:#fbfefc!important;border-radius:16px!important;padding:16px!important;box-shadow:0 8px 18px rgba(7,59,45,.04)!important;}
.phf-bmtt-sign-extra{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;margin:0!important;}
.phf-bmtt-field{display:flex!important;flex-direction:column!important;gap:7px!important;min-width:0!important;}
.phf-bmtt-field:nth-child(3){grid-column:1/-1!important;max-width:420px!important;}
.phf-bmtt-field label,.phf-bmtt-version-label label{display:block!important;font-family:var(--phf-font-main)!important;font-size:14px!important;font-weight:800!important;color:#153d31!important;line-height:1.35!important;margin:0!important;}
.phf-bmtt-field input,.phf-bmtt-version-label input{display:block!important;width:100%!important;height:auto!important;min-height:44px!important;box-sizing:border-box!important;border:1px solid #cfe4d8!important;border-radius:12px!important;background:#fff!important;padding:10px 12px!important;font-family:var(--phf-font-main)!important;font-size:15px!important;font-weight:750!important;color:#073b2d!important;box-shadow:none!important;}
.phf-bmtt-field input:focus,.phf-bmtt-version-label input:focus{border-color:#0b6b48!important;box-shadow:0 0 0 3px rgba(11,107,72,.12)!important;outline:none!important;}
.phf-bmtt-version-section{display:flex!important;flex-direction:column!important;gap:14px!important;}
.phf-bmtt-version-section .phf-bmtt-field{margin-top:auto!important;}
@media(max-width:900px){.phf-bmtt-sign-wrap{grid-template-columns:1fr!important}.phf-bmtt-sign-extra{grid-template-columns:1fr!important}.phf-bmtt-field:nth-child(3){max-width:none!important}}


/* PHF STAGE 3.13.7: Chỉ chỉnh hiển thị ngày/tháng/năm BMTT trên web, không đổi bản in */
.phf-bmtt-paper .phf-bmtt-date-line{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  line-height:1.7!important;
}
.phf-bmtt-paper .phf-bmtt-date-line input.phf-bmtt-inline{
  display:inline-flex!important;
  flex:0 0 52px!important;
  width:52px!important;
  min-width:52px!important;
  max-width:52px!important;
  height:34px!important;
  margin:0 2px!important;
  padding:4px 8px!important;
  text-align:center!important;
  border:1px solid #cfe4d8!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:0 3px 10px rgba(7,59,45,.04)!important;
  font-family:var(--phf-font-main, Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif)!important;
  font-size:15px!important;
  font-weight:800!important;
  color:#18372d!important;
}
.phf-bmtt-paper .phf-bmtt-date-line input.phf-bmtt-inline.year{
  flex-basis:74px!important;
  width:74px!important;
  min-width:74px!important;
  max-width:74px!important;
}

/* PHF PATCH STAGE 3.13.9 - Learner content polish + quiz fixes */
#mainLesson .form-head,
#mainLesson .original-goc-screen .form-head{
  background:linear-gradient(135deg,#064533,#0b6b48)!important;
  color:#fff!important;
}
#mainLesson .form-head h1,
#mainLesson .form-head h2,
#mainLesson .form-head h3,
#mainLesson .form-head p,
#mainLesson .form-head .badge,
#mainLesson .original-goc-screen .form-head h2,
#mainLesson .original-goc-screen .form-head p{
  color:#fff!important;
}
#mainLesson .form-head .badge,
#mainLesson .original-goc-screen .form-head .badge{
  background:rgba(255,255,255,.12)!important;
  border-color:rgba(255,255,255,.35)!important;
  color:#fff!important;
}
#mainLesson .original{
  border:1px solid #d8eadf!important;
  border-radius:18px!important;
  background:#fbfefc!important;
  padding:0!important;
  overflow:hidden!important;
  margin-top:18px!important;
}
#mainLesson .original details{padding:0!important;border:0!important;background:transparent!important}
#mainLesson .original summary{
  list-style:none!important;
  cursor:pointer!important;
  padding:14px 16px!important;
  font-family:var(--phf-font-main,Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif)!important;
  font-weight:900!important;
  color:#064533!important;
  background:#f3faf6!important;
  border-bottom:1px solid #d8eadf!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
#mainLesson .original summary::-webkit-details-marker{display:none!important}
#mainLesson .original summary::before{content:'▾';font-size:13px;color:#064533;line-height:1}
#mainLesson .original-content{
  padding:18px!important;
  background:#fff!important;
  color:#163a2e!important;
  font-family:var(--phf-font-main,Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif)!important;
  line-height:1.65!important;
}
#mainLesson .original-content h1,
#mainLesson .original-content h2,
#mainLesson .original-content h3{color:#064533!important;line-height:1.22!important;margin:14px 0 10px!important}
#mainLesson .original-content p{margin:8px 0 12px!important;color:#24493d!important}
#mainLesson .phf-original-contained .shell,
#mainLesson .phf-original-contained .form-wrap{
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
}
#mainLesson .phf-original-contained .topline{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:0 0 14px!important;
  margin:0 0 16px!important;
  border-bottom:1px solid #e2efe7!important;
  background:transparent!important;
}
#mainLesson .phf-original-contained .topline .brand{display:flex!important;gap:12px!important;align-items:center!important;min-width:0!important}
#mainLesson .phf-original-contained .logo-placeholder{width:150px!important;min-width:150px!important;height:auto!important;box-shadow:none!important;background:transparent!important;border:0!important}
#mainLesson .phf-original-contained .logo-placeholder img{max-width:150px!important;height:auto!important;display:block!important}
#mainLesson .phf-original-contained .brand-title b{font-size:16px!important;color:#064533!important;display:block!important}
#mainLesson .phf-original-contained .brand-title span{font-size:12.5px!important;color:#5b7169!important}
#mainLesson .phf-original-contained .topline .badge,
#mainLesson .phf-original-contained .kicker,
#mainLesson .phf-original-contained .b3-tag{
  display:inline-flex!important;
  width:auto!important;
  background:#eef9f3!important;
  border:1px solid #cbe4d6!important;
  color:#064533!important;
  border-radius:999px!important;
  padding:6px 10px!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.2!important;
}
#mainLesson .phf-original-contained .welcome-card{
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr)!important;
  gap:16px!important;
  border:1px solid #d8eadf!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
#mainLesson .phf-original-contained .welcome-card:before{display:none!important}
#mainLesson .phf-original-contained .welcome-left,
#mainLesson .phf-original-contained .welcome-right{padding:18px!important;background:#fff!important;color:#163a2e!important}
#mainLesson .phf-original-contained .welcome-right{background:#f8fcfa!important;border-left:1px solid #e2efe7!important;display:block!important}
#mainLesson .phf-original-contained .welcome-left h1{font-size:26px!important;margin:12px 0!important;color:#064533!important}
#mainLesson .phf-original-contained .primary-row{display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:center!important;margin-top:14px!important}
#mainLesson .phf-original-contained .benefits{display:grid!important;gap:10px!important;margin-top:12px!important}
#mainLesson .phf-original-contained .benefit{display:grid!important;grid-template-columns:34px 1fr!important;gap:10px!important;border:1px solid #d8eadf!important;background:#fff!important;border-radius:14px!important;padding:10px!important}
#mainLesson .phf-original-contained .benefit .icon{width:34px;height:34px;border-radius:10px;background:#064533;color:#fff;display:grid;place-items:center;font-weight:900}
#mainLesson .phf-original-contained .benefit span{display:block;color:#5b7169;font-size:13px;line-height:1.45;margin-top:3px}
#mainLesson .phf-original-contained .bottom-note{margin-top:12px;padding:11px 12px;border-radius:14px;background:#fff8e6;border:1px solid #ead8a8;color:#694600;font-weight:800}
#mainLesson .b3-screen{
  border:1px solid #d8eadf!important;
  border-radius:20px!important;
  background:#fff!important;
  padding:20px!important;
  box-shadow:0 10px 24px rgba(7,59,45,.04)!important;
}
#mainLesson .b3-screen h2{font-size:24px!important;color:#064533!important;margin:12px 0 10px!important}
#mainLesson .b3-flow,
#mainLesson .b3-grid,
#mainLesson .b3-grid-3{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  margin:16px 0!important;
}
#mainLesson .b3-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#mainLesson .b3-flow .step,
#mainLesson .b3-mini{
  border:1px solid #d8eadf!important;
  background:#fbfefc!important;
  border-radius:18px!important;
  padding:14px 15px!important;
  line-height:1.55!important;
  color:#24493d!important;
  box-shadow:none!important;
}
#mainLesson .b3-flow .step .num,
#mainLesson .b3-mini .num{
  width:34px!important;height:34px!important;border-radius:10px!important;background:#064533!important;color:#fff!important;display:grid!important;place-items:center!important;font-weight:900!important;margin-bottom:10px!important;
}
#mainLesson .b3-flow .step strong,
#mainLesson .b3-mini strong{display:block!important;color:#064533!important;font-size:15.5px!important;margin-bottom:5px!important}
#mainLesson .b3-script{border-left:4px solid #0b6b48!important;background:#f3faf6!important;border-radius:12px!important;padding:10px 12px!important;margin:10px 0!important;color:#173b2e!important;font-weight:750!important}
#mainLesson .phf-quiz-correct{border-color:#8ccfa2!important;background:#f0fbf4!important}
#mainLesson .phf-quiz-wrong{border-color:#efb4a8!important;background:#fff7f4!important}
#step2TestResult.pass,#day1AfternoonQuizResult.pass,.b3-result.pass,.b4-result.pass{border-color:#9ed2b4!important;background:#eef9f2!important;color:#124c2b!important;display:block!important}
#step2TestResult.fail,#day1AfternoonQuizResult.fail,.b3-result.fail,.b4-result.fail{border-color:#efb4a8!important;background:#fff7f4!important;color:#7d261c!important;display:block!important}
@media(max-width:900px){
  #mainLesson .phf-original-contained .welcome-card,
  #mainLesson .b3-flow,
  #mainLesson .b3-grid,
  #mainLesson .b3-grid-3{grid-template-columns:1fr!important}
  #mainLesson .phf-original-contained .welcome-right{border-left:0!important;border-top:1px solid #e2efe7!important}
}


/* Stage 3.14.0 - Hình minh họa bài học: dùng chọn lọc, không cắt xén ảnh */
.phf-lesson-visual{
  margin: 18px 0 20px;
  border: 1px solid rgba(0,77,58,.12);
  border-radius: 22px;
  background: linear-gradient(180deg,#ffffff 0%,#f6fbf8 100%);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,77,58,.07);
}
.phf-lesson-visual-img{
  width: 100%;
  background: #f4faf6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phf-lesson-visual-img img{
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.phf-lesson-visual-caption{
  display: grid;
  gap: 5px;
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(0,77,58,.08);
  font-family: inherit;
}
.phf-lesson-visual-caption span{
  width: max-content;
  max-width: 100%;
  color: #004D3A;
  background: #eef8f1;
  border: 1px solid rgba(99,173,48,.24);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}
.phf-lesson-visual-caption b{
  color: #063d32;
  font-size: 17px;
  line-height: 1.35;
}
.phf-lesson-visual-caption small{
  color: #526c64;
  font-size: 13.5px;
  line-height: 1.55;
}
@media (max-width: 760px){
  .phf-lesson-visual{border-radius: 16px;margin:14px 0 16px;}
  .phf-lesson-visual-caption{padding:12px 14px 14px;}
  .phf-lesson-visual-caption b{font-size:16px;}
}


/* Stage 3.14.1 - Chuẩn hóa logo: dùng asset logo thật, không dựa vào logo AI trong ảnh */
.topbar.phf-site-header .brand .logo,
.phf-intro-brand img,
.phf-phone-entry-head img,
.phf-role-dialog-brand img,
.phf-print-logo img{
  object-fit: contain !important;
  background:#fff !important;
}
.topbar.phf-site-header .brand .logo img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
.phf-logo-fallback::before{
  content:'Phuhoa Fresh';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  min-height:34px;
  padding:4px 10px;
  border-radius:10px;
  color:#004D3A;
  background:#fff;
  font-family:inherit;
  font-weight:900;
  letter-spacing:-.02em;
}
.phf-lesson-visual-img{
  position:relative;
}
.phf-lesson-visual-img::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:0;
  box-shadow: inset 0 0 0 1px rgba(0,77,58,.04);
}


/* Stage 3.14.2 - Official logo from user + header anti-overlap fix */
:root{ --phf-header-logo-w: 150px; --phf-header-logo-h: 46px; }
.logo img,
.phf-logo-home .logo img,
.phf-intro-brand img,
.phf-intro-logo-main,
.phf-phone-entry-head img,
.phf-role-dialog-brand img,
.phf-print-logo img,
.logo-placeholder img,
img[src*="assets/logo/phf-logo"]{
  object-fit: contain !important;
  object-position: center !important;
  max-width: 100% !important;
  height: auto !important;
}
.phf-logo-home .logo,
.brand .logo,
button.brand .logo{
  width: var(--phf-header-logo-w) !important;
  min-width: var(--phf-header-logo-w) !important;
  height: var(--phf-header-logo-h) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.phf-logo-home .logo img,
.brand .logo img,
button.brand .logo img{
  max-height: var(--phf-header-logo-h) !important;
  width: auto !important;
  max-width: var(--phf-header-logo-w) !important;
}
.phf-logo-home,
button.brand,
.brand.phf-logo-home{
  flex: 0 0 390px !important;
  max-width: 390px !important;
  min-width: 320px !important;
  display:flex !important;
  align-items:center !important;
  gap: 16px !important;
  white-space: nowrap !important;
  overflow:hidden !important;
}
.phf-logo-home h1,
button.brand h1,
.brand.phf-logo-home h1{
  font-size: clamp(20px, 1.45vw, 28px) !important;
  line-height:1.05 !important;
  margin:0 !important;
  white-space: nowrap !important;
}
.phf-logo-home p,
button.brand p,
.brand.phf-logo-home p{
  font-size: clamp(12px, .85vw, 15px) !important;
  margin:4px 0 0 !important;
  white-space: nowrap !important;
}
.topbar,
header.topbar,
.phf-main-header,
.app-header,
.training-header{
  display:flex !important;
  align-items:center !important;
  gap: 20px !important;
  min-width:0 !important;
}
.topbar nav,
header.topbar nav,
.nav,
.phf-main-nav,
.main-nav{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: clamp(12px, 1.3vw, 28px) !important;
  white-space: nowrap !important;
  overflow:hidden !important;
}
.topbar nav a,
.topbar nav button,
.nav a,
.nav button,
.nav-item{
  flex:0 0 auto !important;
}
.account-pill,
.phf-account,
.login-switcher,
.account-switcher,
button[onclick*="Role"],
button[onclick*="role"]{
  flex:0 0 auto !important;
}
@media (max-width: 1240px){
  :root{ --phf-header-logo-w: 122px; --phf-header-logo-h: 40px; }
  .phf-logo-home, button.brand, .brand.phf-logo-home{ flex-basis: 320px !important; max-width:320px !important; min-width:270px !important; gap:12px !important; }
  .topbar, header.topbar{ gap:12px !important; }
  .topbar nav, header.topbar nav, .nav, .phf-main-nav, .main-nav{ gap: 14px !important; font-size: 14px !important; justify-content:flex-start !important; }
}
@media (max-width: 1020px){
  .topbar, header.topbar, .phf-main-header, .app-header, .training-header{ flex-wrap:wrap !important; align-items:flex-start !important; }
  .phf-logo-home, button.brand, .brand.phf-logo-home{ flex:1 1 100% !important; max-width:100% !important; }
  .topbar nav, header.topbar nav, .nav, .phf-main-nav, .main-nav{ order:3 !important; width:100% !important; overflow-x:auto !important; padding-bottom:4px !important; justify-content:flex-start !important; }
}
@media (max-width: 640px){
  :root{ --phf-header-logo-w: 108px; --phf-header-logo-h: 36px; }
  .phf-logo-home h1, button.brand h1, .brand.phf-logo-home h1{ font-size:20px !important; }
  .phf-logo-home p, button.brand p, .brand.phf-logo-home p{ font-size:12px !important; }
}


/* PHF STAGE 3.14.3 - Official logo/header fix + exact image placement */
:root{
  --phf-official-logo-w: 132px;
  --phf-official-logo-h: 46px;
}
.topbar.phf-site-header{
  display:grid !important;
  grid-template-columns:minmax(300px, 370px) minmax(0, 1fr) auto !important;
  align-items:center !important;
  column-gap:18px !important;
  row-gap:10px !important;
  overflow:visible !important;
}
.topbar.phf-site-header .phf-logo-home,
.topbar.phf-site-header button.brand.phf-logo-home,
.topbar.phf-site-header .brand.phf-logo-home{
  grid-column:1 !important;
  width:100% !important;
  min-width:0 !important;
  max-width:370px !important;
  flex:0 1 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  overflow:hidden !important;
  white-space:normal !important;
}
.topbar.phf-site-header .brand .logo,
.topbar.phf-site-header .phf-logo-home .logo,
.topbar.phf-site-header button.brand .logo{
  width:var(--phf-official-logo-w) !important;
  min-width:var(--phf-official-logo-w) !important;
  max-width:var(--phf-official-logo-w) !important;
  height:var(--phf-official-logo-h) !important;
  flex:0 0 var(--phf-official-logo-w) !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
  padding:0 !important;
}
.topbar.phf-site-header .brand .logo img,
.topbar.phf-site-header .phf-logo-home .logo img,
.topbar.phf-site-header button.brand .logo img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}
.topbar.phf-site-header .brand > div:not(.logo){
  min-width:0 !important;
  overflow:hidden !important;
}
.topbar.phf-site-header .brand h1{
  margin:0 !important;
  font-size:22px !important;
  line-height:1.12 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  color:#004D3A !important;
}
.topbar.phf-site-header .brand p{
  margin:2px 0 0 !important;
  font-size:12.5px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.topbar.phf-site-header .phf-main-nav{
  grid-column:2 !important;
  min-width:0 !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:clamp(8px, .85vw, 18px) !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}
.topbar.phf-site-header .phf-main-nav button{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  padding-left:8px !important;
  padding-right:8px !important;
}
.topbar.phf-site-header .phf-login-entry,
.topbar.phf-site-header .student-card{
  grid-column:3 !important;
  justify-self:end !important;
  flex:0 0 auto !important;
  max-width:230px !important;
  min-width:0 !important;
}
.phf-lesson-visual-img{
  background:#fff !important;
}
.phf-lesson-visual-img img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
}
@media (max-width: 1280px){
  :root{ --phf-official-logo-w:118px; --phf-official-logo-h:42px; }
  .topbar.phf-site-header{
    grid-template-columns:minmax(260px, 330px) minmax(0, 1fr) auto !important;
    column-gap:12px !important;
  }
  .topbar.phf-site-header .brand h1{font-size:20px !important;}
  .topbar.phf-site-header .brand p{font-size:11.8px !important;}
  .topbar.phf-site-header .phf-main-nav{justify-content:flex-start !important;gap:8px !important;overflow-x:auto !important;scrollbar-width:thin !important;}
}
@media (max-width: 1040px){
  .topbar.phf-site-header{
    grid-template-columns:1fr auto !important;
  }
  .topbar.phf-site-header .phf-logo-home,
  .topbar.phf-site-header button.brand.phf-logo-home,
  .topbar.phf-site-header .brand.phf-logo-home{grid-column:1 !important;max-width:none !important;}
  .topbar.phf-site-header .phf-mobile-menu-toggle{grid-column:2 !important;display:inline-flex !important;}
  .topbar.phf-site-header .phf-main-nav,
  .topbar.phf-site-header .phf-login-entry,
  .topbar.phf-site-header .student-card{display:none !important;}
  .topbar.phf-site-header.phf-mobile-open .phf-main-nav{
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    overflow:visible !important;
    gap:6px !important;
  }
  .topbar.phf-site-header.phf-mobile-open .phf-login-entry,
  .topbar.phf-site-header.phf-mobile-open .student-card{
    grid-column:1 / -1 !important;
    display:flex !important;
    width:100% !important;
    max-width:none !important;
    justify-self:stretch !important;
  }
}
@media (max-width: 560px){
  :root{ --phf-official-logo-w:106px; --phf-official-logo-h:38px; }
  .topbar.phf-site-header .brand h1{font-size:17px !important;}
  .topbar.phf-site-header .brand p{display:none !important;}
}


/* === PHF STAGE 3.14.6: homepage v4 font sync - interface only === */
#introSection.is-landing .phf-intro-viewer{background:#eef4ee!important;}
#introSection.is-landing .phf-intro-deck{height:calc(100vh - 76px)!important;overflow:auto!important;background:
  radial-gradient(circle at top left, rgba(99,173,48,.08), transparent 26%),
  radial-gradient(circle at top right, rgba(0,77,58,.06), transparent 22%),
  linear-gradient(180deg,#f7fbf6 0%,#eef4ee 100%)!important;}
#introSection.is-landing .phf-landing-slide{background:transparent!important;}
.phf-home-v4-wrap,
.phf-home-v4-wrap *{font-family:var(--phf-font-main,Arial,"Helvetica Neue",Helvetica,system-ui,-apple-system,BlinkMacSystemFont,sans-serif)!important;}
.phf-home-v4-wrap{--home-green:#004D3A;--home-green2:#0B6A51;--home-leaf:#63AD30;--home-soft:#F4FAEF;--home-line:#DCE8D7;--home-text:#14211C;--home-muted:#6A7872;width:min(1200px,calc(100% - 32px));margin:24px auto 56px;color:var(--home-text);}
.phf-home-v4-hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;align-items:stretch;margin-bottom:20px;}
.phf-home-v4-copy{position:relative;overflow:hidden;border:1px solid rgba(0,77,58,.08);border-radius:30px;padding:28px;background:radial-gradient(circle at top left,rgba(99,173,48,.11),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,253,246,.92));box-shadow:0 12px 30px rgba(0,77,58,.055);min-height:350px;display:flex;flex-direction:column;justify-content:center;}
.phf-home-v4-copy:after{content:"";position:absolute;right:-44px;bottom:-56px;width:190px;height:190px;border-radius:40px;background:linear-gradient(135deg,rgba(99,173,48,.10),rgba(0,77,58,.02));transform:rotate(24deg);}
.phf-home-v4-eyebrow{margin:0 0 12px!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--home-leaf)!important;}
.phf-home-v4-copy h1{position:relative;z-index:1;margin:0!important;color:var(--home-green)!important;font-size:40px!important;line-height:1.10!important;font-weight:700!important;letter-spacing:-.35px!important;}
.phf-home-v4-copy h1 span{display:block;color:var(--home-leaf);margin-top:6px;font-weight:700!important;}
.phf-home-v4-lead{position:relative;z-index:1;margin:18px 0 0!important;max-width:520px;color:#2B3833!important;font-size:18px!important;line-height:1.62!important;font-weight:400!important;}
.phf-home-v4-lead strong{color:var(--home-green);font-weight:700!important;}
.phf-home-v4-actions{position:relative;z-index:1;margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;}
.phf-home-v4-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px!important;padding:12px 17px!important;text-decoration:none!important;font-size:14px!important;font-weight:600!important;transition:.2s ease!important;cursor:pointer!important;border:0!important;line-height:1!important;}
.phf-home-v4-btn.primary{background:var(--home-green)!important;color:#fff!important;box-shadow:0 10px 22px rgba(0,77,58,.13)!important;}
.phf-home-v4-btn.light{background:var(--home-soft)!important;color:var(--home-green)!important;border:1px solid var(--home-line)!important;}
.phf-home-v4-btn:hover{transform:translateY(-1px);}
.phf-home-v4-photo{background:rgba(255,255,255,.82);border:1px solid rgba(0,77,58,.08);border-radius:30px;padding:12px;box-shadow:0 12px 30px rgba(0,77,58,.055);overflow:hidden;}
.phf-home-v4-photo img{display:block;width:100%;height:100%;min-height:350px;object-fit:contain;object-position:center;border-radius:22px;background:#f8fbf7;}
.phf-home-v4-shortcuts{position:relative;margin-bottom:20px;padding:18px;border:1px solid rgba(0,77,58,.08);background:rgba(255,255,255,.76);border-radius:28px;box-shadow:0 12px 30px rgba(0,77,58,.055);overflow:hidden;}
.phf-home-v4-shortcuts:before{content:"";position:absolute;inset:auto -40px -48px auto;width:180px;height:180px;border-radius:38px;background:linear-gradient(135deg,rgba(99,173,48,.08),rgba(0,77,58,.02));transform:rotate(28deg);}
.phf-home-v4-shortcut-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:16px;position:relative;z-index:1;}
.phf-home-v4-shortcut-head h2{margin:0!important;font-size:25px!important;line-height:1.20!important;color:var(--home-green)!important;font-weight:700!important;letter-spacing:-.1px!important;}
.phf-home-v4-shortcut-head>p{max-width:420px;margin:0!important;font-size:14px!important;line-height:1.55!important;color:var(--home-muted)!important;font-weight:400!important;}
.phf-home-v4-shortcut-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative;z-index:1;}
.phf-home-v4-shortcut-card{position:relative;text-align:left;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,252,246,.94));border:1px solid rgba(0,77,58,.10);border-radius:20px;padding:18px;min-height:146px;text-decoration:none;color:inherit;box-shadow:0 10px 24px rgba(0,77,58,.045);transition:.2s ease;overflow:hidden;cursor:pointer;}
.phf-home-v4-shortcut-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,77,58,.085);border-color:rgba(0,77,58,.16);}
.phf-home-v4-shortcut-card:before{content:"";position:absolute;top:-28px;right:-28px;width:92px;height:92px;border-radius:26px;background:linear-gradient(135deg,rgba(99,173,48,.10),rgba(0,77,58,.02));transform:rotate(22deg);}
.phf-home-v4-icon{width:46px;height:46px;border-radius:15px;background:var(--home-soft);display:grid;place-items:center;color:var(--home-green);font-size:21px;font-weight:700!important;margin-bottom:14px;position:relative;z-index:1;}
.phf-home-v4-shortcut-card strong{display:block;position:relative;z-index:1;font-size:17px!important;color:var(--home-green);margin-bottom:8px;line-height:1.3;font-weight:700!important;}
.phf-home-v4-shortcut-card em{position:relative;z-index:1;display:block;color:var(--home-muted);font-size:14px;line-height:1.5;font-style:normal;font-weight:400;}
.phf-home-v4-mission{position:relative;background:rgba(255,255,255,.82);border:1px solid rgba(0,77,58,.08);border-radius:30px;padding:28px;box-shadow:0 16px 42px rgba(0,77,58,.065);overflow:hidden;}
.phf-home-v4-mission:before{content:"";position:absolute;left:-40px;top:-40px;width:150px;height:150px;border-radius:34px;background:linear-gradient(135deg,rgba(99,173,48,.07),rgba(0,77,58,.03));transform:rotate(-20deg);}
.phf-home-v4-mission:after{content:"";position:absolute;right:-20px;bottom:-30px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(99,173,48,.07),transparent 70%);}
.phf-home-v4-mission-inner{position:relative;z-index:1;}
.phf-home-v4-mission-head{display:grid;grid-template-columns:1.15fr .95fr;gap:28px;align-items:start;margin-bottom:20px;}
.phf-home-v4-mission-head h2{margin:0!important;color:var(--home-green)!important;font-size:30px!important;line-height:1.20!important;max-width:650px;font-weight:700!important;letter-spacing:-.15px!important;}
.phf-home-v4-mission-head>p{padding-top:14px;margin:0!important;color:var(--home-muted)!important;font-size:15px!important;line-height:1.65!important;max-width:480px;font-weight:400!important;}
.phf-home-v4-mission-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.phf-home-v4-mission-grid article{position:relative;background:rgba(255,255,255,.94);border:1px solid var(--home-line);border-radius:20px;padding:20px;min-height:154px;overflow:hidden;}
.phf-home-v4-mission-grid article:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--home-green),var(--home-leaf));}
.phf-home-v4-mission-grid strong{display:block;color:var(--home-green);font-size:17px!important;line-height:1.35;margin-bottom:12px;font-weight:700!important;}
.phf-home-v4-mission-grid span{display:block;color:var(--home-muted);font-size:14px;line-height:1.62;font-weight:400;}
@media (max-width:1060px){.phf-home-v4-hero,.phf-home-v4-mission-head{grid-template-columns:1fr;}.phf-home-v4-shortcut-grid,.phf-home-v4-mission-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:720px){.phf-home-v4-wrap{width:min(100% - 22px,1200px);margin-top:16px;}.phf-home-v4-copy,.phf-home-v4-photo,.phf-home-v4-shortcuts,.phf-home-v4-mission{border-radius:22px;}.phf-home-v4-copy,.phf-home-v4-mission{padding:22px 18px;}.phf-home-v4-copy h1{font-size:32px!important;}.phf-home-v4-lead{font-size:17px!important;}.phf-home-v4-shortcut-head{display:block;}.phf-home-v4-shortcut-head h2{font-size:23px!important;}.phf-home-v4-mission-head h2{font-size:24px!important;}.phf-home-v4-shortcut-grid,.phf-home-v4-mission-grid{grid-template-columns:1fr;}}

/* PHF STAGE 3.14.7: Phiếu đánh giá in sạch, không kéo header/menu/layout web. Không áp dụng cho BMTT. */
@media print{
  body.phf-eval-mode:not(.phf-bmtt-print-mode) *{visibility:hidden!important;}
  body.phf-eval-mode:not(.phf-bmtt-print-mode) #weeklyFormBox .eval-document,
  body.phf-eval-mode:not(.phf-bmtt-print-mode) #weeklyFormBox .eval-document *,
  body.phf-eval-mode:not(.phf-bmtt-print-mode) #weeklyFormBox .final-paper,
  body.phf-eval-mode:not(.phf-bmtt-print-mode) #weeklyFormBox .final-paper *{visibility:visible!important;}
  body.phf-eval-mode:not(.phf-bmtt-print-mode) #weeklyFormBox .eval-document,
  body.phf-eval-mode:not(.phf-bmtt-print-mode) #weeklyFormBox .final-paper{
    display:block!important;
    position:absolute!important;
    left:0!important;
    top:0!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:14mm 13mm!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#fff!important;
    color:#111!important;
    overflow:visible!important;
    font-family:var(--phf-font-main, Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif)!important;
  }
  body.phf-eval-mode:not(.phf-bmtt-print-mode) .eval-document-title h2{font-size:17pt!important;line-height:1.18!important;}
  body.phf-eval-mode:not(.phf-bmtt-print-mode) .eval-doc-section{break-inside:avoid-page;page-break-inside:avoid;}
  body.phf-eval-mode:not(.phf-bmtt-print-mode) .eval-sign-row,
  body.phf-eval-mode:not(.phf-bmtt-print-mode) .final-signs{break-inside:avoid-page;page-break-inside:avoid;}
}

/* Stage 3.14.8 - rõ hóa danh sách việc đánh giá cần làm */
.hub-eval-todo-table .hub-stt,
.hub-action-table .hub-stt{
  width:64px;
  text-align:center;
  color:#344054;
  font-weight:850;
}
.hub-status-pill.upcoming{
  border-color:#b8d6ff;
  background:#eef6ff;
  color:#175cd3;
}
#phfEvalTodoList{
  scroll-margin-top:96px;
}
#phfEvalTodoList .hub-panel-head > div h3{
  margin-bottom:4px;
}

/* Stage 3.14.9 - Font/style sync for Home + Admin training dashboard
   Scope only: screen UI of homepage/admin/evaluation/report modules.
   Purpose: make newer patched areas visually match the existing PHF Training Hub typography.
   Do not touch BMTT print mode or evaluation print mode. */
@media screen{
  :root{
    --phf-font-main:Arial,"Helvetica Neue",Helvetica,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
    --phf-ui-title:#064533;
    --phf-ui-text:#18372d;
    --phf-ui-muted:#536d62;
    --phf-ui-line:#d9eadf;
    --phf-ui-soft:#f8fcfa;
  }

  body:not(.phf-bmtt-print-mode):not(.phf-eval-print-mode),
  body:not(.phf-bmtt-print-mode):not(.phf-eval-print-mode) button,
  body:not(.phf-bmtt-print-mode):not(.phf-eval-print-mode) input,
  body:not(.phf-bmtt-print-mode):not(.phf-eval-print-mode) select,
  body:not(.phf-bmtt-print-mode):not(.phf-eval-print-mode) textarea{
    font-family:var(--phf-font-main)!important;
  }

  .phf-home-v4-wrap,
  .phf-home-v4-wrap *,
  .eval-admin-shell,
  .eval-admin-shell *,
  .hub-overview-page,
  .hub-overview-page *,
  .hub-report-page,
  .hub-report-page *,
  .eval-history-card,
  .eval-history-card *,
  .eval-period-card,
  .eval-period-card *{
    font-family:var(--phf-font-main)!important;
  }

  .eval-admin-shell,
  .hub-overview-page,
  .hub-report-page{
    color:var(--phf-ui-text)!important;
    line-height:1.48!important;
  }

  .hub-dashboard-hero h2,
  .hub-hero h2,
  .hub-panel-head h3,
  .hub-full-title,
  .hub-eval-entry-card h3,
  .eval-history-head h3,
  .eval-card h3,
  .eval-period-head h3,
  .eval-detail-head h3{
    font-family:var(--phf-font-main)!important;
    color:var(--phf-ui-title)!important;
    font-weight:700!important;
    letter-spacing:0!important;
    line-height:1.28!important;
    text-transform:none!important;
  }

  .hub-dashboard-hero p,
  .hub-hero p,
  .hub-panel-head span,
  .hub-row small,
  .hub-work-row small,
  .hub-kpi p,
  .eval-history-head p,
  .eval-profile-line,
  .eval-tab-empty,
  .hub-empty,
  .hub-report-table-note{
    font-family:var(--phf-font-main)!important;
    color:var(--phf-ui-muted)!important;
    font-weight:600!important;
    letter-spacing:0!important;
  }

  .hub-kpi b,
  .hub-report-metric b,
  .final-eval-metric b,
  .eval-history-metric b,
  .hub-full-count{
    font-family:var(--phf-font-main)!important;
    font-weight:700!important;
    letter-spacing:-.15px!important;
    color:var(--phf-ui-title)!important;
  }

  .hub-kpi span,
  .hub-report-metric span,
  .final-eval-metric span,
  .eval-history-metric span{
    font-family:var(--phf-font-main)!important;
    font-weight:700!important;
    letter-spacing:.02em!important;
  }

  .eval-action,
  .eval-save-btn,
  .eval-tabbtn,
  .hub-shortcuts .eval-action,
  .hub-dashboard-foot .eval-action,
  .hub-full-actions .eval-action{
    font-family:var(--phf-font-main)!important;
    font-weight:700!important;
    letter-spacing:0!important;
  }

  .hub-panel,
  .hub-kpi,
  .hub-dashboard-hero,
  .hub-full-eval-card,
  .eval-card,
  .eval-history-card,
  .eval-period-card{
    border-color:var(--phf-ui-line)!important;
    border-radius:12px!important;
    box-shadow:0 10px 26px rgba(7,59,45,.055)!important;
  }

  .hub-panel-head,
  .hub-shortcuts,
  .hub-dashboard-foot,
  .hub-report-filters{
    background:var(--phf-ui-soft)!important;
    border-color:var(--phf-ui-line)!important;
  }

  .hub-action-table,
  .hub-action-table th,
  .hub-action-table td,
  .eval-history-table,
  .eval-history-table th,
  .eval-history-table td{
    font-family:var(--phf-font-main)!important;
  }

  .hub-action-table th,
  .eval-history-table th{
    background:#f7fbf8!important;
    color:#344054!important;
    font-size:12px!important;
    font-weight:700!important;
    letter-spacing:.02em!important;
  }

  .hub-action-table td,
  .eval-history-table td{
    color:#1f2933!important;
    font-size:13px!important;
    font-weight:600!important;
  }

  .hub-status-pill,
  .eval-status-chip,
  .weekly-pill{
    font-family:var(--phf-font-main)!important;
    font-weight:700!important;
    letter-spacing:0!important;
  }

  /* Keep homepage v4 approved layout, but match real web typography more closely. */
  .phf-home-v4-copy h1{font-size:38px!important;font-weight:700!important;letter-spacing:-.2px!important;}
  .phf-home-v4-lead{font-size:17px!important;font-weight:400!important;line-height:1.62!important;}
  .phf-home-v4-shortcut-head h2{font-size:24px!important;font-weight:700!important;}
  .phf-home-v4-mission-head h2{font-size:28px!important;font-weight:700!important;}
  .phf-home-v4-shortcut-card strong,
  .phf-home-v4-mission-grid strong{font-weight:700!important;}
}


/* Stage 3.15.0A - Intro video before login only. Scoped styles; no learning/BMTT/print changes. */
body.phf-intro-active{
  background:#eef5ee;
}
body.phf-intro-active > .app{
  display:none !important;
}
.phf-login-intro-shell{
  min-height:100vh;
  padding:26px;
  background:
    radial-gradient(circle at 12% 0%, rgba(99,173,48,.12), transparent 34%),
    radial-gradient(circle at 90% 10%, rgba(0,77,58,.10), transparent 30%),
    linear-gradient(180deg,#f9fcf7 0%,#eef5ee 100%);
  font-family:var(--phf-font-main, Arial,"Helvetica Neue",Helvetica,system-ui,-apple-system,BlinkMacSystemFont,sans-serif);
  color:#14211c;
}
.phf-login-intro-header{
  width:min(1240px,100%);
  margin:0 auto 26px;
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 22px;
  border:1px solid rgba(0,77,58,.10);
  border-radius:24px;
  background:rgba(255,255,255,.88);
  box-shadow:0 14px 34px rgba(0,77,58,.07);
}
.phf-login-intro-brand{
  border:0;
  background:transparent;
  padding:0;
  display:flex;
  align-items:center;
  gap:18px;
  text-align:left;
  color:#004d3a;
  font:inherit;
  cursor:pointer;
}
.phf-login-intro-brand img{
  width:210px;
  max-width:42vw;
  height:auto;
  display:block;
}
.phf-login-intro-brand > div{
  padding-left:18px;
  border-left:1px solid rgba(0,77,58,.14);
  display:flex;
  flex-direction:column;
  line-height:1.12;
}
.phf-login-intro-brand b{
  font-size:20px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
}
.phf-login-intro-brand span{
  margin-top:8px;
  color:#65736d;
  font-size:15px;
  letter-spacing:.01em;
  white-space:nowrap;
}
.phf-login-intro-login,
.phf-login-intro-primary{
  border:0;
  border-radius:999px;
  background:#004d3a;
  color:#fff;
  font-family:var(--phf-font-main, Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif);
  font-weight:700;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(0,77,58,.16);
}
.phf-login-intro-login{
  min-width:132px;
  padding:15px 22px;
  font-size:16px;
}
.phf-login-intro-main{
  width:min(1240px,100%);
  margin:0 auto;
}
.phf-login-intro-slide{
  display:grid !important;
  grid-template-columns:.72fr 1.28fr;
  gap:24px;
  align-items:stretch;
  opacity:1 !important;
  transform:none !important;
  position:relative !important;
  min-height:0 !important;
}
.phf-login-intro-copy,
.phf-login-intro-video-card{
  border:1px solid rgba(0,77,58,.10);
  border-radius:30px;
  background:rgba(255,255,255,.88);
  box-shadow:0 22px 54px rgba(0,77,58,.08);
  overflow:hidden;
}
.phf-login-intro-copy{
  padding:38px 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 0 0, rgba(99,173,48,.12), transparent 34%),
    rgba(255,255,255,.88);
}
.phf-login-intro-eyebrow{
  margin:0 0 16px;
  color:#63ad30;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.phf-login-intro-copy h1{
  margin:0;
  color:#004d3a;
  font-size:38px;
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.02em;
}
.phf-login-intro-copy p:not(.phf-login-intro-eyebrow){
  margin:20px 0 0;
  color:#465650;
  font-size:17px;
  line-height:1.65;
}
.phf-login-intro-video-card{
  padding:14px;
  background:#fff;
}
.phf-login-intro-video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border-radius:22px;
  background:#071d17;
  object-fit:contain;
}
.phf-login-intro-actions{
  grid-column:1 / -1;
  display:flex;
  justify-content:center;
  margin-top:2px;
}
.phf-login-intro-primary{
  padding:16px 26px;
  font-size:17px;
}
.phf-login-intro-login:hover,
.phf-login-intro-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 38px rgba(0,77,58,.20);
}
@media (max-width: 980px){
  .phf-login-intro-shell{padding:16px;}
  .phf-login-intro-header{border-radius:20px;}
  .phf-login-intro-slide{grid-template-columns:1fr;}
  .phf-login-intro-copy{padding:26px 22px;}
  .phf-login-intro-copy h1{font-size:30px;}
}
@media (max-width: 680px){
  .phf-login-intro-header{
    align-items:flex-start;
    flex-direction:column;
  }
  .phf-login-intro-brand{
    width:100%;
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }
  .phf-login-intro-brand img{max-width:220px;width:70vw;}
  .phf-login-intro-brand > div{
    padding-left:0;
    border-left:0;
  }
  .phf-login-intro-brand b{font-size:17px;}
  .phf-login-intro-brand span{white-space:normal;font-size:14px;}
  .phf-login-intro-login{width:100%;}
}

/* Stage 3.15.0B - Feature intro v5 before login. Scoped only to intro screen. */
body.phf-intro-active{
  background:#f4faef!important;
}
body.phf-intro-active > .app{
  display:none!important;
}
.phf-feature-intro-section,
.phf-feature-intro-section *{
  font-family:var(--phf-font-main, Arial,"Helvetica Neue",Helvetica,system-ui,-apple-system,BlinkMacSystemFont,sans-serif)!important;
}
.phf-feature-intro-section[hidden]{display:none!important;}
.phf-feature-intro-stage{
  position:relative;
  width:100vw;
  min-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 18%, rgba(99,173,48,.13), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(0,77,58,.09), transparent 26%),
    linear-gradient(135deg,#fff 0%,#f5faf0 48%,#e8f5e1 100%);
  color:#14211c;
}
.phf-feature-intro-stage:before{
  content:"";
  position:absolute;
  width:44vw;
  height:44vw;
  right:-17vw;
  top:-19vw;
  border-radius:9vw;
  background:linear-gradient(135deg,rgba(0,77,58,.09),rgba(99,173,48,.11));
  transform:rotate(28deg);
  z-index:0;
}
.phf-feature-intro-stage:after{
  content:"";
  position:absolute;
  width:34vw;
  height:34vw;
  left:-17vw;
  bottom:-19vw;
  border-radius:50%;
  background:radial-gradient(circle,rgba(99,173,48,.14),transparent 70%);
  z-index:0;
}
.phf-feature-intro-login{
  position:absolute;
  right:5vw;
  top:6.5vh;
  z-index:9;
  border:0;
  border-radius:999px;
  background:#004d3a;
  color:#fff;
  min-height:46px;
  padding:0 22px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 16px 36px rgba(0,77,58,.18);
}
.phf-feature-intro-login:hover{background:#083f31;transform:translateY(-1px);}
.phf-feature-intro-brand{
  position:absolute;
  left:5vw;
  top:6.5vh;
  z-index:5;
  display:flex;
  align-items:center;
  gap:22px;
}
.phf-feature-intro-logo{
  width:300px;
  max-width:28vw;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  filter:drop-shadow(0 12px 22px rgba(0,77,58,.10));
  flex:0 0 auto;
}
.phf-feature-intro-logo img{
  width:100%;
  height:auto;
  display:block;
}
.phf-feature-intro-logo.phf-logo-fallback:before{
  content:"PHUHOA FRESH";
  color:#004d3a;
  font-size:28px;
  font-weight:700;
}
.phf-feature-intro-separator{
  width:1px;
  height:52px;
  background:rgba(0,77,58,.16);
}
.phf-feature-intro-brand-text strong{
  color:#004d3a;
  font-size:24px;
  letter-spacing:.2px;
  display:block;
  font-weight:700;
}
.phf-feature-intro-brand-text span{
  color:#61736b;
  font-size:15px;
  margin-top:7px;
  display:block;
}
.phf-feature-intro-layout{
  position:relative;
  z-index:2;
  width:90vw;
  height:100vh;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(420px,1fr) minmax(440px,560px);
  gap:5vw;
  align-items:center;
  padding-top:6vh;
}
.phf-feature-intro-slide{
  display:contents!important;
  opacity:1!important;
  transform:none!important;
  position:static!important;
}
.phf-feature-intro-content{
  position:relative;
  min-height:360px;
  align-self:center;
  margin-top:6vh;
}
.phf-feature-scene{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .65s ease, transform .65s ease;
  position:absolute;
  inset:0;
  pointer-events:none;
}
.phf-feature-scene.active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.phf-feature-eyebrow{
  margin:0 0 16px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#63ad30;
  font-size:14px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.phf-feature-eyebrow:before{
  content:"";
  width:38px;
  height:3px;
  border-radius:999px;
  background:#63ad30;
}
.phf-feature-scene h1,
.phf-feature-scene h2{
  margin:0;
  color:#004d3a;
  font-weight:700;
  letter-spacing:-.025em;
}
.phf-feature-scene h1{
  font-size:54px;
  line-height:1.07;
  max-width:650px;
}
.phf-feature-scene h2{
  font-size:42px;
  line-height:1.14;
  max-width:620px;
}
.phf-feature-scene h1 span{color:#63ad30;}
.phf-feature-scene p{
  margin:22px 0 0;
  color:#31433b;
  font-size:22px;
  line-height:1.48;
  max-width:590px;
}
.phf-feature-chips{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
  max-width:620px;
}
.phf-feature-chips span{
  min-height:44px;
  padding:0 17px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,77,58,.10);
  color:#004d3a;
  display:inline-flex;
  align-items:center;
  font-size:17px;
  font-weight:700;
  box-shadow:0 12px 28px rgba(0,77,58,.05);
}
.phf-feature-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:30px;
  min-height:56px;
  padding:0 24px;
  border:0;
  border-radius:999px;
  background:#004d3a;
  color:white;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 18px 42px rgba(0,77,58,.18);
}
.phf-feature-mockup-shell{
  align-self:center;
  width:100%;
  max-width:560px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(0,77,58,.08);
  border-radius:36px;
  padding:22px;
  box-shadow:0 34px 86px rgba(0,77,58,.12);
  backdrop-filter:blur(6px);
  margin-top:7vh;
}
.phf-feature-mockup{
  border-radius:28px;
  overflow:hidden;
  background:#f8fbf6;
  border:1px solid rgba(0,77,58,.08);
}
.phf-feature-mockup-top{
  background:linear-gradient(135deg,#004d3a,#0b6a51);
  padding:18px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:white;
}
.phf-feature-mockup-left{display:flex;align-items:center;gap:12px;min-width:0;}
.phf-feature-dots{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.phf-feature-dots i{display:block;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.72);}
.phf-feature-mockup-left b{font-size:18px;font-weight:700;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.phf-feature-mockup-top > span{
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  margin-left:14px;
}
.phf-feature-mockup-body{
  padding:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.phf-feature-card{
  min-height:132px;
  background:#fff;
  border:1px solid rgba(0,77,58,.08);
  border-radius:22px;
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  box-shadow:0 10px 24px rgba(0,77,58,.045);
}
.phf-feature-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.phf-feature-icon{
  width:44px;
  height:44px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:#f4faef;
  color:#004d3a;
  font-weight:800;
  font-size:20px;
  flex:0 0 auto;
}
.phf-feature-card em{
  font-style:normal;
  font-size:11px;
  font-weight:700;
  color:#004d3a;
  background:#eff7ea;
  border:1px solid rgba(99,173,48,.18);
  border-radius:999px;
  padding:6px 9px;
  white-space:nowrap;
}
.phf-feature-card strong{display:block;color:#004d3a;font-size:17px;line-height:1.2;margin-bottom:7px;font-weight:700;}
.phf-feature-card p{display:block;color:#61736b;font-size:13px;line-height:1.46;margin:0;}
@media (max-width:1200px){
  .phf-feature-intro-logo{width:250px;max-width:30vw;}
  .phf-feature-intro-layout{grid-template-columns:minmax(390px,1fr) minmax(400px,500px);gap:4vw;}
  .phf-feature-scene h1{font-size:48px;}
  .phf-feature-scene h2{font-size:38px;}
  .phf-feature-scene p{font-size:20px;}
  .phf-feature-card{min-height:126px;}
  .phf-feature-card p{font-size:12.5px;}
}
@media (max-width:920px){
  .phf-feature-intro-login{right:5vw;top:5vh;min-height:42px;padding:0 18px;}
  .phf-feature-intro-brand{left:5vw;top:5vh;gap:14px;right:28vw;}
  .phf-feature-intro-logo{width:180px;max-width:46vw;}
  .phf-feature-intro-separator,.phf-feature-intro-brand-text span{display:none;}
  .phf-feature-intro-brand-text strong{font-size:18px;}
  .phf-feature-intro-layout{width:90vw;display:block;padding-top:0;}
  .phf-feature-intro-content{position:absolute;left:0;right:0;top:22vh;width:90vw;min-height:360px;}
  .phf-feature-scene h1{font-size:40px;}
  .phf-feature-scene h2{font-size:32px;}
  .phf-feature-scene p{font-size:19px;}
  .phf-feature-mockup-shell{position:absolute;right:0;left:0;top:62vh;width:90vw;max-width:none;transform:scale(.92);transform-origin:top center;opacity:.38;}
}
@media (max-width:560px){
  .phf-feature-intro-logo{width:150px;}
  .phf-feature-intro-brand-text{display:none;}
  .phf-feature-intro-login{font-size:14px;padding:0 16px;}
  .phf-feature-scene h1{font-size:34px;}
  .phf-feature-scene h2{font-size:28px;}
  .phf-feature-scene p{font-size:17px;}
  .phf-feature-mockup-top > span{display:none;}
}


/* Stage 3.15.0C - Post-login home + firmer login button. Scoped only. */
.phf-feature-intro-login{
  border-radius:14px!important;
  min-height:50px!important;
  padding:0 26px!important;
  font-size:16px!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  box-shadow:0 12px 26px rgba(0,77,58,.16)!important;
  right:5.4vw!important;
  top:7.2vh!important;
}
.phf-feature-intro-login:hover{transform:translateY(-1px);}
.phf-feature-cta{
  border-radius:14px!important;
  font-weight:800!important;
}
.phf-post-login-home,
.phf-post-login-home *{
  font-family:var(--phf-font-main, Arial,"Helvetica Neue",Helvetica,system-ui,-apple-system,BlinkMacSystemFont,sans-serif)!important;
}
.phf-post-login-home{
  width:100%;
  color:#14211c;
}
.phf-home-hero-banner{
  background:linear-gradient(135deg,#ffffff 0%,#f7fbf3 100%);
  border:1px solid rgba(0,77,58,.08);
  border-radius:28px;
  padding:18px;
  box-shadow:0 18px 48px rgba(0,77,58,.08);
  overflow:hidden;
}
.phf-home-hero-banner img{
  display:block;
  width:100%;
  height:auto;
  max-height:560px;
  object-fit:contain;
  border-radius:18px;
  background:#f7fbf3;
}
.phf-home-main-grid{
  display:grid;
  grid-template-columns:minmax(360px,.9fr) minmax(420px,1.1fr);
  gap:22px;
  align-items:stretch;
  margin-top:18px;
}
.phf-home-copy{
  border-radius:24px;
  background:radial-gradient(circle at top left, rgba(99,173,48,.13), transparent 34%), #fff;
  border:1px solid rgba(0,77,58,.08);
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:0 14px 34px rgba(0,77,58,.07);
}
.phf-home-kicker{
  display:inline-flex;
  width:max-content;
  color:#63ad30;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.phf-home-copy h2{
  margin:0;
  color:#004d3a;
  font-size:34px;
  line-height:1.16;
  font-weight:750;
  letter-spacing:-.02em;
}
.phf-home-copy p{
  margin:18px 0 0;
  color:#4b5c55;
  font-size:15px;
  line-height:1.7;
  max-width:620px;
}
.phf-home-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:24px;
}
.phf-home-action{
  min-height:74px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(0,77,58,.10);
  background:#fff;
  color:#004d3a;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  text-align:left;
  box-shadow:0 10px 24px rgba(0,77,58,.05);
}
.phf-home-action.primary{
  background:#004d3a;
  color:#fff;
  border-color:#004d3a;
}
.phf-home-action span{
  font-size:15px;
  font-weight:800;
}
.phf-home-action small{
  font-size:12px;
  font-weight:600;
  color:inherit;
  opacity:.72;
  line-height:1.35;
}
.phf-home-video-card{
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(0,77,58,.08);
  padding:18px;
  box-shadow:0 14px 34px rgba(0,77,58,.07);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.phf-video-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.phf-video-head span{
  display:block;
  color:#63ad30;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:5px;
}
.phf-video-head b{
  color:#004d3a;
  font-size:20px;
  line-height:1.2;
}
.phf-video-head small{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  background:#f4faef;
  color:#004d3a;
  font-weight:800;
  border:1px solid rgba(0,77,58,.08);
}
.phf-brand-video-frame{
  width:100%;
  aspect-ratio:16 / 9;
  background:#f7fbf3;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(0,77,58,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.phf-brand-video-frame video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#f7fbf3;
  border:0;
  outline:0;
}
.phf-home-info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:16px;
}
.phf-home-info-grid article{
  background:#fff;
  border:1px solid rgba(0,77,58,.08);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 26px rgba(0,77,58,.05);
}
.phf-home-info-grid b{
  display:block;
  color:#004d3a;
  font-size:16px;
  margin-bottom:8px;
}
.phf-home-info-grid span{
  display:block;
  color:#61736b;
  font-size:13px;
  line-height:1.55;
}
@media (max-width:980px){
  .phf-home-hero-banner{padding:14px;border-radius:22px;}
  .phf-home-main-grid{grid-template-columns:1fr;}
  .phf-home-copy{padding:22px;}
  .phf-home-copy h2{font-size:28px;}
  .phf-home-actions{grid-template-columns:1fr;}
  .phf-home-info-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .phf-feature-intro-login{right:5vw!important;top:5vh!important;min-height:44px!important;padding:0 18px!important;font-size:14px!important;border-radius:12px!important;}
}



/* Stage 3.15.0D - Login button refinement */
.phf-login-gate .phf-login-btn,
.phf-intro-login-btn,
#loginBtn,
button[data-action="login"] {
  border-radius: 12px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  background: #004D3A !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 77, 58, .18) !important;
  box-shadow: 0 12px 26px rgba(0, 77, 58, .16) !important;
  font-family: var(--phf-font-main, Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
}

.phf-login-gate .phf-login-btn:hover,
.phf-intro-login-btn:hover,
#loginBtn:hover,
button[data-action="login"]:hover {
  transform: translateY(-1px);
  background: #063f31 !important;
  box-shadow: 0 16px 30px rgba(0, 77, 58, .20) !important;
}

.phf-login-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: inline-grid;
  place-items: center;
  background: rgba(255,255,255,.14);
  color: #ffffff;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
}

.phf-feature-intro .cta,
.phf-intro-feature .cta,
.phf-traininghub-feature-intro .cta {
  display: none !important;
}


/* Stage 3.15.0F - Wider official layout + balanced home hero */
:root{
  --phf-page-max-width: 1480px;
  --phf-page-side-gap: clamp(18px, 2.4vw, 36px);
}

/* Keep the main web body visually aligned with the header/menu on larger screens.
   Scoped to common app containers only; print/BMTT/evaluation print areas are not targeted. */
.app-shell,
.main-shell,
.page-shell,
.phf-app-shell,
.phf-main-shell,
.phf-page-shell,
.phf-training-shell,
#app,
#appRoot,
#mainApp,
#mainShell,
#mainContent,
#learningApp,
.phf-eval-mode .container,
.phf-module-page-mode .container{
  max-width: var(--phf-page-max-width) !important;
}

.phf-post-login-home{
  width: min(100%, var(--phf-page-max-width));
  margin-inline: auto;
}

/* Hero image: keep the original proportion, avoid stretch/crop distortion. */
.phf-home-hero-banner{
  width: 100%;
  padding: clamp(12px, 1.1vw, 18px) !important;
}

.phf-home-hero-banner img{
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 16 / 9;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 18px;
  background: #f7fbf3;
}

/* Use the extra width more gracefully on the post-login home page. */
.phf-home-main-grid{
  grid-template-columns: minmax(420px, .86fr) minmax(520px, 1.14fr) !important;
  gap: clamp(18px, 1.8vw, 28px) !important;
}

.phf-home-copy{
  min-height: 360px;
}

.phf-home-video-card{
  min-height: 360px;
}

@media (min-width: 1280px){
  .phf-home-copy h2{
    font-size: 38px !important;
  }
  .phf-home-copy p{
    font-size: 16px !important;
  }
  .phf-home-action{
    min-height: 82px !important;
  }
}

@media (max-width: 980px){
  :root{
    --phf-page-side-gap: 14px;
  }
  .phf-home-main-grid{
    grid-template-columns: 1fr !important;
  }
  .phf-home-hero-banner img{
    aspect-ratio: auto;
  }
  .phf-home-copy,
  .phf-home-video-card{
    min-height: 0;
  }
}


/* Stage 3.15.0G - Login intro layout fix
   Fixes: logo/text overlap on 100% zoom and mockup scrollbar/overflow on the pre-login screen. */
.phf-feature-intro-section{
  min-height:100vh !important;
  height:100vh !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-rows:auto 1fr !important;
  padding:clamp(26px, 4vh, 44px) clamp(42px, 5vw, 86px) clamp(30px, 5vh, 54px) !important;
  position:relative !important;
}

.phf-feature-intro-section .brand,
.phf-feature-intro-section .phf-feature-brand,
.phf-feature-intro-section .phf-intro-brand,
.phf-feature-intro-section .brand-row{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  z-index:6 !important;
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
  width:fit-content !important;
  max-width:calc(100% - 190px) !important;
}

.phf-feature-intro-section .brand-logo,
.phf-feature-intro-section .phf-feature-logo{
  width:clamp(220px, 23vw, 315px) !important;
  max-width:315px !important;
  flex:0 0 auto !important;
}

.phf-feature-intro-section .brand-logo img,
.phf-feature-intro-section .phf-feature-logo img{
  display:block !important;
  width:100% !important;
  height:auto !important;
}

.phf-feature-intro-login,
.phf-intro-login-btn{
  position:fixed !important;
  top:clamp(24px, 4.4vh, 42px) !important;
  right:clamp(34px, 4.8vw, 78px) !important;
  z-index:30 !important;
  border-radius:12px !important;
  min-height:46px !important;
  padding:0 18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  background:#004D3A !important;
  color:#fff !important;
  border:1px solid rgba(0,77,58,.18) !important;
  box-shadow:0 12px 26px rgba(0,77,58,.16) !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.phf-feature-intro-layout,
.phf-feature-intro-section .layout,
.phf-feature-intro-section .intro-layout{
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  max-width:1480px !important;
  margin:0 auto !important;
  height:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:minmax(420px, .9fr) minmax(460px, 1.1fr) !important;
  gap:clamp(28px, 5vw, 80px) !important;
  align-items:center !important;
  padding:0 !important;
}

.phf-feature-intro-section .content,
.phf-feature-intro-section .intro-content,
.phf-feature-intro-section .phf-feature-copy{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:auto !important;
  max-width:660px !important;
  min-height:360px !important;
  margin:0 !important;
  align-self:center !important;
}

.phf-feature-intro-section .scene{
  position:absolute !important;
  inset:0 auto auto 0 !important;
  width:100% !important;
  max-width:660px !important;
}

.phf-feature-intro-section h1{
  font-size:clamp(40px, 4.4vw, 58px) !important;
  line-height:1.08 !important;
  max-width:660px !important;
}

.phf-feature-intro-section h2{
  font-size:clamp(34px, 3.6vw, 48px) !important;
  line-height:1.12 !important;
  max-width:650px !important;
}

.phf-feature-intro-section p{
  font-size:clamp(18px, 1.55vw, 23px) !important;
  line-height:1.5 !important;
  max-width:620px !important;
}

/* Mockup: lock height and remove any visible internal scrollbar. */
.phf-feature-intro-section .mockup-shell,
.phf-feature-intro-section .mockup,
.phf-feature-intro-section .mockup-body,
.phf-feature-intro-section .mockup-grid{
  overflow:hidden !important;
  scrollbar-width:none !important;
}

.phf-feature-intro-section .mockup-shell{
  position:relative !important;
  right:auto !important;
  top:auto !important;
  width:100% !important;
  max-width:620px !important;
  max-height:min(66vh, 560px) !important;
  align-self:center !important;
  justify-self:end !important;
  margin:0 !important;
  transform:none !important;
  display:flex !important;
  flex-direction:column !important;
}

.phf-feature-intro-section .mockup{
  flex:1 1 auto !important;
  min-height:0 !important;
}

.phf-feature-intro-section .mockup-body,
.phf-feature-intro-section .mockup-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  padding:18px !important;
}

.phf-feature-intro-section .mock-card{
  min-height:0 !important;
  height:auto !important;
  padding:15px !important;
}

.phf-feature-intro-section .mock-icon{
  width:42px !important;
  height:42px !important;
}

.phf-feature-intro-section .mock-card strong{
  font-size:16px !important;
}

.phf-feature-intro-section .mock-card span{
  font-size:12.5px !important;
  line-height:1.45 !important;
}

.phf-feature-intro-section .mockup-top{
  flex:0 0 auto !important;
  padding:16px 20px !important;
}

.phf-feature-intro-section .mockup-title{
  white-space:nowrap !important;
}

.phf-feature-intro-section .mockup-chip{
  white-space:nowrap !important;
}

.phf-feature-intro-section .progress,
.phf-feature-intro-section .caption{
  display:none !important;
}

@media (max-width:1100px){
  .phf-feature-intro-section{
    padding:24px 28px 34px !important;
  }
  .phf-feature-intro-section .brand,
  .phf-feature-intro-section .phf-feature-brand,
  .phf-feature-intro-section .phf-intro-brand,
  .phf-feature-intro-section .brand-row{
    max-width:calc(100% - 160px) !important;
  }
  .phf-feature-intro-section .brand-logo,
  .phf-feature-intro-section .phf-feature-logo{
    width:210px !important;
  }
  .phf-feature-intro-layout,
  .phf-feature-intro-section .layout,
  .phf-feature-intro-section .intro-layout{
    grid-template-columns:1fr 1fr !important;
    gap:28px !important;
  }
  .phf-feature-intro-section .mockup-shell{
    max-height:60vh !important;
  }
}

@media (max-width:820px){
  .phf-feature-intro-section{
    height:auto !important;
    min-height:100vh !important;
    overflow:auto !important;
    display:block !important;
    padding:22px 18px 30px !important;
  }
  .phf-feature-intro-section .brand,
  .phf-feature-intro-section .phf-feature-brand,
  .phf-feature-intro-section .phf-intro-brand,
  .phf-feature-intro-section .brand-row{
    max-width:calc(100% - 126px) !important;
  }
  .phf-feature-intro-section .brand-logo,
  .phf-feature-intro-section .phf-feature-logo{
    width:170px !important;
  }
  .phf-feature-intro-login,
  .phf-intro-login-btn{
    top:20px !important;
    right:18px !important;
    min-height:42px !important;
    padding:0 14px !important;
    font-size:14px !important;
  }
  .phf-feature-intro-layout,
  .phf-feature-intro-section .layout,
  .phf-feature-intro-section .intro-layout{
    display:block !important;
    height:auto !important;
    margin-top:54px !important;
  }
  .phf-feature-intro-section .content,
  .phf-feature-intro-section .intro-content,
  .phf-feature-intro-section .phf-feature-copy{
    min-height:320px !important;
    max-width:100% !important;
  }
  .phf-feature-intro-section .mockup-shell{
    max-width:100% !important;
    max-height:none !important;
    margin-top:24px !important;
    opacity:.55 !important;
  }
}


/* Stage 3.15.0H - Login intro responsive rebuild
   Rebuild pre-login intro as a normal web layout: no overlap at 100% zoom, no internal mockup scrollbar. */
body.phf-intro-login-mode,
body:not(.phf-logged-in) {
  overflow-x: hidden;
}

/* Main pre-login section: allow natural height and page scroll. */
.phf-feature-intro-section {
  min-height: 100svh !important;
  height: auto !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: clamp(26px, 4vh, 48px) !important;
  padding: clamp(24px, 4vh, 42px) clamp(28px, 5vw, 84px) clamp(34px, 5vh, 58px) !important;
  position: relative !important;
}

/* Top header area. Logo/title are no longer absolute; they stay in the page flow. */
.phf-feature-intro-section .brand,
.phf-feature-intro-section .phf-feature-brand,
.phf-feature-intro-section .phf-intro-brand,
.phf-feature-intro-section .brand-row {
  position: relative !important;
  inset: auto !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(14px, 1.8vw, 24px) !important;
  width: fit-content !important;
  max-width: calc(100% - 170px) !important;
  margin: 0 !important;
}

.phf-feature-intro-section .brand-logo,
.phf-feature-intro-section .phf-feature-logo {
  width: clamp(190px, 20vw, 300px) !important;
  max-width: 300px !important;
  flex: 0 0 auto !important;
}

.phf-feature-intro-section .brand-logo img,
.phf-feature-intro-section .phf-feature-logo img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Login button belongs to the header area visually, but remains fixed for easy access. */
.phf-feature-intro-login,
.phf-intro-login-btn {
  position: fixed !important;
  top: clamp(22px, 4vh, 38px) !important;
  right: clamp(26px, 4.5vw, 74px) !important;
  z-index: 30 !important;
  border-radius: 12px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  background: #004D3A !important;
  color: #ffffff !important;
  border: 1px solid rgba(0,77,58,.18) !important;
  box-shadow: 0 12px 26px rgba(0,77,58,.16) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Content layout: normal grid, no absolute positioning for the main columns. */
.phf-feature-intro-layout,
.phf-feature-intro-section .layout,
.phf-feature-intro-section .intro-layout {
  position: relative !important;
  z-index: 2 !important;
  width: min(100%, 1480px) !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(360px, .92fr) minmax(440px, 1.08fr) !important;
  gap: clamp(30px, 5vw, 82px) !important;
  align-items: center !important;
}

/* Left copy: lock a safe scene area without overlapping logo/header. */
.phf-feature-intro-section .content,
.phf-feature-intro-section .intro-content,
.phf-feature-intro-section .phf-feature-copy {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  max-width: 660px !important;
  min-height: clamp(300px, 38vh, 420px) !important;
  margin: 0 !important;
  align-self: center !important;
}

.phf-feature-intro-section .scene {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  max-width: 660px !important;
}

.phf-feature-intro-section h1 {
  font-size: clamp(38px, 4vw, 56px) !important;
  line-height: 1.08 !important;
  max-width: 660px !important;
  margin: 0 !important;
}

.phf-feature-intro-section h2 {
  font-size: clamp(32px, 3.35vw, 46px) !important;
  line-height: 1.13 !important;
  max-width: 650px !important;
  margin: 0 !important;
}

.phf-feature-intro-section p {
  font-size: clamp(18px, 1.45vw, 22px) !important;
  line-height: 1.52 !important;
  max-width: 620px !important;
}

/* Right mockup: no internal scrollbar; height is controlled by content and viewport. */
.phf-feature-intro-section .mockup-shell {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 620px !important;
  max-height: none !important;
  height: auto !important;
  align-self: center !important;
  justify-self: end !important;
  margin: 0 !important;
  transform: none !important;
  display: block !important;
  overflow: visible !important;
}

.phf-feature-intro-section .mockup,
.phf-feature-intro-section .mockup-body,
.phf-feature-intro-section .mockup-grid {
  overflow: hidden !important;
  scrollbar-width: none !important;
}

.phf-feature-intro-section .mockup::-webkit-scrollbar,
.phf-feature-intro-section .mockup-body::-webkit-scrollbar,
.phf-feature-intro-section .mockup-grid::-webkit-scrollbar {
  display: none !important;
}

.phf-feature-intro-section .mockup {
  height: auto !important;
  max-height: none !important;
}

.phf-feature-intro-section .mockup-top {
  flex: 0 0 auto !important;
  padding: clamp(14px, 1.6vw, 18px) clamp(16px, 2vw, 22px) !important;
}

.phf-feature-intro-section .mockup-body,
.phf-feature-intro-section .mockup-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.2vw, 14px) !important;
  padding: clamp(14px, 1.6vw, 20px) !important;
}

.phf-feature-intro-section .mock-card {
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(13px, 1.3vw, 16px) !important;
}

.phf-feature-intro-section .mock-card-top {
  margin-bottom: 12px !important;
}

.phf-feature-intro-section .mock-icon {
  width: clamp(38px, 3.2vw, 44px) !important;
  height: clamp(38px, 3.2vw, 44px) !important;
}

.phf-feature-intro-section .mock-card strong {
  font-size: clamp(15px, 1.25vw, 17px) !important;
}

.phf-feature-intro-section .mock-card span {
  font-size: clamp(12px, .95vw, 13px) !important;
  line-height: 1.45 !important;
}

.phf-feature-intro-section .progress,
.phf-feature-intro-section .caption {
  display: none !important;
}

/* Low-height desktop / 100% zoom: make everything compact but still in normal flow. */
@media (max-height: 760px) and (min-width: 821px) {
  .phf-feature-intro-section {
    min-height: 100vh !important;
    padding-top: 22px !important;
    padding-bottom: 28px !important;
    gap: 24px !important;
  }
  .phf-feature-intro-section .brand-logo,
  .phf-feature-intro-section .phf-feature-logo {
    width: clamp(170px, 17vw, 250px) !important;
  }
  .phf-feature-intro-section .brand-text strong {
    font-size: clamp(18px, 1.8vw, 23px) !important;
  }
  .phf-feature-intro-section .brand-text span {
    font-size: 13px !important;
  }
  .phf-feature-intro-layout,
  .phf-feature-intro-section .layout,
  .phf-feature-intro-section .intro-layout {
    align-items: start !important;
  }
  .phf-feature-intro-section .content,
  .phf-feature-intro-section .intro-content,
  .phf-feature-intro-section .phf-feature-copy {
    min-height: 300px !important;
  }
  .phf-feature-intro-section h1 {
    font-size: clamp(34px, 3.5vw, 48px) !important;
  }
  .phf-feature-intro-section h2 {
    font-size: clamp(30px, 3vw, 40px) !important;
  }
  .phf-feature-intro-section p {
    font-size: clamp(16px, 1.35vw, 20px) !important;
  }
  .phf-feature-intro-section .mockup-shell {
    max-width: 560px !important;
  }
}

/* Tablet/mobile: stack naturally and allow page scroll. */
@media (max-width: 900px) {
  .phf-feature-intro-section {
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    padding: 22px 18px 34px !important;
  }

  .phf-feature-intro-section .brand,
  .phf-feature-intro-section .phf-feature-brand,
  .phf-feature-intro-section .phf-intro-brand,
  .phf-feature-intro-section .brand-row {
    max-width: calc(100% - 118px) !important;
  }

  .phf-feature-intro-section .brand-logo,
  .phf-feature-intro-section .phf-feature-logo {
    width: clamp(150px, 45vw, 190px) !important;
  }

  .phf-feature-intro-login,
  .phf-intro-login-btn {
    top: 18px !important;
    right: 18px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }

  .phf-feature-intro-layout,
  .phf-feature-intro-section .layout,
  .phf-feature-intro-section .intro-layout {
    display: block !important;
    width: 100% !important;
    margin-top: 46px !important;
  }

  .phf-feature-intro-section .content,
  .phf-feature-intro-section .intro-content,
  .phf-feature-intro-section .phf-feature-copy {
    min-height: 320px !important;
    max-width: 100% !important;
  }

  .phf-feature-intro-section .mockup-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px !important;
    justify-self: stretch !important;
  }
}


/* PHF 16.0F - Clean horizontal role menu only
   Phạm vi: header/menu theo quyền. Không đụng phiếu đánh giá, in, BMTT, Supabase. */
.topbar.phf-site-header{
  border-radius:18px!important;
  padding:12px 16px!important;
  gap:18px!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
}
.topbar.phf-site-header .brand{
  flex:0 1 360px!important;
  min-width:230px!important;
  gap:10px!important;
  overflow:hidden!important;
}
.topbar.phf-site-header .brand .logo,
.topbar.phf-site-header .brand .logo img{
  max-width:184px!important;
  height:auto!important;
  object-fit:contain!important;
}
.topbar.phf-site-header .brand h1{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  font-size:16px!important;
  line-height:1.15!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
  color:#063c2e!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.topbar.phf-site-header .brand p{
  font-size:11.5px!important;
  line-height:1.25!important;
  font-weight:500!important;
  color:#60756d!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.phf-main-nav{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  flex:1 1 auto!important;
  min-width:0!important;
}
.phf-main-nav button{
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  appearance:none!important;
  border:0!important;
  background:transparent!important;
  color:#173b30!important;
  border-radius:10px!important;
  padding:10px 14px!important;
  min-height:40px!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}
.phf-main-nav button:hover{background:#eef7f2!important;color:#063c2e!important}
.phf-main-nav button.active{
  background:#064b39!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(6,75,57,.14)!important;
}
.phf-login-entry{
  flex:0 0 auto!important;
  min-width:150px!important;
  max-width:210px!important;
  border-radius:10px!important;
  padding:8px 12px!important;
  font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif!important;
  text-align:left!important;
}
.phf-login-entry span{
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.phf-login-entry small{font-size:11.5px!important;line-height:1.25!important;font-weight:500!important}
@media(max-width:1040px){
  .topbar.phf-site-header{flex-wrap:wrap!important}
  .topbar.phf-site-header .brand{flex:1 1 100%!important;max-width:none!important}
  .phf-main-nav{order:3;flex:1 1 100%!important;justify-content:flex-start!important;overflow-x:auto!important;padding-bottom:2px!important}
  .phf-login-entry{margin-left:auto!important}
}
@media(max-width:760px){
  .topbar.phf-site-header{display:flex!important;align-items:flex-start!important;flex-direction:column!important}
  .topbar.phf-site-header .brand{min-width:0!important;width:100%!important}
  .phf-main-nav{width:100%!important;display:flex!important;flex-wrap:wrap!important;overflow:visible!important}
  .phf-main-nav button{font-size:14px!important;padding:9px 11px!important}
  .phf-login-entry{width:100%!important;max-width:none!important;margin-left:0!important}
}

/* PHF 16.0H - login test users overlay only */
.phf-test-login-overlay{position:fixed;inset:0;z-index:99999;background:rgba(6,38,28,.38);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;}
.phf-test-login-card{width:min(860px,100%);background:#fff;border:1px solid rgba(4,77,57,.16);border-radius:22px;box-shadow:0 28px 80px rgba(0,0,0,.22);padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.phf-test-login-head{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:flex-start;gap:18px;border-bottom:1px solid #e3eee9;padding-bottom:16px;}
.phf-test-login-brand{display:flex;align-items:center;gap:14px;min-width:0;}
.phf-test-login-brand img{width:150px;max-height:48px;object-fit:contain;}
.phf-test-login-brand h2{margin:0;color:#053f31;font-size:22px;line-height:1.15;font-weight:800;}
.phf-test-login-brand p{margin:5px 0 0;color:#61746d;font-size:14px;}
.phf-test-login-close{border:0;background:#f1f6f3;color:#063f31;border-radius:10px;width:38px;height:38px;font-size:24px;font-weight:700;cursor:pointer;}
.phf-test-login-form{display:grid;gap:12px;align-content:start;}
.phf-test-login-form label{display:grid;gap:6px;color:#23483d;font-weight:700;font-size:14px;}
.phf-test-login-form input{height:46px;border:1px solid #d6e3dd;border-radius:12px;padding:0 14px;font-size:15px;font-family:inherit;outline:none;}
.phf-test-login-form input:focus{border-color:#0a563f;box-shadow:0 0 0 3px rgba(10,86,63,.1);}
.phf-test-login-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px;}
.phf-test-login-actions button,.phf-test-account-card{font-family:inherit;}
.phf-test-login-actions button{height:44px;border-radius:11px;border:1px solid #d6e3dd;background:#fff;color:#063f31;font-weight:800;padding:0 16px;cursor:pointer;}
.phf-test-login-actions .primary{background:#064b39;color:#fff;border-color:#064b39;}
.phf-test-login-error{min-height:18px;color:#b3261e;font-weight:700;font-size:13px;}
.phf-test-account-list{display:grid;gap:10px;}
.phf-test-account-title{font-size:14px;font-weight:800;color:#063f31;margin-bottom:2px;}
.phf-test-account-card{text-align:left;border:1px solid #dce8e3;background:#f9fcfa;border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:3px 12px;cursor:pointer;color:#173c32;}
.phf-test-account-card b{font-size:15px;}
.phf-test-account-card span{font-size:13px;font-weight:800;color:#064b39;align-self:center;}
.phf-test-account-card small{grid-column:1 / -1;color:#657a72;font-size:12px;}
.phf-login-entry.is-authenticated{min-width:160px;text-align:left;}
.phf-login-entry.is-authenticated span{display:block;font-weight:800;color:#053f31;}
.phf-login-entry.is-authenticated small{display:block;color:#6b7d76;font-size:12px;}
@media (max-width:760px){.phf-test-login-card{grid-template-columns:1fr;padding:18px;border-radius:18px}.phf-test-login-brand{align-items:flex-start;flex-direction:column}.phf-test-login-brand img{width:138px}.phf-test-login-head{align-items:flex-start}.phf-test-login-brand h2{font-size:20px}}


/* Stage 3.16.0 - Quản trị tài khoản & nhóm */
.phf-acct-admin-v2{max-width:1480px!important}.phf-acct-tabs{display:flex;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid #dfeee7;border-radius:16px;padding:8px;box-shadow:0 8px 20px rgba(0,45,30,.04)}
.phf-acct-tabs button{border:1px solid transparent;background:transparent;color:#38574b;border-radius:11px;min-height:38px;padding:0 14px;font-weight:650;cursor:pointer;font-family:inherit}.phf-acct-tabs button.active{background:#07543e;color:#fff;border-color:#07543e}.phf-acct-tabs button:hover:not(.active){background:#f4faf7;color:#07543e}
.phf-acct-safe-grid-wide{grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr)!important}.phf-acct-account-table{min-width:1120px!important}.phf-acct-checkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:220px;overflow:auto;padding:8px;border:1px solid #d6e9e1;border-radius:14px;background:#fbfdfc}.phf-acct-check{display:flex;gap:8px;align-items:flex-start;padding:8px;border:1px solid #e8f2ed;border-radius:12px;background:#fff;font-size:13px;color:#17382d}.phf-acct-check input{width:auto!important;min-height:auto!important;margin-top:2px}.phf-acct-check span{display:grid;gap:1px}.phf-acct-check small{display:block;color:#7a8d85;font-size:11px;font-weight:500}.phf-bulk-text{min-height:220px!important;font-family:Consolas,Monaco,monospace!important;font-size:12.5px!important;line-height:1.45!important}.phf-bulk-stat{display:inline-flex;align-items:center;color:#526960;font-size:13px;font-weight:650}.phf-acct-safe-actions a.phf-acct-safe-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.phf-acct-safe .phf-chip.done{background:#e7f5ee!important;color:#07543e!important;border-color:#cde7dc!important}.phf-acct-safe .phf-chip.muted{background:#f6f8f7!important;color:#60756c!important;border-color:#e4ece8!important}
@media(max-width:1080px){.phf-acct-safe-grid-wide{grid-template-columns:1fr!important}.phf-acct-checkgrid{grid-template-columns:1fr}}
@media(max-width:680px){.phf-acct-tabs{overflow:auto;flex-wrap:nowrap}.phf-acct-tabs button{white-space:nowrap}.phf-acct-checkgrid{max-height:none}.phf-bulk-text{min-height:180px!important}}


/* Stage 3.16.1 - Account admin catalog cleanup */
.phf-catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.phf-acct-admin-v2 .phf-acct-account-table{min-width:1260px!important}.phf-acct-admin-v2 .phf-acct-safe-table th,.phf-acct-admin-v2 .phf-acct-safe-table td{white-space:normal}.phf-acct-admin-v2 .phf-cat-form{background:#f8fcfa;border:1px solid #e2f0e9;border-radius:16px;padding:14px}.phf-acct-admin-v2 .phf-acct-safe-field select{cursor:pointer}.phf-acct-admin-v2 .phf-acct-safe-note{font-size:13.5px}.phf-acct-admin-v2 .phf-acct-tabs{display:flex;gap:8px;flex-wrap:wrap;background:#f7fbf9;border:1px solid #e0eee7;border-radius:16px;padding:8px}.phf-acct-admin-v2 .phf-acct-tabs button{border:1px solid transparent;background:transparent;color:#526960;border-radius:12px;min-height:38px;padding:0 13px;font-weight:650;cursor:pointer}.phf-acct-admin-v2 .phf-acct-tabs button.active{background:#07543e;color:#fff;border-color:#07543e;box-shadow:0 8px 18px rgba(7,84,62,.12)}
@media(max-width:1180px){.phf-catalog-grid{grid-template-columns:1fr}.phf-acct-admin-v2 .phf-acct-account-table{min-width:1080px!important}}

/* PHF BMTT official signing flow */
.phf-bmtt-signing-area{margin-top:22px;display:grid;gap:14px}
.phf-bmtt-preparer-card,.phf-bmtt-signed-receipt{border:1px solid #cfe4d8;background:#fbfefc;border-radius:16px;padding:16px;box-shadow:0 8px 18px rgba(7,59,45,.04)}
.phf-bmtt-preparer-grid,.phf-bmtt-receipt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.phf-bmtt-preparer-grid>div,.phf-bmtt-receipt-grid>div{display:grid;gap:5px;padding:12px;border:1px solid #e1ede7;border-radius:12px;background:#fff}
.phf-bmtt-preparer-grid span,.phf-bmtt-receipt-grid span,.phf-bmtt-receipt-head span{font-size:12px;font-weight:700;color:#657b72}
.phf-bmtt-preparer-grid b,.phf-bmtt-receipt-grid b{font-size:14px;color:#123b2f;overflow-wrap:anywhere}
.phf-bmtt-final-check{display:flex!important;align-items:flex-start!important;gap:10px!important;padding:14px!important;border:1px solid #b8d8c9!important;border-radius:14px!important;background:#f7fcf9!important;font-weight:800!important;color:#153d31!important}
.phf-bmtt-final-check input{margin-top:3px;accent-color:#0b6b48;transform:scale(1.15)}
.phf-bmtt-confirm #phfBmtSignButton{display:block;margin-top:12px;min-width:180px}
.phf-bmtt-confirm #phfBmtSignButton:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.phf-bmtt-signed-receipt{margin-top:22px}
.phf-bmtt-signed-receipt.complete{border-color:#9dcdb7;background:#f4fbf7}
.phf-bmtt-signed-receipt.legacy{border-color:#e6bd72;background:#fffaf0}
.phf-bmtt-receipt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #dfece5}
.phf-bmtt-receipt-head b{color:#086b49;font-size:16px}
.phf-bmtt-signed-receipt.legacy .phf-bmtt-receipt-head b{color:#9a6700}
.phf-bmtt-receipt-grid .wide{grid-column:1/-1}
.phf-bmtt-electronic-note{margin:14px 0 0;padding:12px 14px;border-left:4px solid #0b6b48;background:#fff;border-radius:10px;color:#365e50;font-weight:700}
@media(max-width:720px){.phf-bmtt-preparer-grid,.phf-bmtt-receipt-grid{grid-template-columns:1fr}.phf-bmtt-receipt-grid .wide{grid-column:auto}.phf-bmtt-receipt-head{align-items:flex-start;flex-direction:column}}

/* PHF 27.6.9 - Biên bản BMTT đã ký */
.phf-bmtt-paper-signed input:not([type="hidden"]){pointer-events:none;background:transparent!important;color:#18372d!important;opacity:1}
.phf-bmtt-full-record{margin:24px 0 18px;padding:20px}
.phf-bmtt-record-banner{display:flex;gap:18px;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #d8e8df;padding-bottom:16px;margin-bottom:16px}
.phf-bmtt-record-banner span{font-size:12px;letter-spacing:.08em;font-weight:800;color:#527166}
.phf-bmtt-record-banner h3{margin:4px 0!important;font-size:20px!important;text-transform:none!important}
.phf-bmtt-record-banner p{margin:0;color:#50675f}
.phf-bmtt-signed-chip{white-space:nowrap;border:1px solid #84bea2;background:#eaf7ef;color:#17623f;border-radius:999px;padding:7px 11px;font-size:13px}
.phf-bmtt-electronic-seal{margin-top:16px;border:1px dashed #8ebaa3;border-radius:12px;padding:14px;background:#fff}
.phf-bmtt-electronic-seal>b{display:block;color:#17623f;margin-bottom:4px}
.phf-bmtt-electronic-seal p{margin:0;color:#4f665d}
@media(max-width:700px){.phf-bmtt-record-banner{display:block}.phf-bmtt-signed-chip{display:inline-block;margin-top:10px}}

/* PHF 27.6.11 - Thư viện mẫu đánh giá */
.phf-forms-library{max-width:1180px;margin:0 auto;padding:4px 0 28px}.phf-forms-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 14px;padding:13px 16px;border:1px solid #dfe8e2;border-radius:12px;background:#fff}.phf-forms-toolbar>div{display:flex;flex-direction:column;gap:3px}.phf-forms-toolbar span{font-size:13px;color:#637068}.phf-forms-toolbar button,.phf-form-actions button{border:1px solid #cfdcd4;background:#fff;color:#244c39;border-radius:9px;padding:9px 13px;font:inherit;font-weight:700;cursor:pointer}.phf-forms-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.phf-form-card{display:flex;flex-direction:column;min-height:310px;padding:18px;border:1px solid #dce6df;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(25,67,45,.05)}.phf-form-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.phf-form-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#edf5f0;font-size:21px}.phf-form-status{padding:5px 9px;border-radius:999px;background:#eaf6ef;color:#21633f;font-size:12px;font-weight:800}.phf-form-card h3{margin:16px 0 8px;font-size:18px;color:#183d2b}.phf-form-card p{margin:0;color:#667169;line-height:1.55}.phf-form-card dl{margin:18px 0 16px;border-top:1px solid #edf1ee}.phf-form-card dl div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #edf1ee}.phf-form-card dt{color:#6b756f}.phf-form-card dd{margin:0;font-weight:800;color:#263c31}.phf-form-actions{display:flex;gap:9px;margin-top:auto}.phf-form-actions button{flex:1}.phf-form-actions button.primary{background:#245f40;border-color:#245f40;color:#fff}@media(max-width:980px){.phf-forms-grid{grid-template-columns:1fr 1fr}}@media(max-width:680px){.phf-forms-grid{grid-template-columns:1fr}.phf-forms-toolbar{align-items:flex-start;flex-direction:column}.phf-forms-toolbar button{width:100%}.phf-form-card{min-height:0}}


/* PHF 1.0.11 - Google Login & auth feedback */
.phf-login-divider{display:flex;align-items:center;gap:12px;margin:4px 0;color:#788b83;font-size:12px;font-weight:600;text-transform:none;letter-spacing:.01em}
.phf-login-divider::before,.phf-login-divider::after{content:"";height:1px;background:#dfeae5;flex:1}
.phf-google-login-wrap{display:grid;gap:10px;padding:14px;border:1px solid #ddebe5;border-radius:15px;background:linear-gradient(180deg,#fbfdfc 0%,#f7fbf9 100%)}
.phf-google-login-heading{display:grid;gap:3px;text-align:left}
.phf-google-login-heading b{color:#24483d;font-size:13.5px;font-weight:700}
.phf-google-login-heading span{color:#71847c;font-size:12px;line-height:1.45}
.phf-google-login-button{min-height:44px;width:100%;display:flex;align-items:center;justify-content:center;border-radius:10px;overflow:hidden;background:#fff;transition:opacity .18s ease,transform .18s ease}
.phf-google-login-button>div{width:100%!important;max-width:none!important}
.phf-google-login-button iframe{max-width:100%!important}
.phf-google-login-button:not(.is-ready){border:1px solid #d9e5df;background:linear-gradient(90deg,#f8fbf9,#fff,#f8fbf9);background-size:200% 100%;animation:phfGooglePrepare 1.2s linear infinite}
.phf-google-login-button.is-processing{opacity:.58;pointer-events:none}
.phf-google-login-status{min-height:18px;color:#61766d;font-size:12.5px;line-height:1.4;text-align:center}
@keyframes phfGooglePrepare{to{background-position:-200% 0}}
.phf-google-auth-notice{position:fixed;inset:0;z-index:100300;background:rgba(9,31,23,.34);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px;font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif}
.phf-google-auth-notice-card{width:min(460px,100%);display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:13px;align-items:start;background:#fff;border:1px solid #dce9e3;border-radius:18px;padding:18px 18px 17px;box-shadow:0 26px 72px rgba(0,38,27,.22)}
.phf-google-auth-notice-icon{width:46px;height:46px;border-radius:14px;background:#f4f7f6;border:1px solid #e1e9e5;display:flex;align-items:center;justify-content:center}
.phf-google-auth-g{font-size:22px;font-weight:800;color:#4285f4;font-family:Arial,sans-serif}
.phf-google-auth-notice-copy h3{margin:1px 0 5px;color:#17382d;font-size:18px;font-weight:700}
.phf-google-auth-notice-copy p{margin:0;color:#60756c;font-size:13.5px;line-height:1.55}
.phf-google-auth-notice-close{width:34px;height:34px;border:0;border-radius:10px;background:#f0f5f2;color:#315448;font-size:22px;line-height:1;cursor:pointer}
.phf-google-auth-notice-card.loading .phf-google-auth-notice-icon{position:relative}
.phf-google-auth-notice-card.loading .phf-google-auth-notice-icon::after{content:"";position:absolute;inset:-4px;border:2px solid rgba(66,133,244,.17);border-top-color:#4285f4;border-radius:50%;animation:phfGoogleSpin .9s linear infinite}
.phf-google-auth-notice-card.success .phf-google-auth-notice-icon{background:#eef9f3;border-color:#cfe9dc}
.phf-google-auth-notice-card.success .phf-google-auth-g{color:#0a684d}
.phf-google-auth-notice-card.error .phf-google-auth-notice-icon{background:#fff2ee;border-color:#f1d4ca}
.phf-google-auth-notice-card.error .phf-google-auth-g{color:#a63c20}
.phf-google-auth-notice-card.warning .phf-google-auth-notice-icon{background:#fff8e9;border-color:#f0dfb9}
.phf-google-auth-notice-card.warning .phf-google-auth-g{color:#916100}
@keyframes phfGoogleSpin{to{transform:rotate(360deg)}}
@media(max-width:620px){.phf-google-login-wrap{padding:12px}.phf-google-auth-notice-card{grid-template-columns:44px minmax(0,1fr) auto;padding:16px}.phf-google-auth-notice-icon{width:42px;height:42px}}

/* PHF 1.0.12 - bulk account actions */
.phf-acct-select-cell{width:42px;min-width:42px;text-align:center!important}.phf-acct-select-cell input{width:17px;height:17px;accent-color:#07543e;cursor:pointer}.phf-acct-select-cell input:disabled{cursor:not-allowed;opacity:.45}.phf-acct-bulkbar{display:none;align-items:center;justify-content:space-between;gap:14px;margin:12px 0 14px;padding:12px 14px;border:1px solid #d9e9e2;border-radius:14px;background:#f7fbf9}.phf-acct-bulkbar.active{display:flex}.phf-acct-bulkbar b{display:block;color:#17382d;font-size:14px}.phf-acct-bulkbar small{display:block;margin-top:4px;color:#667a71;line-height:1.4}.phf-acct-bulk-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.phf-acct-safe-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}@media(max-width:760px){.phf-acct-bulkbar{align-items:stretch;flex-direction:column}.phf-acct-bulk-actions{justify-content:stretch}.phf-acct-bulk-actions .phf-acct-safe-btn{flex:1}}

/* 62.8.24 - PHF Training Hub mobile shell: single drawer + account card */
@media (max-width:760px){
  body.phf-main-shell-mode:not(.phf-intro-active) > .app{padding:0!important;background:#f5f8f6!important;}
  body.phf-main-shell-mode > .app > .topbar.phf-site-header{
    position:sticky!important;top:0!important;z-index:1300!important;margin:0!important;
    min-height:64px!important;padding:8px 10px!important;border-radius:0!important;
    display:grid!important;grid-template-columns:44px minmax(0,1fr) auto auto auto!important;
    gap:7px!important;align-items:center!important;background:#fff!important;
    border-bottom:1px solid #dce9e2!important;box-shadow:0 4px 16px rgba(9,49,37,.07)!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-mobile-menu-toggle{
    grid-column:1!important;grid-row:1!important;width:42px!important;height:42px!important;min-height:42px!important;
    padding:0!important;border-radius:12px!important;font-size:0!important;z-index:2!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-mobile-menu-toggle:before{content:'☰';font-size:22px;line-height:1;}
  body.phf-main-shell-mode .topbar.phf-site-header.phf-mobile-open .phf-mobile-menu-toggle:before{content:'×';font-size:29px;font-weight:500;}
  body.phf-main-shell-mode .topbar.phf-site-header .brand{
    grid-column:2!important;grid-row:1!important;width:auto!important;min-width:0!important;max-width:100%!important;
    padding:0!important;gap:7px!important;overflow:hidden!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .brand .logo{width:82px!important;height:34px!important;flex:0 0 82px!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .brand h1{font-size:14px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .brand p{display:none!important;}
  body.phf-main-shell-mode .topbar.phf-site-header #phfClassroomHeaderIcon,
  body.phf-main-shell-mode .topbar.phf-site-header .phf-classroom-header-icon{grid-row:1!important;width:40px!important;height:40px!important;margin:0!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .phf-notification-wrap{grid-row:1!important;margin:0!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .phf-notification-btn{width:40px!important;height:40px!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry{
    display:flex!important;grid-row:1!important;margin:0!important;width:42px!important;height:42px!important;min-width:42px!important;
    padding:0!important;border:1px solid #d5e6dd!important;border-radius:12px!important;background:#fff!important;
    align-items:center!important;justify-content:center!important;overflow:hidden!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry > span{font-size:0!important;display:block!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry > span:before{content:'👤';font-size:20px!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry small{display:none!important;}

  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav{
    display:block!important;position:fixed!important;left:0!important;top:0!important;bottom:0!important;
    width:min(84vw,330px)!important;max-width:330px!important;padding:82px 14px 22px!important;margin:0!important;
    background:#f5fbf7!important;border-right:1px solid #cfe3d8!important;box-shadow:16px 0 38px rgba(7,55,40,.18)!important;
    overflow-y:auto!important;overflow-x:hidden!important;transform:translateX(-105%)!important;
    transition:transform .24s ease!important;z-index:1290!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header.phf-mobile-open .phf-main-nav{transform:translateX(0)!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav:before{
    content:'PHF Training Hub';display:block;margin:0 4px 14px;padding:0 0 12px;border-bottom:1px solid #cfe3d8;
    color:#064d39;font-size:18px;font-weight:800;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav button[data-phf-main-nav]{
    display:flex!important;width:100%!important;min-height:44px!important;height:auto!important;margin:3px 0!important;
    padding:10px 13px!important;border:1px solid transparent!important;border-radius:12px!important;
    justify-content:flex-start!important;text-align:left!important;background:transparent!important;font-size:14px!important;font-weight:600!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav button[data-phf-main-nav].active{
    background:#dff1e6!important;border-color:#a9d0bb!important;color:#064f3b!important;box-shadow:inset 3px 0 0 #38a95b!important;
  }
  .phf-hub-mobile-backdrop{position:fixed;inset:0;background:rgba(8,34,26,.38);z-index:1280;opacity:0;pointer-events:none;transition:opacity .2s ease;}
  .phf-hub-mobile-backdrop.is-open{opacity:1;pointer-events:auto;}
  body.phf-hub-mobile-menu-open{overflow:hidden!important;}
  .phf-account-menu{z-index:1500!important;}
  .phf-user-greeting-row{display:none!important;}
}

/* 62.9 - PHF Training Hub mobile shell rebuilt safely from checkpoint 62.8.23.
   Mobile only. Desktop, router, session and learning renderers are unchanged. */
@media (max-width:600px), (max-width:820px) and (hover:none) and (pointer:coarse){
  body.phf-main-shell-mode:not(.phf-intro-active) > .app{
    padding:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    background:#f5f8f6!important;
  }

  body.phf-main-shell-mode > .app > .topbar.phf-site-header{
    position:sticky!important;
    top:0!important;
    z-index:1300!important;
    width:100%!important;
    min-height:62px!important;
    height:62px!important;
    margin:0!important;
    padding:8px 10px!important;
    border-radius:0!important;
    border:0!important;
    border-bottom:1px solid #dce9e2!important;
    background:#fff!important;
    box-shadow:0 4px 14px rgba(9,49,37,.07)!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:7px!important;
    overflow:visible!important;
  }

  body.phf-main-shell-mode .topbar.phf-site-header .phf-mobile-menu-toggle{
    display:inline-flex!important;
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid #cbded4!important;
    border-radius:11px!important;
    background:#fff!important;
    color:#064b38!important;
    font-size:0!important;
    line-height:1!important;
    order:1!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-mobile-menu-toggle::before{
    content:'☰';
    font-size:21px!important;
    font-weight:700!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header.phf-mobile-open .phf-mobile-menu-toggle::before{
    content:'×';
    font-size:27px!important;
    font-weight:500!important;
  }

  body.phf-main-shell-mode .topbar.phf-site-header .brand{
    display:flex!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
    margin:0!important;
    padding:0!important;
    align-items:center!important;
    gap:7px!important;
    overflow:hidden!important;
    order:2!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .brand .logo{
    flex:0 0 78px!important;
    width:78px!important;
    max-width:78px!important;
    height:32px!important;
    margin:0!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .brand .logo img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .brand > div:last-child{
    min-width:0!important;
    overflow:hidden!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .brand h1{
    margin:0!important;
    font-size:13.5px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .brand p{display:none!important;}

  body.phf-main-shell-mode .topbar.phf-site-header #phfClassroomHeaderIcon,
  body.phf-main-shell-mode .topbar.phf-site-header .phf-classroom-header-icon,
  body.phf-main-shell-mode .topbar.phf-site-header .phf-notification-wrap,
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry{
    flex:0 0 40px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    margin:0!important;
    order:3!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-notification-wrap{order:4!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry{
    display:flex!important;
    order:5!important;
    padding:0!important;
    border:1px solid #d4e5dc!important;
    border-radius:11px!important;
    background:#fff!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    color:#064b38!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry > span,
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry > small{display:none!important;}
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry::before{
    content:'👤';
    font-size:19px!important;
    line-height:1!important;
  }

  /* A true off-canvas drawer. The original horizontal nav is reused, not duplicated. */
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav{
    display:block!important;
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    z-index:1295!important;
    width:min(84vw,326px)!important;
    max-width:326px!important;
    min-width:260px!important;
    height:100dvh!important;
    margin:0!important;
    padding:76px 14px 24px!important;
    border:0!important;
    border-right:1px solid #cfe1d7!important;
    background:#f5fbf7!important;
    box-shadow:16px 0 38px rgba(7,55,40,.18)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    transform:translate3d(-105%,0,0)!important;
    transition:transform .22s ease!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header.phf-mobile-open .phf-main-nav{
    transform:translate3d(0,0,0)!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav::before{
    content:'PHF Training Hub';
    display:block!important;
    margin:0 4px 12px!important;
    padding:0 0 12px!important;
    border-bottom:1px solid #cfe1d7!important;
    color:#064b38!important;
    font-size:18px!important;
    font-weight:800!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav button[data-phf-main-nav]{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    height:auto!important;
    margin:3px 0!important;
    padding:10px 13px!important;
    border:1px solid transparent!important;
    border-left:3px solid transparent!important;
    border-radius:10px!important;
    background:transparent!important;
    color:#174437!important;
    text-align:left!important;
    white-space:normal!important;
    font-size:14px!important;
    line-height:1.3!important;
    font-weight:600!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav button[data-phf-main-nav].active{
    border-color:#acd0bd!important;
    border-left-color:#38a95b!important;
    background:#dff1e6!important;
    color:#064f3b!important;
    font-weight:700!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav button.active::after{display:none!important;}

  .phf-hub-mobile-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:1285!important;
    display:block!important;
    background:rgba(8,34,26,.38)!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .2s ease!important;
  }
  body.phf-hub-mobile-drawer-open .phf-hub-mobile-backdrop{
    opacity:1!important;
    pointer-events:auto!important;
  }
  body.phf-hub-mobile-drawer-open{overflow:hidden!important;}

  /* The old greeting strip is redundant once the account button/menu is available. */
  body.phf-main-shell-mode #phfUserGreetingRow{display:none!important;}

  .phf-account-menu{
    position:fixed!important;
    z-index:1500!important;
    width:min(280px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
  }
}

@media (max-width:420px){
  body.phf-main-shell-mode .topbar.phf-site-header .brand .logo{
    flex-basis:66px!important;width:66px!important;max-width:66px!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .brand h1{font-size:12.5px!important;}
  body.phf-main-shell-mode .topbar.phf-site-header #phfClassroomHeaderIcon,
  body.phf-main-shell-mode .topbar.phf-site-header .phf-classroom-header-icon,
  body.phf-main-shell-mode .topbar.phf-site-header .phf-notification-wrap,
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry{
    flex-basis:38px!important;width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;
  }
}


/* 62.10 - Device-aware responsive boundary.
   Desktop/laptop with mouse or trackpad always keeps the desktop Hub shell,
   even when the browser window is narrow or browser zoom reduces CSS viewport width. */
@media (hover:hover) and (pointer:fine){
  body.phf-main-shell-mode:not(.phf-intro-active) > .app{
    max-width:1440px!important;
    margin:0 auto!important;
    padding:14px 22px!important;
    overflow-x:visible!important;
  }
  body.phf-main-shell-mode > .app > .topbar.phf-site-header{
    display:flex!important;
    position:sticky!important;
    top:0!important;
    width:100%!important;
    min-height:72px!important;
    height:auto!important;
    margin:0 0 14px!important;
    padding:12px 16px!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:12px!important;
    overflow:visible!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-mobile-menu-toggle{
    display:none!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .brand{
    display:flex!important;
    order:initial!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:250px!important;
    max-width:360px!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .brand .logo{
    width:118px!important;
    max-width:118px!important;
    height:40px!important;
    flex:0 0 118px!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .brand h1{
    font-size:18px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .brand p{
    display:block!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav{
    display:flex!important;
    position:static!important;
    order:initial!important;
    flex:1 1 auto!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    transform:none!important;
    transition:none!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav::before{
    display:none!important;
    content:none!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav button[data-phf-main-nav]{
    display:inline-flex!important;
    width:auto!important;
    min-width:max-content!important;
    min-height:42px!important;
    height:42px!important;
    margin:0!important;
    padding:0 14px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    justify-content:center!important;
    white-space:nowrap!important;
    font-size:15px!important;
    font-weight:600!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header #phfClassroomHeaderIcon,
  body.phf-main-shell-mode .topbar.phf-site-header .phf-classroom-header-icon,
  body.phf-main-shell-mode .topbar.phf-site-header .phf-notification-wrap{
    order:initial!important;
    flex:0 0 auto!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry{
    display:flex!important;
    position:relative!important;
    order:initial!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:180px!important;
    max-width:280px!important;
    height:auto!important;
    margin-left:auto!important;
    padding:8px 12px!important;
    border:1px solid #d4e5dc!important;
    border-radius:12px!important;
    background:#fff!important;
    overflow:visible!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry > span,
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry > small{
    display:block!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry::before{
    display:none!important;
    content:none!important;
  }
  body.phf-main-shell-mode #phfUserGreetingRow{
    display:flex!important;
  }
  .phf-hub-mobile-backdrop{
    display:none!important;
    pointer-events:none!important;
    opacity:0!important;
  }
  body.phf-hub-mobile-drawer-open{
    overflow:auto!important;
  }
}

/* 62.11 - Hub mobile drawer interaction and compact navigation final override. */
@media (max-width:600px), (max-width:820px) and (hover:none) and (pointer:coarse){
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:6px!important;
    padding:72px 14px 22px!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav::before{
    flex:0 0 auto!important;
    margin:0 4px 8px!important;
    padding:0 0 12px!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav button[data-phf-main-nav]{
    flex:0 0 auto!important;
    min-height:46px!important;
    height:46px!important;
    margin:0!important;
    padding:0 14px!important;
    line-height:1.2!important;
    touch-action:manipulation!important;
    pointer-events:auto!important;
    cursor:pointer!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-main-nav button[data-phf-main-nav]:active{
    transform:translateY(1px)!important;
    filter:brightness(.96)!important;
  }
  body.phf-main-shell-mode .topbar.phf-site-header .phf-login-entry::before{
    content:''!important;
    display:block!important;
    width:24px!important;
    height:24px!important;
    background:url('../favicon/apple-touch-icon.png') center/contain no-repeat!important;
  }
}