/* ============================================================
   LMS englishchapcanh.edu.vn — Design system v3 (nhận diện Chắp Cánh)
   Palette lấy trực tiếp từ logo: vàng gold #f5b60a là màu chủ đạo
   (nút hành động, điểm nhấn), xanh navy royal #01468c dùng cho chữ
   liên kết và mọi nền tối (sidebar, hero, footer). Nền sáng xanh rất
   nhạt, bo góc 12px. Trạng thái luôn kèm nhãn chữ (không chỉ dựa màu).
   ============================================================ */
* { box-sizing: border-box; }
* {
  scrollbar-width: thin;
  scrollbar-color: #4e8ed6 #eaf2fc;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #eaf2fc; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #4e8ed6, #01468c); border: 2px solid #eaf2fc; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f5b60a, #c68802); }
*::-webkit-scrollbar-corner { background: #eaf2fc; }
:root {
  --site-width: 1368px;

  /* ---- Màu thương hiệu lấy từ logo Gia Sư English Chắp Cánh ---- */
  --gold: #f5b60a;          /* vàng cánh chim — màu chủ đạo */
  --gold-light: #fdd525;
  --gold-deep: #c68802;
  --gold-ink: #8a5e00;      /* vàng đủ đậm để làm chữ trên nền sáng */
  --gold-2: #8a5e00;        /* tên cũ của gold-ink, giữ cho CSS/trang đã viết trước */
  --gold-soft: #fff8e3;
  --gold-bd: #f3d583;
  --navy: #01468c;          /* xanh royal của quả địa cầu */
  --navy-dark: #012f66;
  --navy-deep: #011e42;     /* nền tối nhất: hero, footer */
  --navy-light: #0a5faf;
  --navy-soft: #eaf2fc;
  --on-gold: #1f1400;       /* chữ trên nền vàng */

  --primary: #01468c;
  --primary-dark: #012f66;
  --primary-soft: #eaf2fc;
  --primary-ring: rgba(1, 70, 140, .24);
  --accent: #f5b60a;

  --bg: #f4f6fb;
  --card: #ffffff;
  --text: #101828;
  --text-2: #344054;
  --muted: #667085;
  --border: #e4e7ef;
  --border-strong: #cdd3e1;

  --success: #067647;
  --success-bg: #ecfdf3;
  --success-bd: #abefc6;
  --error: #b42318;
  --error-bg: #fef3f2;
  --error-bd: #fecdca;
  --warn: #b54708;
  --warn-bg: #fffaeb;
  --warn-bd: #fedf89;
  --info: #175cd3;
  --info-bg: #eff8ff;
  --info-bd: #b2ddff;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 2px 6px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .05);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
}
html { font-size: 15px; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; margin: 0 0 1rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.12rem; margin: 1.3rem 0 .65rem; font-weight: 650; }
h3 { font-size: .98rem; margin: 1rem 0 .5rem; font-weight: 600; }
h1, h2, h3 { text-transform: uppercase; }

.container { max-width: var(--site-width); margin: 0 auto; padding: 1.4rem 1.5rem 2.5rem; }

/* ---------- Topbar ---------- */
.topbar {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  max-width: var(--site-width); margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; gap: 1.1rem; min-height: 58px; flex-wrap: wrap;
}
.brand {
  font-weight: 700; color: var(--text); font-size: 1.02rem; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
}
.brand img {
  height: 34px; width: auto; max-width: 52px; flex: 0 0 auto; object-fit: contain;
}
.brand:hover { text-decoration: none; }
.main-nav { display: flex; gap: .15rem; flex-wrap: wrap; flex: 1; }
.main-nav a {
  padding: .4rem .75rem; border-radius: 999px; color: var(--text-2);
  font-size: .92rem; font-weight: 500; transition: background .15s, color .15s;
}
.main-nav a:hover { background: var(--primary-soft); color: var(--primary-dark); text-decoration: none; }
.main-nav a.active { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(1, 70, 140, .35); }
.user-box { display: flex; align-items: center; gap: .65rem; }
.user-name { color: var(--text-2); font-size: .88rem; font-weight: 500; display: inline-flex; align-items: center; gap: .45rem; }
.user-name::before {
  content: attr(data-initial);
  width: 30px; height: 30px; border-radius: 999px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary-dark);
  font-weight: 700; font-size: .82rem;
}
.nav-toggle {
  display: none; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .25rem .6rem; font-size: 1.05rem; cursor: pointer; color: var(--text-2);
}
.lang-switch {
  display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden;
  font-size: 1rem; font-weight: 650; background: #fff; line-height: 1;
}
.lang-switch a {
  width: 36px; height: 30px; padding: 0; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.lang-switch a:hover { text-decoration: none; background: var(--bg); }
.lang-switch a.on { background: var(--primary); color: #fff; }
.lang-switch img { width: 24px; height: 24px; display: block; }
.flag-icon { width: 22px; height: 22px; display: inline-block; vertical-align: middle; }
.ui-icon {
  width: 1.15em; height: 1.15em; display: inline-block; flex: 0 0 auto;
  fill: none; stroke: currentColor; vertical-align: -.15em;
}

/* ---------- Cards & grid ---------- */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.15rem 1.25rem; margin-bottom: 1.1rem; box-shadow: var(--shadow-sm);
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Ô chỉ số: nhãn phụ nhỏ phía trên, giá trị lớn màu chữ chính */
.stat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .95rem 1.1rem .85rem; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.stat::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--primary), #818cf8);
  border-radius: 4px 0 0 4px;
}
.stat .stat-value {
  font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.25;
}
.stat .stat-label { color: var(--muted); font-size: .82rem; margin-top: .1rem; }

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 1.1rem;
}
table { width: 100%; border-collapse: collapse; background: var(--card); font-size: .92rem; }
th, td { text-align: left; padding: .62rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th, tr:first-child th {
  background: #f8f9fd; font-weight: 600; white-space: nowrap; color: var(--text-2);
  font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
}
tbody tr:last-child td, table tr:last-child td { border-bottom: none; }
tr:hover td { background: #f8f9fd; }
td { color: var(--text-2); }
td strong, td a { color: var(--text); }
td a { color: var(--primary); }
/* Bảng lồng trong card thì bỏ khung đôi */
.card .table-wrap { border: 1px solid var(--border); box-shadow: none; }

/* ---------- Forms ---------- */
label { display: block; margin: .75rem 0 .3rem; font-weight: 550; font-size: .89rem; color: var(--text-2); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=datetime-local], select, textarea {
  width: 100%; padding: .5rem .7rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font: inherit; background: #fff; color: var(--text); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring);
}
textarea { resize: vertical; }
.control-compact { display: block; max-width: 420px; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row > div { flex: 1; min-width: 180px; }
.inline-form { display: inline; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .48rem 1rem; border-radius: var(--radius-sm); border: 1px solid transparent;
  font: inherit; font-weight: 550; font-size: .92rem; line-height: 1.25; cursor: pointer; text-align: center;
  transition: background .15s, box-shadow .15s, transform .1s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }
/* Nút chính = vàng gold của logo, chữ nâu đen để đủ tương phản (~8.8:1) */
.btn-primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 48%, var(--gold-deep));
  color: var(--on-gold); border-color: #d9a208;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 4px 12px rgba(245, 182, 10, .32);
}
.btn-primary:hover { filter: brightness(1.05); }
/* Nút phụ màu navy: dùng khi cần hai cấp hành động trên cùng một khối */
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy-dark); box-shadow: 0 4px 12px rgba(1, 70, 140, .25); }
.btn-navy:hover { background: var(--navy-dark); }
.btn-outline { background: #fff; color: var(--text-2); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-outline:hover { background: #f8f9fd; border-color: var(--primary); color: var(--primary-dark); }
.btn-danger { background: #fff; color: var(--error); border-color: var(--error-bd); box-shadow: var(--shadow-sm); }
.btn-danger:hover { background: var(--error-bg); }
.btn-sm { padding: .26rem .62rem; font-size: .84rem; }
.btn-block { width: 100%; margin-top: 1.1rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Alerts & badges ---------- */
.alert {
  padding: .68rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.1rem;
  border: 1px solid transparent; font-size: .93rem;
}
.alert-success { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); }
.alert-error { background: var(--error-bg); color: var(--error); border-color: var(--error-bd); }
.alert-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); }
.alert-info { background: var(--info-bg); color: var(--info); border-color: var(--info-bd); }

/* Thông báo thao tác: toast xếp chồng ở góc trên bên phải. */
.app-toast-region {
  position: fixed; z-index: 320; top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right)); width: min(420px, calc(100vw - 2rem));
  display: grid; gap: .65rem; pointer-events: none;
}
.app-toast {
  --toast-color: var(--info); --toast-bg: var(--info-bg); --toast-border: var(--info-bd);
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: start; gap: .7rem;
  padding: .78rem .72rem .78rem .82rem; pointer-events: auto;
  color: var(--toast-color); background: #fff; border: 1px solid var(--toast-border);
  border-left: 4px solid var(--toast-color); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(16,24,40,.18), 0 3px 8px rgba(16,24,40,.08);
  opacity: 0; transform: translate3d(28px, 0, 0); transition: opacity .2s ease, transform .22s ease;
}
.app-toast.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.app-toast.is-leaving { opacity: 0; transform: translate3d(20px, -4px, 0); }
.app-toast-success { --toast-color: var(--success); --toast-bg: var(--success-bg); --toast-border: var(--success-bd); }
.app-toast-error { --toast-color: var(--error); --toast-bg: var(--error-bg); --toast-border: var(--error-bd); }
.app-toast-warn { --toast-color: var(--warn); --toast-bg: var(--warn-bg); --toast-border: var(--warn-bd); }
.app-toast-info { --toast-color: var(--info); --toast-bg: var(--info-bg); --toast-border: var(--info-bd); }
.app-toast-icon {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--toast-color); background: var(--toast-bg);
  border: 1px solid var(--toast-border); font-size: .86rem; font-weight: 800; line-height: 1;
}
.app-toast-message { min-width: 0; padding-top: .18rem; color: var(--text); font-size: .9rem; line-height: 1.48; overflow-wrap: anywhere; }
.app-toast-close {
  width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); background: transparent; border: 0; border-radius: 8px;
  font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.app-toast-close:hover { color: var(--toast-color); background: var(--toast-bg); }
@media (max-width: 640px) {
  .app-toast-region {
    top: max(.65rem, env(safe-area-inset-top)); right: max(.65rem, env(safe-area-inset-right));
    left: max(.65rem, env(safe-area-inset-left)); width: auto;
  }
  .app-toast { grid-template-columns: 28px minmax(0, 1fr) 28px; padding: .7rem .62rem .7rem .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .app-toast { transition: none; }
}
.badge {
  display: inline-flex; align-items: center; justify-content: center; min-height: 24px;
  padding: .12rem .58rem; border-radius: 999px; line-height: 1;
  font-size: .78rem; font-weight: 550; white-space: nowrap; border: 1px solid transparent;
}
.badge-green { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); }
.badge-red { background: var(--error-bg); color: var(--error); border-color: var(--error-bd); }
.badge-amber { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); }
.badge-gray { background: #f2f4f7; color: var(--muted); border-color: #e4e7ec; }
.badge-blue { background: var(--info-bg); color: var(--info); border-color: var(--info-bd); }

.muted { color: var(--muted); }
.center { text-align: center; }
.mt { margin-top: 1rem; }
.actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

/* ---------- Auth card ---------- */
.auth-card {
  max-width: 430px; margin: 3rem auto; background: var(--card);
  border: 1px solid var(--border); border-radius: 16px; padding: 1.8rem;
  box-shadow: var(--shadow-md);
}
.auth-card h1 { text-align: center; margin-bottom: 1.2rem; }
.hp-field { position: absolute !important; left: -9999px !important; height: 1px; width: 1px; overflow: hidden; }

/* ---------- Trang làm bài thi ---------- */
.exam-layout { display: grid; grid-template-columns: 1fr 230px; gap: 1.1rem; align-items: start; }
.exam-side { position: sticky; top: 4.6rem; }
.exam-timer {
  font-size: 1.45rem; font-weight: 700; text-align: center; padding: .5rem;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--text);
}
.exam-timer.warning { color: var(--error); }
.save-status { text-align: center; font-size: .84rem; padding-bottom: .55rem; font-weight: 500; }
.save-status.saved { color: var(--success); }
.save-status.unsaved { color: var(--warn); }
.save-status.error { color: var(--error); }
.q-nav { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; padding: .5rem .25rem .7rem; }
.q-nav a {
  width: 33px; height: 33px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-2); font-size: .85rem; font-weight: 550; transition: border-color .15s, background .15s;
}
.q-nav a.answered { background: var(--success-bg); border-color: var(--success-bd); color: var(--success); }
.q-nav a:hover { text-decoration: none; border-color: var(--primary); }
.question-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm);
}
.question-card .q-head { display: flex; justify-content: space-between; gap: .6rem; margin-bottom: .55rem; align-items: baseline; }
.question-card .q-content { white-space: pre-wrap; margin-bottom: .65rem; color: var(--text); }
.option-row { display: flex; align-items: flex-start; gap: .55rem; padding: .42rem .55rem; border-radius: var(--radius-sm); }
.option-row:hover { background: var(--primary-soft); }
.option-row input { margin-top: .3rem; width: auto; accent-color: var(--primary); }
.option-row label { margin: 0; font-weight: 400; flex: 1; cursor: pointer; color: var(--text-2); }
.answer-correct { color: var(--success); font-weight: 550; }
.answer-wrong { color: var(--error); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); background: #fff; margin-top: 2.5rem; }
.footer .container { padding: 1rem 1.2rem; color: var(--muted); font-size: .85rem; }

/* ---------- Khung ảnh (dùng chung cho landing & app) ---------- */
.photo-frame {
  border-radius: 16px; overflow: hidden; background: var(--primary-soft);
  box-shadow: var(--shadow-md); position: relative; display: block;
}
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-frame.ratio-16x10 { aspect-ratio: 16 / 10; }
.photo-frame.ratio-4x3 { aspect-ratio: 4 / 3; }
.photo-frame.ratio-3x4 { aspect-ratio: 3 / 4; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
  .exam-layout { grid-template-columns: 1fr; }
  .exam-side { position: static; order: -1; }
  .nav-toggle { display: block; margin-left: auto; }
  .main-nav { display: none; width: 100%; flex-direction: column; padding-bottom: .6rem; }
  .main-nav a { border-radius: var(--radius-sm); }
  body.nav-open .main-nav { display: flex; }
  .user-box { margin-left: auto; }
  .user-name span.full { display: none; }
}
@media (max-width: 480px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  html { font-size: 14.5px; }
}

/* ============================================================
   v3 — Layout sidebar cho app (giáo viên + học viên)
   Sidebar navy royal + điểm nhấn vàng gold theo logo Gia Sư English Chắp Cánh
   ============================================================ */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 252px; flex: 0 0 252px;
  background: linear-gradient(180deg, #01468c 0%, #011e42 100%);
  color: #dbeafe; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sb-brand {
  display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem .9rem;
  color: #fff; border-bottom: 1px solid rgba(255,255,255,.07);
}
.sb-brand:hover { text-decoration: none; }
/* Huy hiệu nằm ngang cạnh tên: canh theo chiều cao, không ép vuông kẻo méo */
.sb-brand img { height: 42px; width: auto; max-width: 62px; object-fit: contain; flex: 0 0 auto; }
/* Ba dòng như logo, bản trên nền navy: chữ trắng · vàng sáng · slogan xanh nhạt */
.sb-brand-text { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.08; font-weight: 700; letter-spacing: .02em; min-width: 0; }
.sb-brand-text .brand-name { display: block; font-size: .58rem; letter-spacing: .2em; color: #fff; }
.sb-brand-text .brand-name em {
  display: block; font-style: normal; font-size: 1.06rem; font-weight: 800;
  letter-spacing: .08em; color: var(--gold-light); margin-top: .12em;
}
.sb-brand-text small {
  margin-top: .22em; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500; font-size: .5rem; color: #cfe0f4; letter-spacing: .05em; text-transform: uppercase;
}

.sb-nav { flex: 1; padding: .9rem .7rem; }
.sb-section {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: #93c5fd; padding: 0 .55rem .5rem;
}
.sb-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .52rem .65rem; border-radius: 9px; margin-bottom: 2px;
  color: #dbeafe; font-size: .93rem; font-weight: 500;
  position: relative; transition: background .15s, color .15s;
}
.sb-link:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.sb-link.active { background: rgba(245, 182, 10,.13); color: #f0d47e; }
.sb-link.active::before {
  content: ""; position: absolute; left: -0.7rem; top: 20%; bottom: 20%; width: 3px;
  background: #f5b60a; border-radius: 0 3px 3px 0;
}
.sb-ico { width: 1.45rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.02rem; flex: 0 0 auto; }
.sb-ico .ui-icon { width: 1.2rem; height: 1.2rem; }

.sb-foot { padding: .9rem 1rem 1.1rem; border-top: 1px solid rgba(255,255,255,.07); }
.sb-user { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.sb-avatar {
  width: 36px; height: 36px; border-radius: 999px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep)); color: #17130a;
  font-weight: 800; font-size: .95rem;
}
.sb-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.sb-user-link { color: inherit; border-radius: 10px; }
.sb-user-link:hover { text-decoration: none; background: rgba(255,255,255,.06); }
.sb-user-info { line-height: 1.25; min-width: 0; }
.sb-user-info strong { display: block; color: #fff; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-info small { color: #cfe0f4; font-size: .74rem; }
.sb-actions { display: flex; align-items: center; gap: .5rem; }
.sidebar .lang-switch { border-color: #60a5fa; background: rgba(255,255,255,.08); }
.sidebar .lang-switch a { color: #dbeafe; }
.sidebar .lang-switch a:hover { background: rgba(255,255,255,.06); }
.sidebar .lang-switch a.on { background: #f5b60a; color: #17130a; }
.sb-logout { background: transparent; color: #dbeafe; border-color: #60a5fa; box-shadow: none; flex: 1; }
.sb-logout:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #93c5fd; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.has-sidebar .container { max-width: var(--site-width); width: 100%; flex: 1; }
.has-sidebar .footer { margin-top: auto; }

/* Thanh trên cùng chỉ hiện ở mobile */
.mobilebar {
  display: none; align-items: center; gap: .7rem;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); padding: .55rem 1rem;
  position: sticky; top: 0; z-index: 40;
}
.mobilebar-title { font-weight: 650; font-size: .98rem; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobilebar-logo { width: 30px; height: 30px; border-radius: 8px; }

.sb-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(10,12,18,.5);
  z-index: 55; backdrop-filter: blur(2px);
}

/* Đầu trang: tiêu đề + mô tả + nút hành động */
.page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.page-head h1 { margin-bottom: .15rem; }
.page-head p { margin: 0; }

/* Trạng thái rỗng */
.empty-state {
  text-align: center; padding: 3rem 1rem; background: var(--card);
  border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted);
}
.empty-state .empty-icon { font-size: 2.2rem; margin-bottom: .5rem; }

/* Cây chọn bài kiểm tra: chương trình -> kỹ năng -> bộ đề */
.exam-breadcrumb {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .65rem .8rem; margin-bottom: 1rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: #fff; color: var(--muted);
}
.exam-breadcrumb a, .exam-breadcrumb strong { font-size: .9rem; }
.exam-branch-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem; margin-bottom: 1.25rem;
}
.exam-branch-card {
  min-height: 108px; display: flex; flex-direction: column; justify-content: space-between;
  padding: 1rem 1.05rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.exam-branch-card:hover {
  text-decoration: none; border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-md);
}
.exam-branch-card strong { color: var(--text); font-size: 1.02rem; }
.exam-branch-card span { color: var(--primary); font-size: .86rem; }
.collection-filter {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: .8rem; margin-bottom: 1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
}
.collection-filter > span { font-weight: 650; margin-right: .2rem; }
.collection-filter a {
  padding: .3rem .68rem; border: 1px solid var(--border-strong); border-radius: 999px;
  background: #fff; color: var(--text-2); font-size: .85rem;
}
.collection-filter a:hover, .collection-filter a.active {
  text-decoration: none; background: var(--primary); border-color: var(--primary); color: #fff;
}
.import-sample {
  max-height: 520px; overflow: auto; margin: 0; padding: .9rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #0f172a; color: #e2e8f0; font-size: .8rem; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.select-sm { padding: .22rem .45rem; font-size: .84rem; width: auto; }

/* Sticky panel trang thi: không còn topbar cố định trên desktop */
.has-sidebar .exam-side { top: 1rem; }

@media (max-width: 1023px) {
  .sidebar {
    position: fixed; left: -270px; top: 0; bottom: 0; z-index: 60;
    height: 100vh; transition: left .22s ease; box-shadow: 8px 0 30px rgba(0,0,0,.25);
  }
  body.nav-open .sidebar { left: 0; }
  body.nav-open .sb-backdrop { display: block; }
  .mobilebar { display: flex; }
  .has-sidebar .exam-side { top: 3.6rem; }
}

@media (max-width: 760px) {
  .exam-branch-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .exam-branch-grid { grid-template-columns: 1fr; }
}

/* ===== Reading passage (đề Reading / test trình độ) ===== */
.reading-block {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 1rem; align-items: start; margin-bottom: 1.25rem;
}
.passage-panel {
  position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 1rem 1.1rem;
}
.passage-panel h3 { margin: 0 0 .5rem; font-size: 1rem; }
.passage-text { line-height: 1.75; white-space: normal; }
.passage-review { border-left: 4px solid var(--primary); }
.passage-review .passage-text { line-height: 1.7; }
.q-explain {
  margin-top: .6rem; padding: .55rem .7rem; border-radius: 8px;
  background: rgba(245, 182, 10, .1); border: 1px solid rgba(245, 182, 10, .35);
  font-size: .92rem; line-height: 1.6;
}
.placement-result { border-top: 4px solid var(--primary); }

/* Trang test trình độ công khai */
.trial-cred {
  display: flex; gap: 1.2rem; flex-wrap: wrap; padding: .8rem 1rem;
  background: var(--bg-soft, #f6f7fb); border: 1px dashed var(--border-strong);
  border-radius: var(--radius); margin: .6rem 0;
}
.trial-cred code { font-size: 1.05rem; font-weight: 700; }

@media (max-width: 900px) {
  .reading-block { grid-template-columns: 1fr; }
  .passage-panel { position: static; max-height: 320px; }
}

/* ============================================================
   v4 — Polish giao diện admin (2026-08-09)
   ============================================================ */

/* Nhãn menu sidebar không tràn dòng */
.sb-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tiêu đề mục + nút hành động thẳng hàng hai bên */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin: 1.4rem 0 .7rem;
}
.section-head h2 { margin: 0; }

/* Tiêu đề trong card có đường kẻ phân tách — nhìn có cấu trúc hơn */
.card > h2:first-child {
  padding-bottom: .6rem; border-bottom: 1px solid var(--border); margin-bottom: .9rem;
}

/* Bảng: kẻ sọc nhẹ, số thẳng cột, cột thao tác không vỡ dòng (bảng tự cuộn ngang) */
table tr:nth-child(even) td { background: #fbfcfe; }
table tr:hover td { background: #f3f5fd; }
td { font-variant-numeric: tabular-nums; }
td .actions { flex-wrap: nowrap; }
td .actions .btn, td .inline-form .btn { white-space: nowrap; }

/* Form trong ô bảng (VD ô "Đã thu" của hóa đơn) gọn trên 1 hàng */
td .inline-form { display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle; }

/* Ô chọn / ô nhập trong bảng không phá chiều rộng cột */
td select, td input[type=text], td input[type=number] { width: auto; max-width: 220px; }

/* Khối trống & page-head cân hơn trên mobile */
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   v5 — Học từ LMS thị trường (Uup/Classroom/Canvas): bottom nav
   mobile, dashboard hero + tác vụ nhanh, form desktop vừa mắt
   ============================================================ */

/* ---- Bottom tab bar (mobile, kiểu app native) ---- */
.tabbar { display: none; }
@media (max-width: 1023px) {
  .tabbar {
    display: flex; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: linear-gradient(180deg, #012f66, #011e42);
    border-top: 1px solid #0a5faf;
    padding: .3rem 0 calc(.35rem + env(safe-area-inset-bottom)) .25rem;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .28);
  }
  .tabbar-scroll {
    min-width: 0; flex: 1; display: flex; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tabbar-scroll::-webkit-scrollbar { display: none; }
  .tabbar .tab {
    flex: 0 0 78px; min-width: 0; display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: .3rem .15rem; border: none; background: none; font: inherit;
    color: #dbeafe; font-size: .64rem; font-weight: 550; border-radius: 10px; cursor: pointer;
    scroll-snap-align: start;
  }
  .tabbar > #tab-more {
    flex: 0 0 68px; position: relative; z-index: 2; border-radius: 0;
    border-left: 1px solid rgba(147,197,253,.34);
    background: linear-gradient(90deg, #01468c, #011e42);
    box-shadow: -8px 0 16px rgba(15,23,42,.2);
  }
  .tabbar .tab:hover { text-decoration: none; }
  .tabbar .tab.active { color: #f0d47e; background: rgba(245, 182, 10, .12); }
  .tabbar .tab-ico { display: inline-flex; align-items: center; justify-content: center; font-size: 1.18rem; line-height: 1.15; }
  .tabbar .tab-ico .ui-icon { width: 1.2rem; height: 1.2rem; }
  .tabbar .tab-label {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* chừa chỗ cho tabbar */
  .has-sidebar .container { padding-bottom: 5.2rem; }
  .has-sidebar .footer { display: none; }
}

/* ---- Dashboard: hero panel cá nhân hóa (học từ Uup.vn) ---- */
.hero-panel {
  background:
    radial-gradient(460px 220px at 92% -30%, rgba(245, 182, 10, .26), transparent 60%),
    linear-gradient(135deg, #01468c 0%, #012f66 100%);
  color: #eef0f6; border-radius: var(--radius); padding: 1.3rem 1.5rem;
  margin-bottom: 1.1rem; box-shadow: var(--shadow-sm); border: 1px solid #60a5fa;
}
.hero-panel h1 { color: #fff; margin: 0 0 .25rem; }
.hero-panel .hp-sub { color: #dbeafe; font-size: .93rem; margin: 0; }
.hp-stats { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1.05rem; }
.hp-chip {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; padding: .5rem .95rem; min-width: 118px;
}
.hp-chip strong {
  display: block; font-size: 1.2rem; color: #f0d47e; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
.hp-chip span { font-size: .76rem; color: #dbeafe; }

/* ---- Hàng nút tác vụ nhanh ---- */
.quick-actions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem; margin-bottom: 1.15rem;
}
.qa {
  display: flex; align-items: center; gap: .6rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .78rem .95rem; font-weight: 600; font-size: .92rem; color: var(--text);
  box-shadow: var(--shadow-sm); transition: border-color .15s, transform .12s, color .15s;
}
.qa:hover { text-decoration: none; border-color: var(--primary); color: var(--primary-dark); transform: translateY(-1px); }
.qa .qa-ico {
  width: 26px; height: 26px; flex: 0 0 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.22rem; line-height: 1;
}
.qa .qa-ico .ui-icon { display: block; width: 19px; height: 19px; }

/* Form quản trị luôn dùng đủ chiều ngang của card; form hẹp phải khai báo riêng. */
.card > form, .section-builder > form { width: 100%; max-width: none; }

.page-exam-edit .table-wrap { width: 100%; }
.page-exam-edit .exam-question-table td:nth-child(2) { min-width: 360px; }
.section-builder {
  margin-top: .85rem; padding: .7rem .8rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: #f8fbff;
}
.section-builder > summary {
  width: fit-content; padding: .38rem .72rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: #fff; color: var(--primary);
  font-size: .88rem; font-weight: 650; cursor: pointer; list-style-position: inside;
}
.section-builder[open] > summary { margin-bottom: .7rem; }

/* Modal thêm mới dùng chung toàn khu quản trị. */
body.modal-open { overflow: hidden; }
.app-modal[hidden] { display: none; }
.app-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; }
.app-modal-backdrop { position: absolute; inset: 0; background: rgba(1, 30, 66, .58); backdrop-filter: blur(3px); }
.app-modal-panel {
  position: relative; z-index: 1; width: min(980px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
  display: flex; flex-direction: column; overflow: hidden; background: var(--card);
  border: 1px solid rgba(255,255,255,.45); border-radius: 16px; box-shadow: 0 24px 70px rgba(1,30,66,.3);
}
.app-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.15rem; border-bottom: 1px solid var(--border); background: #f8fbff;
}
.app-modal-head h2 { margin: 0; font-size: 1.05rem; }
.app-modal-close {
  width: 36px; height: 36px; flex: 0 0 36px; padding: 0; border: 1px solid var(--border-strong);
  border-radius: 999px; background: #fff; color: var(--text-2); font-size: 1.45rem; line-height: 1; cursor: pointer;
}
.app-modal-close:hover { color: var(--error); border-color: var(--error-bd); background: var(--error-bg); }
.app-modal-body { overflow: auto; padding: 1rem 1.15rem 1.2rem; }
.app-modal .modal-form-card { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
.app-modal .modal-form-card > h2:first-child,
.app-modal .modal-form-card > h3:first-child { display: none; }
.app-create-trigger { white-space: nowrap; }
.mobilebar-actions { display: flex; align-items: center; flex: 0 0 auto; }
.mobilebar-create {
  width: 34px; height: 34px; padding: 0; border: 1px solid #d9a208; border-radius: 9px;
  background: var(--gold); color: var(--on-gold); font-size: 1.35rem; line-height: 1; font-weight: 700; cursor: pointer;
}
@media (max-width: 640px) {
  .app-modal { padding: 0; place-items: end center; }
  .app-modal-panel { width: 100%; max-height: 94vh; border-radius: 16px 16px 0 0; }
  .app-modal-body { padding: .85rem; }
}

/* ============================================================
   v6 — Bảng thành thẻ xếp dọc trên mobile (app.js gắn data-label)
   ============================================================ */
@media (max-width: 760px) {
  table.resp .resp-head { display: none; }
  table.resp, table.resp tbody { display: block; width: 100%; }
  .table-wrap.resp-wrap {
    overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  table.resp { background: transparent; }
  table.resp tr {
    display: block; margin: 0; padding: 0; overflow: hidden; background: #fff;
    border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-sm);
  }
  table.resp tr + tr { margin-top: .65rem; }
  table.resp td {
    display: grid; grid-template-columns: minmax(78px, 31%) minmax(0, 1fr);
    align-items: start; gap: .65rem; border: none; padding: .38rem .7rem; width: 100%;
  }
  /* bỏ sọc/hover của chế độ bảng khi đã ở dạng thẻ */
  table.resp tr:nth-child(even) td, table.resp tr:hover td { background: none; }
  table.resp td::before {
    content: attr(data-label);
    font-size: .72rem; font-weight: 650; text-transform: uppercase;
    letter-spacing: .03em; color: var(--muted); line-height: 1.45;
  }
  table.resp .resp-value { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
  table.resp td:first-child {
    display: block; padding: .72rem .7rem .62rem;
    background: linear-gradient(135deg, #f8fbff, #fff);
    border-bottom: 1px solid #edf1f7;
  }
  table.resp td:first-child::before { display: block; margin-bottom: .28rem; }
  table.resp td:first-child .resp-value > strong:first-child { display: block; font-size: .94rem; line-height: 1.4; }
  table.resp td:first-child .resp-value > br { display: none; }
  table.resp td:first-child .resp-value > .badge { margin-top: .35rem; }
  table.resp td:first-child .resp-value > .muted { display: block; margin-top: .32rem; }
  table.resp .resp-value .badge {
    max-width: 100%; height: auto; white-space: normal; text-align: left;
  }
  table.resp td:not([data-label])::before { display: none; }
  table.resp td:not([data-label]) {
    display: block; padding: .55rem .7rem .75rem;
  }
  table.resp td:not([data-label]) .resp-value { width: 100%; }
  table.resp td:not([data-label]) .btn,
  table.resp td:not([data-label]) .inline-form { width: 100%; }
  table.resp td .actions, table.resp td .inline-form { flex-wrap: wrap; }
  table.resp td select, table.resp td input[type=text] { max-width: 100%; }
}

/* ============================================================
   v11 — Login giàu hình ảnh, app topbar, sidebar thu gọn và pager
   ============================================================ */

/* Menu đầy đủ cho các trang công khai như đăng nhập / test trình độ */
.guest-nav {
  display: flex; align-items: center; justify-content: center; gap: .25rem;
  flex: 1; margin-inline: 1rem;
}
.guest-nav a {
  color: var(--text-2); font-weight: 550; font-size: .9rem;
  padding: .42rem .72rem; border-radius: 999px;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.guest-nav a:hover {
  color: var(--primary-dark); background: var(--primary-soft);
  text-decoration: none; transform: translateY(-1px);
}

/* Login: ảnh lớp học làm nền, card sáng và dễ đọc */
.guest-login {
  background:
    linear-gradient(90deg, rgba(242, 248, 255, .97) 0%, rgba(242, 248, 255, .88) 38%, rgba(242, 248, 255, .3) 72%, rgba(242, 248, 255, .18) 100%),
    url('/assets/images/hero-speaking.webp') center 36% / cover fixed;
}
.guest-login .topbar { background: rgba(255, 255, 255, .88); }
.guest-login main.container {
  min-height: min(720px, calc(100vh - 58px));
  display: flex; align-items: center; width: 100%;
  padding-top: 3rem; padding-bottom: 3rem;
}
.guest-login .auth-card {
  width: min(100%, 450px); margin: 0 0 0 clamp(0rem, 3vw, 3rem);
  padding: 2rem; border-color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.94); backdrop-filter: blur(16px);
  box-shadow: 0 24px 70px rgba(30, 58, 138, .18), 0 2px 8px rgba(16,24,40,.08);
  position: relative; overflow: hidden;
}
.guest-login .auth-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, #01468c, #0a5faf, var(--gold));
}
.guest-login .auth-card h1 { font-size: 1.65rem; letter-spacing: -.025em; }
.guest-login .auth-card input { min-height: 44px; background: rgba(255,255,255,.9); }
.auth-kicker {
  width: max-content; margin: 0 auto .65rem; display: flex; align-items: center; gap: .38rem;
  color: #01468c; background: #eaf2fc; border: 1px solid #cfe0f4;
  border-radius: 999px; padding: .3rem .65rem; font-size: .76rem; font-weight: 650;
}
.auth-lead { margin: -.7rem auto 1.2rem; color: var(--muted); text-align: center; font-size: .86rem; max-width: 330px; }
.auth-back { margin: 1.1rem 0 0; }
.auth-back a { display: inline-flex; align-items: center; gap: .28rem; font-size: .86rem; }
.auth-back .ui-icon { transform: rotate(180deg); }

/* Footer công khai đầy đủ thông tin */
.guest-footer { margin-top: 0; background: #f8fbff; border-top-color: #dbe7f5; }
.guest-footer-grid {
  max-width: var(--site-width); margin: 0 auto; padding: 2.5rem 1.5rem 2rem;
  display: grid; grid-template-columns: 1.25fr .8fr 1.15fr 1fr; gap: 2rem;
}
.guest-footer h2 {
  margin: .1rem 0 .8rem; color: var(--text); font-size: .86rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.guest-footer p { margin: .5rem 0; font-size: .88rem; }
.guest-footer-brand .brand { margin-bottom: .75rem; align-items: center; }
.guest-footer-brand .brand-text { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.06; }
.guest-footer-brand .brand-name { display: block; font-size: .62rem; font-weight: 700; color: var(--navy); letter-spacing: .2em; }
.guest-footer-brand .brand-name em {
  display: block; font-style: normal; font-size: 1.14rem; font-weight: 800;
  letter-spacing: .08em; color: var(--gold-ink); margin-top: .12em;
}
.guest-footer-brand .brand-text small {
  margin-top: .22em; font-size: .53rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-2);
}
.guest-footer-links { display: grid; gap: .42rem; }
.guest-footer-links a { color: var(--text-2); font-size: .9rem; }
.guest-footer-links a:hover { color: var(--primary); text-decoration: none; }
.guest-footer-contact { display: grid; gap: .65rem; }
.guest-footer-contact > a, .guest-footer-contact > span {
  display: flex; gap: .62rem; align-items: flex-start; color: var(--text-2); font-size: .86rem;
}
.guest-footer-contact .ui-icon { color: #0a5faf; width: 1.15rem; height: 1.15rem; margin-top: .18rem; }
.guest-footer-contact span span, .guest-footer-contact a span { display: grid; }
.guest-footer-contact small { color: var(--muted); font-size: .72rem; line-height: 1.2; }
.guest-footer-bottom {
  max-width: var(--site-width); margin: 0 auto; padding: .9rem 1.5rem 1.2rem;
  border-top: 1px solid #dbe7f5; color: var(--muted); font-size: .8rem;
}

/* Topbar quản trị: tiêu đề, bộ lọc và nút hành động cùng một vùng */
.app-topbar {
  min-height: 68px; padding: .72rem clamp(1rem, 2vw, 2rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  position: sticky; top: 0; z-index: 38;
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border); box-shadow: 0 2px 14px rgba(16,24,40,.035);
}
.app-topbar-heading { min-width: 0; flex: 1; }
.app-topbar-heading h1 {
  margin: 0; padding: .16em 0 .12em; font-size: 1.2rem; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-topbar-heading p {
  display: none; margin: 0; padding: .12em 0 .1em; max-width: 720px; color: var(--muted);
  font-size: .78rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-topbar-heading p:not(:empty) { display: block; }
.app-topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: .42rem; flex-wrap: wrap; }
.app-topbar-actions:empty { display: none; }
.app-topbar-actions .actions { display: contents; }
.app-topbar-actions form { margin: 0; }
.app-topbar-actions > strong { white-space: nowrap; font-size: .86rem; }
.app-user-tools {
  flex: 0 0 auto; display: flex; align-items: center; gap: .65rem;
  padding-left: .9rem; border-left: 1px solid var(--border);
}
.app-user {
  display: flex; align-items: center; gap: .55rem; min-width: 0;
  margin: -.25rem; padding: .25rem; border-radius: 10px; color: inherit;
  transition: background .15s ease;
}
.app-user:hover { background: var(--primary-soft); text-decoration: none; }
.app-user .sb-avatar { width: 36px; height: 36px; }
.app-user-info { display: grid; line-height: 1.2; min-width: 0; }
.app-user-info strong {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); font-size: .84rem;
}
.app-user-info small { color: var(--muted); font-size: .72rem; }
.app-user-tools .lang-switch { flex: 0 0 auto; }
.app-logout { flex: 0 0 auto; white-space: nowrap; }
.app-logout .ui-icon { width: 1rem; height: 1rem; }

/* Tải và xem trước ảnh đại diện trong trang tài khoản */
.profile-avatar {
  display: flex; align-items: center; gap: 1rem; padding: .85rem;
  margin-bottom: 1rem; border: 1px solid var(--border); border-radius: 12px; background: #f8fbff;
}
.profile-avatar-preview {
  width: 76px; height: 76px; flex: 0 0 76px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep)); color: #17130a;
  font-size: 1.45rem; font-weight: 800; box-shadow: 0 0 0 4px #fff, var(--shadow-sm);
}
.profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar-form { min-width: 0; flex: 1; }
.profile-avatar-form label { margin-top: 0; }
.profile-avatar-form input[type=file] { width: 100%; font-size: .82rem; }
.profile-avatar-form .muted { display: block; margin-top: .25rem; font-size: .74rem; }

/* Nội dung luôn dùng toàn bộ chiều rộng còn lại của màn hình */
.has-sidebar .main { width: calc(100% - 252px); transition: width .22s ease; }
.has-sidebar .container {
  max-width: none; margin: 0; width: 100%;
  padding: 1.3rem clamp(1rem, 2vw, 2rem) 2.5rem;
}

/* Nút tròn nằm trên đường giao sidebar / nội dung và trạng thái chỉ còn icon */
.sidebar {
  z-index: 45; overflow: visible;
  transition: width .22s ease, flex-basis .22s ease, left .22s ease;
}
.sidebar .sb-nav { min-height: 0; overflow-x: hidden; overflow-y: auto; }
.sidebar .sb-foot { display: none; }
.sidebar-collapse {
  position: absolute; z-index: 46; right: -16px; top: 68px;
  width: 32px; height: 32px; padding: 0; border: 1px solid #d7dce6;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  color: #475467; background: #fff; cursor: pointer;
  box-shadow: 0 3px 10px rgba(16,24,40,.14);
  transform: translateY(-50%);
  transition: color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sidebar-collapse:hover {
  color: var(--primary); border-color: #a5b4fc;
  box-shadow: 0 4px 14px rgba(1, 70, 140,.2); transform: translateY(-50%) scale(1.05);
}
.sidebar-collapse .ui-icon { width: 16px; height: 16px; }
.sidebar-collapse .ui-icon { transform: rotate(180deg); transition: transform .22s ease; }
.sb-brand { padding-right: 1.1rem; }
body.sidebar-collapsed .sidebar { width: 76px; flex-basis: 76px; }
body.sidebar-collapsed .main { width: calc(100% - 76px); }
body.sidebar-collapsed .sidebar-collapse { right: -16px; top: 68px; }
body.sidebar-collapsed .sidebar-collapse .ui-icon { transform: rotate(0); }
body.sidebar-collapsed .sb-brand { justify-content: center; padding: .75rem .5rem; }
body.sidebar-collapsed .sb-brand img { height: 38px; width: auto; max-width: 56px; }
body.sidebar-collapsed .sb-brand-text,
body.sidebar-collapsed .sb-section,
body.sidebar-collapsed .sb-label,
body.sidebar-collapsed .sb-user-info,
body.sidebar-collapsed .sb-actions { display: none; }
body.sidebar-collapsed .sb-nav { padding: .75rem .55rem; }
body.sidebar-collapsed .sb-link { justify-content: center; padding: .65rem .4rem; }
body.sidebar-collapsed .sb-link.active::before { left: -.55rem; }
body.sidebar-collapsed .sb-ico { width: 1.5rem; }
body.sidebar-collapsed .sb-foot { padding: .8rem .5rem 1rem; }
body.sidebar-collapsed .sb-user { justify-content: center; margin: 0; }

/* Phân trang tự động cho bảng dữ liệu */
.table-pager {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  flex-wrap: wrap; margin: -.35rem 0 1.2rem; padding: .68rem .8rem;
  background: rgba(255,255,255,.82); border: 1px solid var(--border); border-radius: 11px;
}
.pager-size { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .82rem; }
.pager-size select { width: auto; min-width: 68px; padding: .3rem 1.6rem .3rem .55rem; font-size: .82rem; }
.pager-info { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.pager-nav, .pager-pages { display: flex; align-items: center; gap: .28rem; }
.pager-btn {
  min-width: 34px; height: 34px; padding: 0 .45rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
  color: var(--text-2); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.pager-btn:hover:not(:disabled) { color: var(--primary); border-color: #a5b4fc; background: var(--primary-soft); }
.pager-btn.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-btn .ui-icon { width: .95rem; height: .95rem; }
.pager-prev .ui-icon { transform: rotate(180deg); }
.pager-dots { min-width: 22px; text-align: center; color: var(--muted); }

@media (max-width: 1023px) {
  .app-topbar, .sidebar-collapse { display: none; }
  .sidebar { overflow: hidden; }
  .sidebar .sb-foot { display: block; }
  .has-sidebar .main, body.sidebar-collapsed .main { width: 100%; }
  body.sidebar-collapsed .sidebar { width: 252px; flex-basis: 252px; }
  body.sidebar-collapsed .sb-brand-text,
  body.sidebar-collapsed .sb-user-info { display: flex; }
  body.sidebar-collapsed .sb-brand-text { flex-direction: column; }
  body.sidebar-collapsed .sb-section { display: block; }
  body.sidebar-collapsed .sb-label { display: inline; }
  body.sidebar-collapsed .sb-actions { display: flex; }
  body.sidebar-collapsed .sb-brand { justify-content: flex-start; padding: 1rem 1.1rem .9rem; }
  body.sidebar-collapsed .sb-nav { padding: .9rem .7rem; }
  body.sidebar-collapsed .sb-link { justify-content: flex-start; padding: .52rem .65rem; }
  body.sidebar-collapsed .sb-foot { padding: .9rem 1rem 1.1rem; }
  body.sidebar-collapsed .sb-user { justify-content: flex-start; margin-bottom: .7rem; }
}
@media (max-width: 860px) {
  .guest-footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .topbar-inner { padding: .5rem 1rem; }
  .guest-nav { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; margin: 0; flex-wrap: nowrap; }
  .guest-nav a { white-space: nowrap; }
  .guest-login {
    background:
      linear-gradient(rgba(242,248,255,.82), rgba(242,248,255,.92)),
      url('/assets/images/hero-speaking.webp') 62% center / cover fixed;
  }
  .guest-login main.container { min-height: 570px; padding: 2rem 1rem; }
  .guest-login .auth-card { margin: 0 auto; padding: 1.5rem; }
  .table-pager { justify-content: center; }
  .pager-info { width: 100%; text-align: center; order: 3; }
}
@media (max-width: 560px) {
  .guest-footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .guest-footer-grid, .guest-footer-bottom { padding-left: 1rem; padding-right: 1rem; }
  .pager-size { width: 100%; justify-content: center; }
  .pager-pages .pager-btn:nth-of-type(n+8) { display: none; }
}

/* Lịch học viên dạng danh sách lớp học trực quan */
.class-schedule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.class-session-card {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1rem;
  padding: 1rem; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.class-session-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, #0a5faf, #01468c);
}
.class-session-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #cfe0f4; }
.class-session-card.is-today { border-color: #93c5fd; background: linear-gradient(135deg, #fff, #f0f9ff); }
.class-date {
  width: 68px; min-height: 74px; align-self: start; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: #eaf2fc; color: #01468c;
  border: 1px solid #cfe0f4; border-radius: 12px; line-height: 1.1;
}
.class-date strong { font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.class-date span { margin-top: .3rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.class-session-main { min-width: 0; }
.class-session-top { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .35rem; }
.class-course {
  display: inline-flex; align-items: center; min-height: 23px; padding: .1rem .5rem;
  border-radius: 999px; color: #0f766e; background: #ecfdf5; border: 1px solid #99f6e4;
  font-size: .7rem; font-weight: 700;
}
.class-session-main h2 { margin: 0 0 .4rem; font-size: 1rem; line-height: 1.35; }
.class-session-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; color: var(--muted); font-size: .8rem; }
.class-session-meta span { display: inline-flex; align-items: center; gap: .28rem; }
.class-session-meta .ui-icon { color: #0a5faf; }
.class-session-content { margin: .6rem 0 0; color: var(--text-2); font-size: .86rem; line-height: 1.55; }
.class-session-note { margin: .5rem 0 0; color: var(--muted); font-size: .78rem; }
@media (max-width: 820px) { .class-schedule-grid { grid-template-columns: 1fr; } }
@media (max-width: 460px) {
  .class-session-card { grid-template-columns: 58px minmax(0, 1fr); gap: .75rem; padding: .8rem; }
  .class-date { width: 54px; min-height: 64px; }
  .class-date strong { font-size: 1.3rem; }
}

/* ============================================================
   v19 — Mobile-first app shell + optical badge alignment
   ============================================================ */

/* Font Inter nhìn cao hơn tâm hình học một chút: bù padding để chữ nằm giữa pill. */
.badge {
  line-height: 1.2;
  padding: .18rem .58rem .08rem;
}
.class-course {
  line-height: 1.2;
  padding: .16rem .5rem .06rem;
}

@media (max-width: 1023px) {
  body.nav-open { overflow: hidden; }

  /* Header dùng trước cho điện thoại: nút menu luôn là phần tử đầu tiên và đủ 44px. */
  .mobilebar {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center; gap: .6rem; min-height: 58px;
    padding: .45rem max(.7rem, env(safe-area-inset-right)) .45rem max(.7rem, env(safe-area-inset-left));
    z-index: 64;
  }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0; padding: 0;
    color: #01468c; background: #fff; border-color: #cfe0f4;
    box-shadow: 0 2px 8px rgba(15,23,42,.08);
  }
  .nav-toggle .ui-icon { width: 21px; height: 21px; }
  .mobilebar-title {
    padding: .16em 0 .12em; text-align: left; font-size: 1rem;
    font-weight: 700; line-height: 1.35;
  }
  .mobilebar-tools { display: flex; align-items: center; justify-content: flex-end; gap: .3rem; }
  .mobilebar-user { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
  .mobilebar-user:hover { text-decoration: none; }
  .mobilebar-user .sb-avatar { width: 34px; height: 34px; font-size: .82rem; }
  .mobilebar-langs {
    gap: 3px; padding: 0; border: 0; border-radius: 0;
    background: transparent; overflow: visible;
  }
  .mobilebar-langs a {
    position: relative; width: 28px; height: 28px; border: 1px solid #e2e8f0;
    border-radius: 8px; background: #fff; overflow: visible;
  }
  .mobilebar-langs a.on { background: #fff; border-color: #93c5fd; box-shadow: none; }
  .mobilebar-langs img { width: 21px; height: 21px; }
  .mobilebar-logout {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    color: #b42318; background: #fff; border: 1px solid #fecaca; border-radius: 10px;
  }
  .mobilebar-logout:hover { color: #991b1b; background: #fef2f2; text-decoration: none; }
  .mobilebar-logout .ui-icon { width: 18px; height: 18px; }

  /* Drawer rộng theo màn hình, nội dung sắc nét; nền sau chỉ tối chứ không làm mờ menu. */
  body.has-sidebar .sidebar,
  body.has-sidebar.sidebar-collapsed .sidebar {
    left: 0; width: min(88vw, 320px); max-width: 320px; flex-basis: min(88vw, 320px);
    z-index: 80; transform: translateX(-105%);
    transition: transform .22s ease; box-shadow: 10px 0 34px rgba(15,23,42,.28);
  }
  body.nav-open .sidebar { left: 0; transform: translateX(0); }
  .sb-backdrop { z-index: 70; background: rgba(15,23,42,.58); backdrop-filter: none; }
  .sidebar .sb-brand,
  body.sidebar-collapsed .sidebar .sb-brand {
    min-height: 66px; justify-content: flex-start; padding: .75rem 3.7rem .75rem .85rem;
  }
  .sidebar .sb-brand img { height: 40px; width: auto; max-width: 60px; }
  .sidebar .sb-nav { padding: .7rem .65rem; overscroll-behavior: contain; }
  .sidebar .sb-link,
  body.sidebar-collapsed .sidebar .sb-link {
    min-height: 44px; justify-content: flex-start; padding: .6rem .7rem;
  }
  .sidebar .sb-foot { display: none; }
  .sidebar .sb-nav { padding-bottom: calc(5.2rem + env(safe-area-inset-bottom)); }

  /* Khi drawer mở, hamburger nổi trên lớp tối và nằm ngay mép phải của drawer. */
  body.nav-open .mobilebar {
    z-index: 90; background: transparent; border-color: transparent;
    box-shadow: none; backdrop-filter: none; pointer-events: none;
  }
  body.nav-open .mobilebar-title,
  body.nav-open .mobilebar-tools { opacity: 0; }
  body.nav-open .nav-toggle {
    position: fixed; top: 11px; left: calc(min(88vw, 320px) - 52px);
    z-index: 91; pointer-events: auto; color: #012f66;
    border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.96);
    box-shadow: 0 5px 16px rgba(15,23,42,.22);
  }

  /* Các nút và bộ lọc đã gom từ nội dung vẫn hiện trên mobile. */
  .app-topbar {
    display: none; min-height: 0; padding: .5rem .75rem;
    position: sticky; top: 58px; z-index: 37;
    background: rgba(255,255,255,.97); border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 14px rgba(15,23,42,.04);
  }
  .app-topbar.has-actions { display: flex; }
  .app-topbar-heading, .app-user-tools { display: none; }
  .app-topbar-actions {
    width: 100%; justify-content: flex-start; flex-wrap: nowrap; gap: .45rem;
    overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none;
  }
  .app-topbar-actions::-webkit-scrollbar { display: none; }
  .app-topbar-actions > *, .app-topbar-actions .btn { flex: 0 0 auto; }
  .app-topbar-actions .btn { min-height: 40px; }
  .app-topbar-actions form { display: flex; align-items: center; gap: .4rem; }
  .app-topbar-actions select,
  .app-topbar-actions input[type=text],
  .app-topbar-actions input[type=date] { width: auto; min-height: 40px; }

  /* Kích thước chạm và khoảng thở ưu tiên màn hình nhỏ. */
  .has-sidebar .container {
    padding: .9rem .85rem calc(5.6rem + env(safe-area-inset-bottom));
  }
  .has-sidebar .card { padding: .95rem; margin-bottom: .85rem; border-radius: 14px; }
  .has-sidebar .grid { gap: .75rem; }
  .has-sidebar input[type=text], .has-sidebar input[type=email],
  .has-sidebar input[type=password], .has-sidebar input[type=number],
  .has-sidebar input[type=date], .has-sidebar input[type=time],
  .has-sidebar input[type=datetime-local], .has-sidebar select,
  .has-sidebar textarea { min-height: 44px; font-size: 16px; }
  .has-sidebar textarea { min-height: 110px; }
  .has-sidebar .btn { min-height: 40px; }
  .hero-panel { padding: 1rem; border-radius: 14px; }
  .hp-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; }
  .hp-chip { min-width: 0; padding: .65rem .7rem; }
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .qa { min-width: 0; min-height: 52px; padding: .65rem .7rem; }
}

@media (max-width: 520px) {
  .mobilebar { gap: .42rem; padding-left: .55rem; padding-right: .55rem; }
  .mobilebar-title { font-size: .96rem; }
  .mobilebar-tools { gap: .2rem; }
  .mobilebar-user .sb-avatar { width: 32px; height: 32px; }
  .mobilebar-langs a { width: 25px; height: 27px; }
  .mobilebar-langs img { width: 20px; height: 20px; }
  .mobilebar-logout { width: 34px; height: 34px; }
  .has-sidebar .container { padding-left: .7rem; padding-right: .7rem; }
  .has-sidebar .card { padding: .82rem; }
  .hero-panel h1 { font-size: 1.2rem; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .qa { align-items: center; font-size: .82rem; line-height: 1.3; }
  .table-pager { padding: .6rem; gap: .55rem; }
  .pager-nav { max-width: 100%; overflow-x: auto; }
  .profile-avatar { align-items: flex-start; }
  .profile-avatar-preview { width: 64px; height: 64px; flex-basis: 64px; }
}

/* ============================================================
   v24 — Mobile content audit: học viên/giáo viên
   ============================================================ */
@media (max-width: 760px) {
  .has-sidebar .container > h1 { font-size: 1.18rem; line-height: 1.3; margin-bottom: .8rem; }
  .has-sidebar .container > h2 {
    font-size: 1rem; line-height: 1.35; margin: 1.15rem 0 .65rem;
  }
  .has-sidebar .container > h2:first-child { margin-top: 0; }
  .has-sidebar .card > h2:first-child { font-size: 1rem; line-height: 1.35; }
  .has-sidebar .alert { padding: .72rem .8rem; line-height: 1.5; }

  /* Inline width từ desktop (VietQR/reading) không được thắng bố cục mobile. */
  .has-sidebar .reading-block { grid-template-columns: minmax(0, 1fr) !important; gap: .75rem; }
  .has-sidebar .passage-panel { max-height: min(52vh, 360px); padding: .85rem; }

  /* Bài thi và phần xem đáp án không bị ép tiêu đề/điểm trên một hàng. */
  .question-card { padding: .9rem; border-radius: 13px; }
  .question-card .q-head {
    align-items: flex-start; flex-direction: column; gap: .25rem;
  }
  .question-card .q-head .muted { line-height: 1.4; }
  .q-content { overflow-wrap: anywhere; line-height: 1.6; }
  .option-row { padding: .55rem .45rem; gap: .5rem; }
  .option-row label { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
  .exam-layout { gap: .75rem; }
  .exam-side .card { padding: .75rem; }
  .q-nav { max-height: 132px; overflow-y: auto; }

  /* Stat card theo lưới 2x2 thay vì một cột quá dài. */
  .has-sidebar .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .has-sidebar .stat { min-width: 0; padding: .8rem .8rem .72rem; }
  .has-sidebar .stat .stat-value { font-size: 1.25rem; overflow-wrap: anywhere; }
  .has-sidebar .stat .stat-label { line-height: 1.4; }

  /* Form/action không tràn viewport. */
  .has-sidebar .form-row { gap: .65rem; }
  .has-sidebar .form-row > div { min-width: min(100%, 160px); }
  .has-sidebar .actions { max-width: 100%; }
  .has-sidebar img { max-width: 100%; height: auto; }
  .trial-cred { gap: .55rem; padding: .75rem; }
}

@media (max-width: 390px) {
  .mobilebar-title { font-size: .9rem; }
  .mobilebar-user .sb-avatar { width: 30px; height: 30px; }
  .mobilebar-langs { padding: 0; }
  .mobilebar-langs a { width: 23px; height: 26px; }
  .mobilebar-logout { width: 32px; height: 32px; }
  .has-sidebar .container { padding-left: .55rem; padding-right: .55rem; }
  .has-sidebar .card { padding: .72rem; }
  .profile-avatar { flex-direction: column; }
  table.resp td { grid-template-columns: minmax(72px, 29%) minmax(0, 1fr); padding-inline: .6rem; gap: .5rem; }
  .tabbar .tab { flex-basis: 72px; }
}

/* ===== Phổ điểm (histogram một chuỗi, dùng token hệ thống) ===== */
.histo-wrap { margin: .9rem 0 1.1rem; }
.histo { display: flex; align-items: flex-end; gap: 6px; height: 190px; }
.histo .hb { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.histo .hb .cnt { font-size: .78rem; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.histo .hb .bar { width: 100%; max-width: 52px; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 2px; transition: background .15s; }
.histo .hb:hover .bar { background: var(--primary-dark); }
.histo .hb .bar.zero { background: var(--border); }
.histo-x { display: flex; gap: 6px; margin-top: 6px; }
.histo-x span { flex: 1 1 0; min-width: 0; text-align: center; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.histo-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .6rem; color: var(--muted); font-size: .9rem; }
.histo-stats strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* ============================================================
   v30 — Landing: chương trình mới, học thử, học liệu và đánh giá
   ============================================================ */
:root {
  --brand-gold: #f5b60a;
  --brand-gold-dark: #c68802;
  --brand-gold-soft: #fff8e3;
  --brand-gold-border: #f3d583;
}

.program-spotlight {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center;
  gap: 1rem; margin-top: 1rem; padding: 1rem 1.1rem;
  border: 1px solid var(--brand-gold-border); border-radius: 18px;
  background:
    radial-gradient(circle at 86% 18%, rgba(244,179,35,.2), transparent 22%),
    linear-gradient(120deg, #fffdf4 0%, #fff8df 56%, #f0fdfa 100%);
  box-shadow: 0 10px 30px rgba(180,122,0,.08);
}
.program-spotlight .program-icon {
  width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 17px; color: #fff; background: linear-gradient(145deg, #f5b60a, #e79a0a);
  box-shadow: 0 8px 18px rgba(228,155,10,.24);
}
.program-spotlight .program-icon .ui-icon { width: 28px; height: 28px; }
.program-copy h3 { margin: 0 0 .22rem; font-size: 1.05rem; }
.program-copy p { margin: 0; color: #526174; font-size: .9rem; }
.program-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.program-tags span {
  display: inline-flex; align-items: center; min-height: 25px; padding: .18rem .55rem;
  border-radius: 999px; border: 1px solid #f1d47c; background: rgba(255,255,255,.76);
  color: #855b05; font-size: .7rem; font-weight: 700;
}

.section-gold-wash {
  background:
    radial-gradient(circle at 12% 18%, rgba(250,204,21,.13), transparent 23%),
    radial-gradient(circle at 92% 78%, rgba(20,184,166,.09), transparent 22%),
    linear-gradient(180deg, #fff 0%, #fffdf5 100%);
}
.experience-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr); gap: 1rem; }
.trial-preview {
  min-height: 360px; position: relative; overflow: hidden; border-radius: 22px;
  background: #012f66 url('/assets/images/hero-speaking.webp') center/cover no-repeat;
  box-shadow: 0 18px 42px rgba(30,58,138,.2);
}
.trial-preview::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15,23,42,.88) 0%, rgba(15,23,42,.62) 46%, rgba(15,23,42,.08) 100%);
}
.trial-preview-content {
  position: relative; z-index: 1; min-height: 360px; max-width: 430px; padding: 2rem;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; color: #fff;
}
.trial-play {
  width: 58px; height: 58px; margin-bottom: 1rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: #172554;
  background: linear-gradient(145deg, #fff4bd, #f5b60a); box-shadow: 0 0 0 9px rgba(255,255,255,.12);
}
.trial-play .ui-icon { width: 28px; height: 28px; }
.trial-preview .demo-kicker { color: #fde68a; font-size: .74rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.trial-preview h3 { color: #fff; margin: .4rem 0 .45rem; font-size: 1.45rem; }
.trial-preview p { margin: 0 0 1rem; color: #e2e8f0; line-height: 1.65; }
.trial-preview .btn { background: #fff; border-color: #fff; color: #01468c; }

.learning-panel { display: grid; gap: .7rem; }
.learning-item {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: .8rem; align-items: center;
  padding: .9rem 1rem; border: 1px solid #e5e7eb; border-radius: 16px; background: rgba(255,255,255,.9);
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
}
.learning-item .learning-icon {
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; color: #0a5faf; background: #eaf2fc; border: 1px solid #cfe0f4;
}
.learning-item:nth-child(2) .learning-icon { color: #0f766e; background: #ecfdf5; border-color: #99f6e4; }
.learning-item:nth-child(3) .learning-icon { color: #9a6700; background: #fff8df; border-color: #f5d675; }
.learning-item .ui-icon { width: 23px; height: 23px; }
.learning-item h3 { margin: 0 0 .18rem; font-size: .95rem; }
.learning-item p { margin: 0; color: #64748b; font-size: .84rem; line-height: 1.5; }

.assessment-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.assessment-step {
  position: relative; min-height: 145px; padding: 1rem; border: 1px solid #e2e8f0;
  border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(15,23,42,.045);
}
.assessment-step::after {
  content: ""; position: absolute; top: 25px; right: -.55rem; width: .8rem; height: 2px; background: #f4c84d;
}
.assessment-step:last-child::after { display: none; }
.assessment-step .step-no { color: #b77900; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.assessment-step h3 { margin: .45rem 0 .3rem; font-size: .92rem; }
.assessment-step p { margin: 0; color: #64748b; font-size: .8rem; line-height: 1.48; }

.voucher-band {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  margin-top: 1rem; padding: 1rem 1.1rem; color: #4a3402;
  border: 1px solid #f2cc55; border-radius: 18px;
  background: linear-gradient(120deg, #fffbdf, #fff0a8 58%, #fff8df);
  box-shadow: 0 10px 28px rgba(180,122,0,.1);
}
.voucher-icon {
  width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; border-radius: 16px; background: linear-gradient(145deg, #e7a414, #c98500);
}
.voucher-icon .ui-icon { width: 27px; height: 27px; }
.voucher-band h3 { margin: 0 0 .18rem; color: #5d4000; font-size: 1rem; }
.voucher-band p { margin: 0; color: #775b18; font-size: .86rem; line-height: 1.5; }
.voucher-band .btn { white-space: nowrap; background: #fff; border-color: #d69b12; color: #7c5700; }

.register-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
.register-form-grid .form-span-2 { grid-column: 1 / -1; }
.form-card select { width: 100%; }
.form-helper { margin: -.35rem 0 .65rem; color: #64748b; font-size: .73rem; line-height: 1.45; }
.registration-note { min-width: 220px; line-height: 1.55; }

@media (max-width: 900px) {
  .experience-grid { grid-template-columns: 1fr; }
  .learning-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .learning-item { grid-template-columns: 1fr; align-content: start; }
  .assessment-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assessment-step:nth-child(2)::after { display: none; }
}

@media (max-width: 640px) {
  .program-spotlight, .voucher-band { grid-template-columns: 48px minmax(0, 1fr); padding: .85rem; }
  .program-spotlight .program-icon, .voucher-icon { width: 48px; height: 48px; border-radius: 14px; }
  .program-spotlight > .btn, .voucher-band > .btn { grid-column: 1 / -1; width: 100%; }
  .trial-preview, .trial-preview-content { min-height: 320px; }
  .trial-preview-content { padding: 1.25rem; }
  .trial-preview h3 { font-size: 1.2rem; }
  .learning-panel, .assessment-flow { grid-template-columns: 1fr; }
  .learning-item { grid-template-columns: 44px minmax(0, 1fr); }
  .assessment-step { min-height: 0; }
  .assessment-step::after { display: none; }
  .register-form-grid { grid-template-columns: 1fr; }
  .register-form-grid .form-span-2 { grid-column: auto; }
}

/* ===== v31: review đáp án sau thi — phân biệt RÕ "bạn chọn sai" vs "đáp án đúng"
   (khách báo 14/08: trước đây cả hai cùng icon tick, dễ nhầm) ===== */
.review-option { border-radius: 10px; padding: .45rem .6rem; margin: .3rem 0; display: flex; gap: .55rem; align-items: flex-start; border: 1px solid transparent; }
.review-option .opt-mark { flex: 0 0 22px; width: 22px; height: 22px; margin-top: .05rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; line-height: 1; background: transparent; color: transparent; }
.review-option label { display: inline; }
.review-option.is-correct { background: var(--success-bg); border-color: var(--success-bd); }
.review-option.is-correct .opt-mark { background: var(--success); color: #fff; }
.review-option.is-correct .opt-text { color: var(--success); font-weight: 650; }
.review-option.is-wrong { background: var(--error-bg); border-color: var(--error-bd); }
.review-option.is-wrong .opt-mark { background: var(--error); color: #fff; }
.review-option.is-wrong .opt-text { color: var(--error); font-weight: 650; text-decoration: line-through; }
.opt-tag { display: inline-block; margin-left: .5rem; padding: .08rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.opt-tag-green { background: var(--success); color: #fff; }
.opt-tag-red { background: var(--error); color: #fff; }

/* ===== v32: BLOG / TIN TỨC — trang công khai /tin-tuc.php + /bai-viet.php
   Lưới card kiểu tạp chí: cover 16:10, chuyên mục, ngày + lượt xem, mô tả ngắn.
   (.eyebrow/.btn-gold vốn nằm trong CSS inline của landing nên định nghĩa lại ở đây
   cho các trang PHP dùng style.css thuần.) ===== */
.blog-hero { text-align: center; max-width: 46rem; margin: .8rem auto 1.6rem; }
.blog-hero .eyebrow {
  display: inline-flex; align-items: center; justify-content: center; min-height: 30px; line-height: 1;
  padding: .3rem .85rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
  background: #fff8e3; color: #8a5e00; border: 1px solid #f3d583;
}
.blog-hero h1 { font-size: 1.9rem; letter-spacing: -.02em; margin: .7rem 0 .4rem; }
.blog-hero > p { color: var(--muted); margin: 0 auto 1.1rem; max-width: 38rem; }
.blog-search { display: flex; gap: .5rem; max-width: 30rem; margin: 0 auto; }
.blog-search input[type="search"] { flex: 1; margin: 0; }
.blog-search .btn { flex: 0 0 auto; }

.blog-filters { display: flex; gap: .6rem 1.2rem; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 0 0 1.3rem; }
.blog-cats, .blog-sort { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.cat-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .34rem .85rem; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--card); color: var(--text-2);
  font-size: .88rem; font-weight: 550; line-height: 1.2; transition: border-color .15s, background .15s;
}
.cat-chip:hover { text-decoration: none; border-color: var(--primary); color: var(--primary); }
.cat-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.cat-chip span { font-size: .76rem; opacity: .75; }

.blog-featured {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; overflow: hidden; margin-bottom: 1.6rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md);
  color: inherit; transition: box-shadow .18s, transform .18s;
}
.blog-featured:hover { text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.bf-cover { position: relative; min-height: 280px; }
.bf-cover img, .post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-badge {
  position: absolute; top: 14px; left: 14px; padding: .3rem .8rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 48%, var(--gold-deep)); color: var(--on-gold);
  font-size: .78rem; font-weight: 700; box-shadow: 0 2px 10px rgba(245, 182, 10, .4);
}
.bf-body { padding: 1.6rem 1.8rem; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; justify-content: center; }
.bf-body h2 { margin: 0; font-size: 1.45rem; letter-spacing: -.015em; line-height: 1.3; }
.blog-featured:hover h2, .post-card:hover h3 { color: var(--primary); }

.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }
.post-card {
  display: flex; flex-direction: column; overflow: hidden; color: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s;
}
.post-card:hover { text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.post-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--primary-soft); }
.post-cover img { transition: transform .35s ease; }
.post-card:hover .post-cover img { transform: scale(1.045); }
.post-cover-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(420px 220px at 80% -10%, rgba(245, 182, 10, .25), transparent 60%),
    linear-gradient(160deg, #011e42 0%, #01468c 100%);
}
.post-cover-fallback img { width: 34%; max-width: 120px; height: auto; object-fit: contain; opacity: .95; }
.post-cat {
  display: inline-flex; align-items: center; padding: .22rem .7rem; border-radius: 999px; line-height: 1.3;
  background: #fff8e3; color: #8a5e00; border: 1px solid #f3d583; font-size: .76rem; font-weight: 700;
}
a.post-cat:hover { text-decoration: none; background: #f5b60a; color: var(--on-gold); }
.post-cat-overlay { position: absolute; top: 12px; left: 12px; box-shadow: 0 1px 6px rgba(16, 24, 40, .2); }
.post-body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.15rem 1.2rem; flex: 1; }
.post-meta { display: flex; gap: .45rem; flex-wrap: wrap; color: var(--muted); font-size: .84rem; margin: 0; }
.post-body h3 { margin: 0; font-size: 1.04rem; line-height: 1.4; }
.post-excerpt {
  color: var(--muted); font-size: .9rem; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-more { margin-top: auto; padding-top: .35rem; color: var(--primary); font-weight: 650; font-size: .88rem; }

.blog-pager { display: flex; gap: .4rem; justify-content: center; align-items: center; margin: 1.8rem 0 .6rem; flex-wrap: wrap; }
.blog-pager .pg {
  min-width: 38px; height: 38px; padding: 0 .6rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card); color: var(--text-2); font-weight: 600;
}
.blog-pager .pg:hover { text-decoration: none; border-color: var(--primary); color: var(--primary); }
.blog-pager .pg.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.blog-pager .pg-gap { border: 0; background: none; color: var(--muted); }

/* Chi tiết bài viết */
.post-detail { max-width: 860px; margin: 0 auto; }
.post-breadcrumb { display: flex; gap: .45rem; flex-wrap: wrap; color: var(--muted); font-size: .86rem; margin: .4rem 0 1.1rem; }
.post-breadcrumb a { color: var(--muted); }
.post-breadcrumb a:hover { color: var(--primary); }
.post-breadcrumb .pb-current { color: var(--text-2); max-width: 32ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-head h1 { font-size: 1.85rem; line-height: 1.25; letter-spacing: -.02em; margin: .55rem 0 .45rem; }
.post-head .post-meta { font-size: .92rem; }
.post-hero-img { margin: 1.2rem 0 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.post-hero-img img { width: 100%; max-height: 460px; object-fit: cover; display: block; }
.post-content { margin-top: 1.5rem; font-size: 1.02rem; line-height: 1.75; color: var(--text-2); }
.post-content p { margin: 0 0 1.05rem; }
.post-content h2 { font-size: 1.3rem; margin: 1.9rem 0 .7rem; color: var(--text); letter-spacing: -.01em; }
.post-content h3 { font-size: 1.12rem; margin: 1.5rem 0 .55rem; color: var(--text); }
.post-content ul, .post-content ol { margin: 0 0 1.05rem; padding-left: 1.4rem; }
.post-content li { margin: .3rem 0; }
.post-content blockquote {
  margin: 1.2rem 0; padding: .85rem 1.15rem; border-left: 4px solid #f5b60a;
  background: #fff8e3; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: #713f12;
}
.post-content a { font-weight: 600; }
.post-figure { margin: 1.3rem 0; }
.post-figure img { width: 100%; border-radius: var(--radius); display: block; }
.post-figure figcaption { text-align: center; color: var(--muted); font-size: .85rem; margin-top: .45rem; }

.post-cta {
  display: flex; gap: 1rem 1.4rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  margin: 2rem 0; padding: 1.3rem 1.5rem; border-radius: var(--radius); color: #f8fafc;
  background: radial-gradient(520px 260px at 85% -20%, rgba(245, 182, 10, .22), transparent 60%),
    linear-gradient(160deg, #011e42 0%, #01468c 100%);
}
.post-cta strong { font-size: 1.06rem; }
.post-cta p { margin: .3rem 0 0; color: #dbeafe; font-size: .92rem; max-width: 34rem; }
.post-cta-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.post-cta .btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 48%, var(--gold-deep));
  color: var(--on-gold); border: 1px solid #d9a208; font-weight: 650; box-shadow: 0 2px 10px rgba(245, 182, 10, .4);
}
.post-cta .btn-gold:hover { filter: brightness(1.06); }
.post-cta .btn-outline { background: transparent; color: #f8fafc; border-color: #93c5fd; }
.post-cta .btn-outline:hover { background: rgba(255, 255, 255, .08); border-color: #f5b60a; color: #f5b60a; }

.post-related { margin-top: 1.4rem; }
.post-related > h2 { font-size: 1.25rem; margin: 0 0 .9rem; }
.post-back { margin: 1.6rem 0 .6rem; text-align: center; }

@media (max-width: 1023px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-featured { grid-template-columns: 1fr; }
  .bf-cover { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-hero h1 { font-size: 1.5rem; }
  .blog-filters { flex-direction: column; align-items: flex-start; }
  .bf-body { padding: 1.15rem 1.2rem 1.3rem; }
  .bf-body h2 { font-size: 1.2rem; }
  .post-head h1 { font-size: 1.4rem; }
  .post-cta { padding: 1.1rem 1.2rem; }
  .post-cta-actions { width: 100%; }
  .post-cta-actions .btn { flex: 1; justify-content: center; }
}

/* ============================================================
   v33 — Header công khai DÙNG CHUNG với trang chủ (.lp-top) và
   trang Tin tức phiên bản tạp chí (hero tối + vàng gold thương hiệu).
   Các rule .lp-* dưới đây trùng giá trị với CSS inline của
   index.html / en.html nên landing không đổi giao diện, còn các
   trang PHP (tin tức, bài viết, đăng nhập, test trình độ...) nay
   render y hệt menu trang chủ.
   ============================================================ */
:root {
  --gold: #f5b60a;
  --gold-2: #8a5e00;
  --gold-soft: #fff8e3;
  --gold-bd: #f3d583;
  --blue: #0a5faf;
  --blue-2: #01468c;
  --ink: #011e42;
  --ink-2: #01468c;
}

/* ---- Thanh điều hướng công khai ---- */
.lp-top {
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50;
}
.lp-top .inner {
  max-width: var(--site-width); margin: 0 auto; padding: 0 1.5rem; min-height: 62px;
  display: flex; align-items: center; gap: 1rem; position: relative;
}
/* Khối thương hiệu nằm ngang: huy hiệu trái | tên + slogan phải.
   Ảnh chỉ còn phần huy hiệu (cánh + địa cầu + sách), phần chữ dựng bằng HTML
   nên co giãn được, đọc được cho SEO và tự đổi màu theo nền sáng/tối. */
.lp-brand { display: inline-flex; align-items: center; gap: .72rem; color: var(--text); font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.lp-brand:hover { text-decoration: none; }
.lp-brand img { height: 46px; width: auto; max-width: 80px; object-fit: contain; display: block; }
/* Ba dòng xếp đúng thứ tự trong logo: GIA SƯ ENGLISH · CHẮP CÁNH · slogan */
.lp-brand .brand-text { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.06; }
.lp-brand .brand-name { display: block; font-size: .64rem; font-weight: 700; color: var(--navy); letter-spacing: .22em; }
.lp-brand .brand-name em {
  display: block; font-style: normal; font-size: 1.26rem; font-weight: 800;
  letter-spacing: .09em; color: var(--gold-ink); margin-top: .12em;
}
.lp-brand .brand-text small {
  margin-top: .22em; font-size: .53rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-2);
}
.lp-menu { display: flex; gap: .2rem; flex: 1; justify-content: center; flex-wrap: wrap; }
.lp-menu a { padding: .4rem .8rem; border-radius: 999px; color: var(--text-2); font-weight: 500; font-size: .93rem; }
.lp-menu a:hover { background: var(--gold-soft); color: var(--gold-2); text-decoration: none; }
.lp-menu a.on {
  background: var(--gold-soft); color: var(--gold-2); font-weight: 650;
  box-shadow: inset 0 0 0 1px var(--gold-bd);
}
.lp-menu-toggle {
  display: none; width: 38px; height: 38px; padding: 0; flex: 0 0 auto;
  align-items: center; justify-content: center; color: #012f66; background: #fff;
  border: 1px solid #cfe0f4; border-radius: 10px; cursor: pointer;
}
.lp-menu-toggle .ui-icon { width: 20px; height: 20px; }
.lp-top .btn-gold { flex: 0 0 auto; white-space: nowrap; }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 48%, var(--gold-deep));
  color: var(--on-gold); border: 1px solid #d9a208; font-weight: 650;
  box-shadow: 0 2px 10px rgba(245, 182, 10, .4);
}
.btn-gold:hover { filter: brightness(1.06); text-decoration: none; }
.lp-top .lang-switch {
  gap: 4px; padding: 0; overflow: visible; background: transparent; border: 0; border-radius: 0;
}
.lp-top .lang-switch a {
  width: 32px; height: 32px; border: 1px solid #e2e8f0; border-radius: 9px;
  background: #f8fafc; box-shadow: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.lp-top .lang-switch a:hover { background: #fff; border-color: #93c5fd; transform: translateY(-1px); }
.lp-top .lang-switch a.on { background: #fff; border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(1, 70, 140, .12); }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; overflow: hidden; pointer-events: none; }
.scroll-progress-bar {
  width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, #01468c, #0a5faf, var(--gold));
  box-shadow: 0 0 8px rgba(1, 70, 140, .42); will-change: transform;
}
/* Trang đăng nhập: nền ảnh cũ tính theo chiều cao header mới (62px) */
.guest-login .lp-top { background: rgba(255, 255, 255, .9); }
.guest-login main.container { min-height: min(720px, calc(100vh - 62px)); }

@media (max-width: 900px) {
  .lp-brand { margin-right: auto; }
  .lp-menu-toggle { display: inline-flex; margin-right: 0; }
  .lp-menu {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 1px);
    padding: .55rem; background: rgba(255, 255, 255, .98); border: 1px solid #dbeafe;
    border-radius: 0 0 14px 14px; box-shadow: 0 16px 30px rgba(15, 23, 42, .12); z-index: 60;
  }
  .lp-top.menu-open .lp-menu { display: grid; grid-template-columns: repeat(2, 1fr); }
  .lp-menu a { text-align: center; }
}
@media (max-width: 640px) { .lp-brand .brand-text { display: none; } }
@media (max-width: 430px) {
  .lp-top .inner { gap: .45rem; padding: .35rem .7rem; }
  .lp-brand img { height: 38px; }
  .lp-top .lang-switch a { width: 31px; height: 31px; }
  .lp-top .btn-gold { padding: .42rem .58rem; font-size: .78rem; }
}

/* ---- Tin tức: tiêu đề bài viết đọc tự nhiên, không viết hoa toàn bộ ---- */
.blog-hero h1, .bf-body h2, .post-body h3, .post-head h1,
.post-content h2, .post-content h3, .post-related > h2, .blog-side h2 { text-transform: none; }

/* ---- Hero trang tin tức: dải tối + vàng gold như hero trang chủ ---- */
.blog-hero {
  position: relative; overflow: hidden; text-align: center; max-width: none;
  margin: 0 0 1.5rem; padding: 2.6rem 1.5rem 2.2rem; border-radius: 20px; color: #f8fafc;
  background:
    radial-gradient(760px 380px at 88% -20%, rgba(245, 182, 10, .22), transparent 62%),
    radial-gradient(520px 320px at -8% 120%, rgba(1, 70, 140, .35), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
}
.blog-hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 3px;
  background: linear-gradient(90deg, #01468c, #0a5faf, var(--gold));
}
.blog-hero .eyebrow {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 30px; line-height: 1;
  padding: .3rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 650;
  background: rgba(245, 182, 10, .14); color: var(--gold); border: 1px solid rgba(245, 182, 10, .42);
}
.blog-hero h1 {
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.3rem); letter-spacing: -.025em;
  margin: .85rem auto .5rem; max-width: 22ch; color: #fff; line-height: 1.2;
}
.blog-hero > p, .blog-hero-inner > p { color: #dbeafe; margin: 0 auto 1.3rem; max-width: 40rem; font-size: 1.01rem; }
.blog-search { display: flex; gap: .5rem; max-width: 34rem; margin: 0 auto; }
.blog-search .bs-field {
  flex: 1; display: flex; align-items: center; gap: .5rem; padding: 0 .5rem 0 .85rem;
  background: rgba(255, 255, 255, .96); border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px; box-shadow: 0 6px 18px rgba(2, 6, 23, .25);
}
.blog-search .bs-field .ui-icon { width: 1.05rem; height: 1.05rem; color: var(--muted); flex: 0 0 auto; }
.blog-search input[type="search"] {
  flex: 1; margin: 0; border: 0; background: transparent; box-shadow: none;
  min-height: 44px; padding: 0; font-size: .95rem; color: var(--text);
}
.blog-search input[type="search"]:focus { outline: none; box-shadow: none; }
.blog-search .btn { flex: 0 0 auto; border-radius: 999px; padding-inline: 1.2rem; }
.blog-hero-stats {
  display: flex; gap: .5rem 1.6rem; justify-content: center; flex-wrap: wrap;
  margin: 1.3rem 0 0; color: #cbd5e1; font-size: .85rem;
}
.blog-hero-stats span { display: inline-flex; align-items: center; gap: .35rem; }
.blog-hero-stats strong { color: #fff; font-weight: 700; }
.blog-hero-stats .ui-icon { width: 1rem; height: 1rem; color: var(--gold); }

/* ---- Hàng lọc: thẻ trắng, chip vàng khi đang chọn ---- */
.blog-filters {
  display: flex; gap: .7rem 1.2rem; flex-wrap: wrap; align-items: center; justify-content: space-between;
  margin: 0 0 1.4rem; padding: .75rem .9rem; background: var(--card);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm);
}
.cat-chip {
  border-radius: 999px; border: 1px solid var(--border-strong); background: #fff; color: var(--text-2);
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.cat-chip:hover { border-color: var(--gold-bd); background: var(--gold-soft); color: var(--gold-2); }
.cat-chip.on {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 48%, var(--gold-deep)); color: var(--on-gold);
  border-color: #d9a208; box-shadow: 0 2px 10px rgba(245, 182, 10, .35); font-weight: 650;
}
.cat-chip.on span { opacity: .85; }
.blog-sort { position: relative; padding-left: 1.2rem; }
.blog-sort::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: var(--border); }

/* ---- Bài nổi bật ---- */
.blog-featured { border-radius: 18px; align-items: stretch; }
.blog-featured:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15, 23, 42, .14); }
.bf-cover { min-height: 320px; }
.bf-body { gap: .6rem; }
.bf-body h2 { font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); }
.blog-featured:hover h2, .post-card:hover h3 { color: var(--blue-2); }
.bf-body .post-excerpt { -webkit-line-clamp: 4; }
.post-more {
  display: inline-flex; align-items: center; gap: .35rem; color: var(--blue);
  transition: gap .16s ease, color .16s ease;
}
.blog-featured:hover .post-more, .post-card:hover .post-more { gap: .6rem; color: var(--blue-2); }

/* ---- Lưới card ---- */
.blog-grid { gap: 1.3rem; }
.post-card { border-radius: 16px; }
.post-card:hover { box-shadow: 0 16px 34px rgba(15, 23, 42, .13); border-color: #dbe7f5; }
.post-cover { background: #eaf2fc; }
.post-meta { align-items: center; gap: .35rem .95rem; font-size: .82rem; }
.post-meta .ui-icon { width: .95rem; height: .95rem; color: var(--muted); margin-right: .12rem; }
.post-meta > span { display: inline-flex; align-items: center; }
.post-body h3 { font-size: 1.06rem; font-weight: 650; letter-spacing: -.01em; }
.post-body { gap: .45rem; padding: 1.05rem 1.2rem 1.25rem; }

/* ---- Trạng thái rỗng + phân trang ---- */
.blog-grid + .blog-pager, .blog-pager { margin-top: 2rem; }
.blog-pager .pg { border-radius: 12px; }
.blog-pager .pg:hover { border-color: var(--gold-bd); background: var(--gold-soft); color: var(--gold-2); }
.blog-pager .pg.on {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 48%, var(--gold-deep));
  border-color: #d9a208; color: var(--on-gold);
}
.blog-empty {
  text-align: center; padding: 2.6rem 1.2rem; background: var(--card);
  border: 1px dashed var(--border-strong); border-radius: 16px; margin-bottom: 1.4rem;
}
.blog-empty .ui-icon { width: 2.2rem; height: 2.2rem; color: var(--gold-2); }
.blog-empty p { color: var(--muted); margin: .6rem 0 1rem; }

/* ---- CTA cuối trang tin tức ---- */
.blog-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap;
  margin: 2.2rem 0 .5rem; padding: 1.4rem 1.6rem; border-radius: 18px; color: #f8fafc;
  background: radial-gradient(520px 260px at 88% -20%, rgba(245, 182, 10, .22), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
}
.blog-cta strong { font-size: 1.08rem; }
.blog-cta p { margin: .3rem 0 0; color: #dbeafe; font-size: .92rem; max-width: 36rem; }
.blog-cta-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.blog-cta .btn-outline { background: transparent; color: #f8fafc; border-color: #93c5fd; }
.blog-cta .btn-outline:hover { background: rgba(255, 255, 255, .08); border-color: var(--gold); color: var(--gold); }

@media (max-width: 1023px) { .bf-cover { min-height: 0; } }
@media (max-width: 640px) {
  .blog-hero { padding: 2rem 1.1rem 1.8rem; border-radius: 16px; margin-inline: -.25rem; }
  .blog-search { flex-direction: column; }
  .blog-search .btn { width: 100%; justify-content: center; }
  .blog-filters { padding: .7rem; }
  .blog-sort { padding-left: 0; width: 100%; }
  .blog-sort::before { display: none; }
  .blog-cta { padding: 1.2rem; }
  .blog-cta-actions { width: 100%; }
  .blog-cta-actions .btn { flex: 1; justify-content: center; }
}
/* Ô tìm kiếm: bỏ giao diện search mặc định của trình duyệt, vòng focus rõ ràng */
.blog-search input[type="search"] { -webkit-appearance: none; appearance: none; }
.blog-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.blog-search .bs-field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(244, 179, 35, .35); }
.blog-hero .eyebrow .ui-icon { width: 1rem; height: 1rem; color: var(--gold); }
.blog-result-note {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: -.4rem 0 1.1rem; color: var(--muted); font-size: .9rem;
}
.blog-result-note strong { color: var(--text-2); }
.blog-result-note a { color: var(--blue); font-weight: 600; }

/* ============================================================
   v34 — Liên hệ nhanh ở MỌI trang + tin tức kiểu tạp chí
   (hero tràn viền, hàng lọc dính, card gọn, có cột phải)
   + trang bài viết có mục lục dính bên trái và form đặt lịch.
   ============================================================ */

/* ---- 4 nút liên hệ: cột nổi (desktop) + thanh đáy (mobile, trang khách) ---- */
/* Giữ ĐÚNG kiểu của landing: nút tròn nền gradient màu, icon trắng 31px,
   nhãn chữ hiện khi rê chuột. (Icon PNG là hình trắng nên nền phải có màu.) */
.floating-contact {
  position: fixed; right: 10px; bottom: 20px; z-index: 54;
  display: grid; width: 48px; gap: 10px; overflow: visible;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.floating-contact a {
  position: relative; width: 48px; height: 48px; min-height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: linear-gradient(180deg, #1da6ff, #087df2);
  color: #fff; overflow: visible; box-shadow: 0 6px 13px rgba(28, 17, 51, .28); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.floating-contact a img {
  display: block; width: 31px; height: 31px; object-fit: contain;
  animation: lp-contact-shake 1s infinite ease-in-out;
}
.floating-contact .fc-zalo,
.floating-contact .fc-call { background: linear-gradient(180deg, #159cff, #0077e8); }
.floating-contact .fc-test { background: linear-gradient(180deg, #ff1e36, #e90019); }
.floating-contact .fc-book { background: linear-gradient(180deg, #ff8126, #ff5b00); }
.floating-contact a > span:last-child {
  position: absolute; right: 58px; top: 50%; width: max-content; max-width: 220px;
  padding: .5rem .72rem; color: #fff; background: linear-gradient(135deg, #172554, #012f66);
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .2); font-size: .76rem; font-weight: 700;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(8px, -50%);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.floating-contact a > span:last-child::after {
  content: ""; position: absolute; right: -5px; top: 50%; width: 9px; height: 9px;
  background: #012f66; border-top: 1px solid rgba(255, 255, 255, .65); border-right: 1px solid rgba(255, 255, 255, .65);
  transform: translateY(-50%) rotate(45deg);
}
.floating-contact a:hover, .floating-contact a:focus-visible { transform: translateY(-3px); box-shadow: 0 9px 18px rgba(28, 17, 51, .32); }
.floating-contact a:hover > span:last-child,
.floating-contact a:focus-visible > span:last-child { opacity: 1; visibility: visible; transform: translateY(-50%); }
@keyframes lp-contact-shake {
  0%, 50%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-25deg); }
  20%, 40% { transform: rotate(25deg); }
}
@media (prefers-reduced-motion: reduce) { .floating-contact a img { animation: none; } }
.has-sidebar .floating-contact { bottom: 24px; }

.mobile-cta { display: none; }
.back-to-top {
  position: fixed; left: 16px; bottom: 18px; z-index: 54;
  width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  color: #01468c; background: rgba(255, 255, 255, .94); border: 1px solid #cfe0f4;
  border-radius: 999px; box-shadow: 0 10px 28px rgba(15, 23, 42, .16); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .2s, visibility .2s, transform .2s, background .15s;
}
.back-to-top .ui-icon { width: 20px; height: 20px; transform: rotate(-90deg); }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: #fff; }

@media (max-width: 760px) {
  .guest .floating-contact, .guest .back-to-top { display: none !important; }
  .has-sidebar .floating-contact { display: none; }
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 0;
    padding: 0 0 env(safe-area-inset-bottom); background: transparent;
    box-shadow: 0 -8px 22px rgba(15, 23, 42, .12);
  }
  .mobile-cta a {
    flex: 1; min-width: 0; min-height: 52px; padding: .28rem .15rem; border: 0; border-radius: 0;
    display: flex; align-items: center; justify-content: center; color: #fff; line-height: 1;
  }
  .mobile-cta a img { display: block; width: 28px; height: 28px; object-fit: contain; }
  .mobile-cta .mc-zalo, .mobile-cta .mc-call { background: linear-gradient(180deg, #159cff, #0077e8); }
  .mobile-cta .mc-test { background: linear-gradient(180deg, #ff1e36, #e90019); }
  .mobile-cta .mc-book { background: linear-gradient(180deg, #ff8126, #ff5b00); }
  body.guest { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
}

/* ---- Hero tin tức: tràn hết chiều ngang, bỏ cảm giác "hộp trong hộp" ---- */
/* body.page-blog: bỏ khung .container để hero và hàng lọc chạy tràn viền,
   mỗi khối tự canh lề bằng lớp .*-inner (giống cách landing dùng .inner).
   Không dùng lề âm/100vw nên không bao giờ sinh thanh cuộn ngang. */
.page-blog main.container { max-width: none; padding: 0 0 2.5rem; }
.page-blog .blog-layout, .page-blog .blog-cta {
  max-width: var(--site-width); margin-inline: auto; padding-inline: 1.5rem;
}
.blog-hero { margin: 0 0 0; padding: 3.2rem 0 2.8rem; border-radius: 0; box-shadow: none; }
.blog-hero-inner, .blog-filters-inner {
  max-width: var(--site-width); margin: 0 auto; padding: 0 1.5rem;
}
.blog-hero h1 { max-width: 24ch; }
.blog-hero-stats { margin-top: 1.5rem; }

/* ---- Hàng lọc: dải dính dưới header, không phải thẻ nổi ---- */
.blog-filters {
  position: sticky; top: 62px; z-index: 30; display: block;
  margin: 0 0 1.8rem; padding: .7rem 0;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
}
.blog-filters-inner {
  display: flex; gap: .6rem 1.2rem; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
}
.blog-filters .cat-chip { font-size: .84rem; padding: .3rem .78rem; }

/* ---- Bố cục 2 cột: bài viết + cột phải ---- */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 306px; gap: 2rem; align-items: start; }
.blog-side { position: sticky; top: 124px; display: grid; gap: 1rem; }
.blog-side-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.05rem 1.15rem; box-shadow: var(--shadow-sm);
}
.blog-side-card h2 {
  margin: 0 0 .75rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-2); display: flex; align-items: center; gap: .4rem;
}
.blog-side-card h2 .ui-icon { width: 1rem; height: 1rem; }
.side-cats { display: grid; gap: .15rem; }
.side-cats a {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .45rem .55rem; border-radius: 10px; color: var(--text-2); font-size: .9rem; font-weight: 550;
}
.side-cats a:hover, .side-cats a.on { background: var(--gold-soft); color: var(--gold-2); text-decoration: none; }
.side-cats b { font-size: .76rem; font-weight: 700; color: var(--muted); }
.side-cats a:hover b, .side-cats a.on b { color: var(--gold-2); }
.side-posts { display: grid; gap: .8rem; }
.side-post { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: .7rem; align-items: center; color: inherit; }
.side-post:hover { text-decoration: none; }
.side-post-thumb { width: 62px; height: 48px; border-radius: 10px; overflow: hidden; background: #eaf2fc; }
.side-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-post strong { font-size: .87rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-post:hover strong { color: var(--blue-2); }
.side-post small { color: var(--muted); font-size: .76rem; display: block; margin-top: .18rem; }
.side-rank { color: var(--gold-2); font-weight: 800; font-size: .95rem; }

/* Thẻ đặt lịch nền tối ở cột phải */
.side-book {
  color: #f8fafc; border: 0;
  background: radial-gradient(420px 220px at 90% -20%, rgba(245, 182, 10, .25), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
}
.side-book h2 { color: var(--gold); }
.side-book p { margin: 0 0 .8rem; color: #dbeafe; font-size: .86rem; }
.side-book .btn { width: 100%; }
.side-book .btn + .btn { margin-top: .5rem; }
.side-book .btn-outline { background: transparent; color: #f8fafc; border-color: #93c5fd; }
.side-book .btn-outline:hover { background: rgba(255, 255, 255, .08); border-color: var(--gold); color: var(--gold); }

/* ---- Bài nổi bật: ảnh lớn, chữ đè lên ảnh ---- */
.blog-featured {
  display: block; position: relative; grid-template-columns: none;
  min-height: 380px; border: 0; border-radius: 20px; margin-bottom: 1.6rem; box-shadow: var(--shadow-lg);
}
.bf-cover { position: absolute; inset: 0; min-height: 0; }
.bf-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, .12) 0%, rgba(15, 23, 42, .55) 45%, rgba(15, 23, 42, .93) 100%);
}
.bf-badge { z-index: 2; }
.bf-body {
  position: relative; z-index: 2; min-height: 380px; justify-content: flex-end;
  padding: 1.8rem 2rem 1.7rem; color: #f8fafc; gap: .5rem;
}
.bf-body h2 { color: #fff; }
.blog-featured:hover h2 { color: var(--gold); }
.bf-body .post-meta { color: #cbd5e1; }
.bf-body .post-meta .ui-icon { color: var(--gold); }
.bf-body .post-excerpt { color: #dbeafe; -webkit-line-clamp: 2; max-width: 62ch; }
.bf-body .post-more { color: var(--gold); margin-top: .15rem; }
.blog-featured:hover .post-more { color: var(--gold); }

/* ---- Card gọn hơn: bìa 16:9, chữ nhỏ lại, lưới tự co ---- */
.blog-grid { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 1.1rem; }
.post-card { border-radius: 14px; }
.post-cover { aspect-ratio: 16 / 9; }
.post-cat { font-size: .68rem; padding: .16rem .55rem; letter-spacing: .02em; }
.post-cat-overlay { top: 9px; left: 9px; }
.post-body { padding: .8rem .9rem 1rem; gap: .38rem; }
.post-body h3 { font-size: .97rem; line-height: 1.35; }
.post-card .post-meta { font-size: .76rem; gap: .3rem .7rem; }
.post-card .post-meta .ui-icon { width: .85rem; height: .85rem; }
.post-card .post-excerpt { font-size: .84rem; -webkit-line-clamp: 2; }
.post-card .post-more { font-size: .82rem; padding-top: .2rem; }
.post-related .blog-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

@media (max-width: 1100px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr); }
  .blog-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 900px) {
  .blog-filters { top: 58px; }
}
@media (max-width: 640px) {
  .blog-hero { padding: 2.2rem 0 2rem; border-radius: 0; }
  .page-blog .blog-layout, .page-blog .blog-cta { padding-inline: 1.1rem; }
  .blog-hero-inner, .blog-filters-inner { padding-inline: 1.1rem; }
  .blog-filters-inner { flex-direction: column; align-items: flex-start; }
  .blog-featured, .bf-body { min-height: 300px; }
  .bf-body { padding: 1.2rem 1.2rem 1.3rem; }
  .blog-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ---- Chi tiết bài viết: cột trái ghim (mục lục + form đặt lịch) ---- */
.post-layout { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 2.2rem; align-items: start; }
.post-layout .post-detail { max-width: 820px; margin-inline: auto; }
.post-rail { position: sticky; top: 86px; display: grid; gap: 1rem; max-height: calc(100vh - 104px); overflow: auto; padding-right: .2rem; }
.post-rail::-webkit-scrollbar { width: 6px; }
.post-toc, .post-book {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 1rem 1.1rem; box-shadow: var(--shadow-sm);
}
.post-toc h2, .post-book h2 {
  margin: 0 0 .7rem; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-2); display: flex; align-items: center; gap: .4rem;
}
.post-toc h2 .ui-icon, .post-book h2 .ui-icon { width: 1rem; height: 1rem; }
.post-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; counter-reset: toc; }
.post-toc li { position: relative; }
.post-toc a {
  display: block; padding: .38rem .6rem .38rem .75rem; border-left: 2px solid var(--border);
  color: var(--text-2); font-size: .875rem; line-height: 1.4; border-radius: 0 8px 8px 0;
}
.post-toc a:hover { background: var(--gold-soft); color: var(--gold-2); text-decoration: none; border-left-color: var(--gold-bd); }
.post-toc a.on { background: var(--gold-soft); color: var(--gold-2); font-weight: 650; border-left-color: var(--gold); }
.post-toc .toc-l3 a { padding-left: 1.5rem; font-size: .83rem; color: var(--muted); }

.post-book {
  color: #f8fafc; border: 0;
  background: radial-gradient(420px 220px at 90% -20%, rgba(245, 182, 10, .25), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
}
.post-book h2 { color: var(--gold); }
.post-book > p { margin: 0 0 .7rem; color: #dbeafe; font-size: .85rem; }
.post-book label { color: #cbd5e1; font-size: .78rem; margin: .55rem 0 .22rem; }
.post-book input, .post-book select {
  min-height: 40px; background: rgba(255, 255, 255, .95); border-color: transparent; font-size: .9rem;
}
.post-book input:focus, .post-book select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(244, 179, 35, .3); }
.post-book .btn { margin-top: .85rem; }
.post-book-note { margin: .6rem 0 0; text-align: center; color: #cbd5e1; font-size: .8rem; }
.post-book-note a { color: var(--gold); font-weight: 650; }

/* Neo tiêu đề không bị header dính che mất khi bấm mục lục */
.post-content h2[id], .post-content h3[id] { scroll-margin-top: 84px; }

@media (max-width: 1100px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .post-layout .post-detail { max-width: 860px; margin: 0 auto; order: -1; }
  .post-rail { position: static; max-height: none; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
.page-blog main.container > .alert { max-width: calc(var(--site-width) - 3rem); margin: 1rem auto; }

/* ============================================================
   v35 — Menu công khai có icon, bài viết chiếm hết chiều ngang
   ============================================================ */
.lp-menu a { display: inline-flex; align-items: center; gap: .38rem; }
.lp-menu a .ui-icon { width: 1rem; height: 1rem; color: var(--gold-2); opacity: .8; flex: 0 0 auto; }
.lp-menu a:hover .ui-icon, .lp-menu a.on .ui-icon { opacity: 1; }
/* Màn hình vừa: bỏ icon để menu không bị chật/xuống dòng */
@media (max-width: 1180px) and (min-width: 901px) {
  .lp-menu a .ui-icon { display: none; }
  .lp-menu a { gap: 0; padding-inline: .62rem; }
}
@media (max-width: 900px) {
  .lp-top.menu-open .lp-menu a { justify-content: center; }
}

/* Bài viết trải hết cột còn lại, không chừa khoảng trống giữa trang */
.post-layout { grid-template-columns: 292px minmax(0, 1fr); gap: 1.8rem; }
.post-layout .post-detail { max-width: none; margin: 0; width: 100%; }
.post-layout .post-content { font-size: 1.04rem; }
.post-layout .post-hero-img img { max-height: 520px; }
@media (max-width: 1100px) { .post-layout .post-detail { max-width: 860px; margin: 0 auto; } }

/* ============================================================
   v36 — Hover: CẢ THẺ cùng phản hồi, ảnh không phóng to riêng.
   Dùng chung một kiểu với card ở landing (nhấc 4px + đổ bóng +
   viền vàng) để mọi thẻ trên site cảm giác giống nhau.
   ============================================================ */
.post-cover img { transition: none; }
.post-card:hover .post-cover img { transform: none; }

.post-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.post-card:hover {
  transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15, 23, 42, .14);
  border-color: var(--gold-bd);
}
.blog-featured { transition: transform .18s ease, box-shadow .18s ease; }
.blog-featured:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(15, 23, 42, .18); }

/* Hàng "Đọc nhiều nhất": cả dòng sáng lên, không chỉ đổi màu chữ */
.side-post {
  padding: .3rem; margin: -.3rem; border-radius: 12px;
  transition: background .16s ease, transform .16s ease;
}
.side-post:hover { background: var(--gold-soft); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .post-card, .blog-featured, .side-post { transition: none; }
  .post-card:hover, .blog-featured:hover, .side-post:hover { transform: none; }
}

/* ============================================================
   v37 — Hàng số liệu ở hero thoáng hơn + nút × xóa từ khóa
   ============================================================ */
.blog-hero-stats { gap: .7rem 2.8rem; margin-top: 1.6rem; }
.blog-hero-stats span { position: relative; gap: .45rem; }
.blog-hero-stats span + span::before {
  content: ""; position: absolute; left: -1.4rem; top: .2em; bottom: .2em;
  width: 1px; background: rgba(255, 255, 255, .22);
}
@media (max-width: 720px) {
  .blog-hero-stats { gap: .55rem 1.4rem; }
  .blog-hero-stats span + span::before { display: none; }
}

/* Nút xóa: chỉ hiện khi ô tìm kiếm đang có chữ */
.bs-clear {
  flex: 0 0 auto; width: 30px; height: 30px; margin-right: .12rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: #eef2f7; color: var(--muted);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bs-clear:hover { background: #e2e8f0; color: var(--text); }
.bs-clear:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.blog-search input[type="search"]:placeholder-shown ~ .bs-clear { display: none; }

/* ============================================================
   v38 — Nhảy tới #id không bị menu ghim che mất phần đầu nội dung.
   Header công khai (.lp-top) cao 62px nên chừa 78px: nội dung dừng
   ngay dưới menu, còn dư một khoảng thở. Áp cho MỌI trang nên các
   neo khác (mục lục bài viết, liên kết trong trang) cũng đúng.
   ============================================================ */
html { scroll-padding-top: 78px; }
/* Trước đây tiêu đề bài viết tự bù 84px; nay html lo phần đó, giữ lại
   chút đệm nhỏ cho thoáng — nếu để cả hai thì nhảy quá đà. */
.post-content h2[id], .post-content h3[id] { scroll-margin-top: .4rem; }
/* Trang tin tức còn hàng lọc dính ngay dưới header (~50px). scroll-padding
   phải đặt trên phần tử cuộn (html) chứ không phải body, nên dùng :has();
   trình duyệt cũ không hiểu :has() thì vẫn có mức 78px ở trên. */
html:has(body.page-blog) { scroll-padding-top: 128px; }

/* ============================================================
   v39 — Tiêu đề mục Địa chỉ (là cả một dòng địa chỉ dài) không bị
   rớt lẻ một chữ xuống dòng. Nới khung tiêu đề riêng cho mục này
   và co chữ theo bề ngang màn hình; nếu vẫn phải ngắt thì chia đều
   hai dòng thay vì bỏ rơi chữ cuối.
   ============================================================ */
.sec-head h2 { text-wrap: balance; }
#dia-chi .sec-head, #location .sec-head { max-width: 58rem; }
#dia-chi .sec-head h2, #location .sec-head h2 {
  font-size: clamp(1.02rem, .68rem + 1.2vw, 1.5rem);
  letter-spacing: -.02em; line-height: 1.3;
}

/* ============================================================
   v40 — Sửa hiển thị trang tin tức trên điện thoại
   ============================================================ */

/* (1) LỖI: rule cũ ở @media 1023px cho .bf-cover tỉ lệ 16/9. Với thẻ nổi bật
   kiểu overlay (.bf-cover position:absolute; inset:0) thì aspect-ratio thắng
   inset, ảnh chỉ cao bằng 9/16 bề ngang → phần dưới thẻ trắng trơn, chữ trắng
   rơi vào đó nên gần như mất chữ. Trả lại auto để ảnh phủ kín thẻ. */
.bf-cover { aspect-ratio: auto; }

@media (max-width: 760px) {
  /* (2) Ô tìm kiếm và nút Tìm nằm CÙNG một hàng */
  .blog-search { flex-direction: row; align-items: center; }
  .blog-search .btn { width: auto; flex: 0 0 auto; padding-inline: 1.05rem; }

  /* (3) Hàng lọc gọn lại: mỗi nhóm một hàng, trượt ngang thay vì xuống dòng lộn xộn */
  .blog-filters-inner { flex-direction: column; align-items: stretch; gap: .5rem; }
  .blog-cats, .blog-sort {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: .1rem;
  }
  .blog-cats::-webkit-scrollbar, .blog-sort::-webkit-scrollbar { display: none; }
  .blog-cats .cat-chip, .blog-sort .cat-chip { flex: 0 0 auto; white-space: nowrap; }
  .blog-sort { padding-left: 0; padding-top: .5rem; border-top: 1px solid var(--border); }
  .blog-sort::before { display: none; }
}

@media (max-width: 640px) {
  /* (4) Lưới 2 card mỗi hàng — chữ và đệm co lại cho vừa khung hẹp */
  .blog-grid, .post-related .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem;
  }
  .post-card { border-radius: 12px; }
  .post-body { padding: .6rem .65rem .8rem; gap: .28rem; }
  .post-body h3 { font-size: .85rem; line-height: 1.32; }
  .post-card .post-meta { font-size: .66rem; gap: .15rem .5rem; }
  .post-card .post-meta .ui-icon { width: .72rem; height: .72rem; margin-right: .06rem; }
  .post-card .post-excerpt { display: none; } /* quá chật để đọc ở khổ 2 cột */
  .post-card .post-more { font-size: .74rem; padding-top: .1rem; }
  .post-cat { font-size: .6rem; padding: .12rem .42rem; }
  .post-cat-overlay { top: 6px; left: 6px; }
}
@media (max-width: 640px) {
  /* Khổ 2 cột: tiêu đề dài phải cắt bớt, nếu không các thẻ cao thấp lệch nhau */
  .post-body h3 {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Chỉ giữ ngày + thời gian đọc; lượt xem để dành cho màn hình rộng */
  .post-card .post-meta > span:nth-child(3) { display: none; }
}

/* ============================================================
   v41 — Sửa VỠ LAYOUT hàng lọc trên mobile + giãn hàng số liệu
   ============================================================ */

/* LỖI: .blog-filters-inner kế thừa `flex-wrap: wrap` từ bản desktop. Khi đổi
   sang `flex-direction: column`, flex line trong container CÓ WRAP lấy bề ngang
   theo item rộng nhất (hàng chip nowrap ~500px) chứ không theo bề ngang màn
   hình → item bị kéo rộng bằng đúng nội dung, overflow-x không bao giờ kích
   hoạt, và cả trang bị đẩy rộng ra. Phải nowrap + min-width:0 thì mới trượt
   ngang trong khung. */
@media (max-width: 760px) {
  .blog-filters-inner { flex-wrap: nowrap; align-items: stretch; }
  .blog-cats, .blog-sort { min-width: 0; max-width: 100%; }
}

/* Hàng số liệu ở hero: tách khỏi ô tìm kiếm cho đỡ dính (desktop + mobile) */
.blog-hero-stats { margin-top: 2.4rem; }
@media (max-width: 760px) { .blog-hero-stats { margin-top: 1.9rem; } }

/* Lưới mobile: nếu tổng số card lẻ thì card cuối trải hết hàng, không đứng lẻ loi */
@media (max-width: 640px) {
  .blog-grid .post-card:last-child:nth-child(odd) { grid-column: span 2; }
  .blog-grid .post-card:last-child:nth-child(odd) .post-cover { aspect-ratio: 21 / 9; }
}

/* ============================================================
   v42 — Hàng số liệu tách hẳn khỏi ô tìm kiếm + mục lục bài viết
   ghim lên đỉnh và thu gọn khi cuộn (mobile/tablet)
   ============================================================ */

/* Tách hàng số liệu thành một dải riêng có đường kẻ, không còn dính ô tìm kiếm */
.blog-hero-stats {
  margin: 2.9rem auto 0; padding-top: 1.15rem; max-width: 34rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
@media (max-width: 760px) {
  .blog-hero-stats { margin-top: 2.2rem; padding-top: 1rem; max-width: 26rem; }
}

/* ---- Mục lục: đầu mục + nút thu gọn ---- */
.post-toc-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.post-toc-head h2 { margin: 0; }
.toc-toggle {
  display: none; width: 30px; height: 30px; padding: 0; flex: 0 0 auto;
  align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--gold-2);
}
.toc-toggle .ui-icon { width: 1rem; height: 1rem; transition: transform .18s ease; }
.toc-current { display: none; margin: .35rem 0 0; font-size: .88rem; font-weight: 600; color: var(--text-2); }

@media (max-width: 1100px) {
  /* Tách mục lục ra khỏi cột phải: mục lục lên TRÊN bài, form đặt lịch xuống dưới */
  .post-rail { display: contents; }
  .post-toc {
    order: 1; position: sticky; top: 62px; z-index: 20; margin: 0 0 1rem;
    transition: box-shadow .18s ease, border-radius .18s ease;
  }
  .post-layout .post-detail { order: 2; max-width: 860px; margin: 0 auto; width: 100%; }
  .post-book { order: 3; margin-top: 1.4rem; }

  /* Khi đã ghim lên đỉnh: chỉ còn một thanh gọn, bấm mới mở danh sách */
  .post-toc.is-stuck {
    border-radius: 0 0 14px 14px; box-shadow: 0 12px 26px rgba(15, 23, 42, .14);
    padding: .7rem .9rem;
  }
  .post-toc.is-stuck > ol { display: none; }
  .post-toc.is-stuck .toc-current { display: block; }
  .post-toc.is-stuck .toc-toggle { display: inline-flex; }
  .post-toc.is-stuck .toc-toggle .ui-icon { transform: rotate(90deg); }
  .post-toc.is-stuck.is-open > ol { display: grid; max-height: 46vh; overflow: auto; margin-top: .5rem; }
  .post-toc.is-stuck.is-open .toc-current { display: none; }
  .post-toc.is-stuck.is-open .toc-toggle .ui-icon { transform: rotate(-90deg); }

  /* Chừa thêm chỗ cho thanh mục lục khi bấm vào một mục */
  .post-content h2[id], .post-content h3[id] { scroll-margin-top: 58px; }
}

/* ============================================================
   v43 — SỬA LỖI: trang bài viết vẫn chia 2 cột trên điện thoại
   + mục lục chuyển vào trong khối bài viết ở khổ hẹp
   ============================================================ */

/* LỖI: v35 khai báo lại `.post-layout { grid-template-columns: 292px ... }` ở
   cấp gốc, nằm SAU media query 1100px của v34 → luật 1 cột bị ghi đè, điện
   thoại vẫn chia 292px + phần còn lại nên bài viết bị bóp thành cột chữ hẹp.
   Bài học: đặt lại rule gốc thì phải khai báo lại luôn các media query của nó. */
@media (max-width: 1100px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .post-rail { display: block; position: static; max-height: none; overflow: visible; }
  .post-layout .post-detail { order: -1; max-width: 860px; margin: 0 auto; width: 100%; }
  .post-book { order: 0; margin-top: 0; }
  /* Không còn thanh mục lục ghim nên trả mức bù cuộn về mặc định của html */
  .post-content h2[id], .post-content h3[id] { scroll-margin-top: .4rem; }
}

/* Mục lục bản "trong bài": nằm ngay dưới hàng tác giả / ngày / lượt xem */
.post-toc-inline { display: none; }
@media (max-width: 1100px) {
  .post-toc-rail { display: none; }
  .post-toc-inline {
    display: block; margin: 1.1rem 0 .2rem; background: #f8fafc;
    border: 1px solid var(--border); border-radius: 14px; padding: .9rem 1rem;
  }
  .post-toc-inline ol { max-height: none; }
  .post-toc-inline a { font-size: .9rem; }
}
/* Bản trong bài không ghim, không thu gọn — chỉ là một khối nội dung tĩnh */
.post-toc-inline { position: static; z-index: auto; order: 0; }

/* ============================================================
   v44 — Mục lục trong bài (mobile/tablet): ghim lên đầu màn hình
   khi cuộn và thu gọn thành một thanh. Phạm vi ghim giới hạn trong
   .post-reading nên xuống tới CTA / bài liên quan là tự thôi ghim.
   ============================================================ */
.toc-head {
  display: flex; align-items: center; gap: .45rem; width: 100%; padding: 0;
  background: none; border: 0; font: inherit; color: var(--gold-2); cursor: pointer; text-align: left;
}
.toc-head .ui-icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.toc-head-label { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.toc-chev { margin-left: auto; transition: transform .18s ease; }
.toc-current {
  display: none; min-width: 0; flex: 1; color: var(--text-2); font-size: .85rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 1100px) {
  .post-toc-inline {
    position: sticky; top: 62px; z-index: 20; margin: 1.1rem 0 1rem;
    background: #f8fafc; transition: box-shadow .18s ease, padding .18s ease, border-radius .18s ease;
  }
  .post-toc-inline > ol { margin-top: .55rem; }

  /* Đã ghim: gọn còn một thanh, hiện mục đang đọc */
  .post-toc-inline.is-stuck {
    padding: .6rem .8rem; border-radius: 0 0 14px 14px; background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(8px); box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
  }
  .post-toc-inline.is-stuck > ol { display: none; }
  .post-toc-inline.is-stuck .toc-head-label { display: none; }
  .post-toc-inline.is-stuck .toc-current { display: block; }
  .post-toc-inline.is-stuck .toc-chev { transform: rotate(90deg); }
  .post-toc-inline.is-stuck.is-open > ol {
    display: grid; max-height: 44vh; overflow: auto; margin-top: .5rem;
  }
  .post-toc-inline.is-stuck.is-open .toc-head-label { display: block; }
  .post-toc-inline.is-stuck.is-open .toc-current { display: none; }
  .post-toc-inline.is-stuck.is-open .toc-chev { transform: rotate(-90deg); }

  /* Chừa chỗ cho thanh mục lục ghim khi bấm vào một mục (cộng với 78px của html) */
  .post-content h2[id], .post-content h3[id] { scroll-margin-top: 42px; }
}

/* ============================================================
   v45 — Mục lục ghim: cuộn mượt hơn và tách khỏi mép menu
   - Bỏ backdrop-filter và bỏ transition trên padding/border-radius
     (đổi padding khi ghim = bắt trình duyệt tính lại layout liên tục
     trong lúc cuộn → giật). Chỉ còn đổi bóng.
   - Ghim ở 70px thay vì 62px và bo tròn cả 4 góc: thanh nổi tách hẳn
     khỏi menu chứ không dán sát mép.
   ============================================================ */
.toc-sentinel { display: none; }
@media (max-width: 1100px) {
  .toc-sentinel { display: block; height: 1.1rem; }
  .post-toc-inline {
    top: 70px; margin: 0 0 1rem; transition: box-shadow .18s ease;
    padding: .75rem .9rem; will-change: auto;
  }
  .post-toc-inline.is-stuck {
    padding: .75rem .9rem; border-radius: 14px; background: #fff;
    backdrop-filter: none; border-color: #dbe7f5;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .16);
  }
  .post-toc-inline.is-stuck.is-open { border-radius: 14px; }
  .post-content h2[id], .post-content h3[id] { scroll-margin-top: 50px; }
}

/* ============================================================
   v46 — Bỏ backdrop-filter ở các thanh DÍNH (header công khai và
   hàng lọc tin tức). Làm mờ nền phía sau một phần tử dính buộc
   trình duyệt vẽ lại vùng mờ theo từng khung hình khi cuộn — đây là
   nguồn giật nặng nhất trên điện thoại. Nền vốn đã gần đục hoàn
   toàn nên bỏ đi gần như không đổi giao diện.
   ============================================================ */
.lp-top { background: #fff; backdrop-filter: none; }
.blog-filters { background: #fff; backdrop-filter: none; }
.topbar { background: #fff; backdrop-filter: none; }
.guest-login .lp-top { background: rgba(255, 255, 255, .96); }
/* Các thanh dính trong khu vực đã đăng nhập cũng bỏ blur cho cùng lý do */
.mobilebar { background: #fff; backdrop-filter: none; }
.app-topbar { background: #fff; backdrop-filter: none; }

/* ============================================================
   v47 — Mở menu trên mobile thì khoá cuộn nền phía sau
   ============================================================ */
.lp-backdrop {
  position: fixed; inset: 0; z-index: 45; background: rgba(15, 23, 42, .45);
  opacity: 0; visibility: hidden; pointer-events: none; touch-action: none;
  transition: opacity .18s ease, visibility .18s ease;
}
body.lp-nav-open .lp-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
/* Khoá cuộn ở cả html lẫn body (Safari cần cả hai) — vị trí cuộn giữ nguyên,
   không dùng mẹo position:fixed vì sẽ làm menu dính bị đẩy khỏi màn hình. */
html.lp-nav-open, body.lp-nav-open { overflow: hidden; overscroll-behavior: none; }
/* Menu và header phải nổi trên lớp phủ */
body.lp-nav-open .lp-top { z-index: 50; }
@media (min-width: 901px) {
  /* Trên desktop menu không bao giờ ở dạng thả xuống nên không cần khoá */
  .lp-backdrop { display: none; }
  html.lp-nav-open, body.lp-nav-open { overflow: visible; }
}

/* ============================================================
   v48 — Bỏ đường kẻ ngang dưới ô tìm kiếm (thêm ở v42). Vẫn giữ
   khoảng cách để hàng số liệu không dính vào ô tìm kiếm, và giữ
   vạch ngăn dọc giữa 3 mục.
   ============================================================ */
.blog-hero-stats { border-top: 0; padding-top: 0; margin-top: 2.4rem; }
@media (max-width: 760px) { .blog-hero-stats { margin-top: 1.9rem; } }

/* ============================================================
   v49 — Bỏ đường kẻ xong thì mất luôn phần đệm 1.15rem của nó nên
   hàng số liệu lại sát ô tìm kiếm. Tăng hẳn khoảng cách bù vào.
   ============================================================ */
.blog-hero-stats { margin-top: 3.6rem; }
@media (max-width: 760px) { .blog-hero-stats { margin-top: 2.8rem; } }

/* ============================================================
   v50 — Khoảng cách hàng số liệu: dùng đúng 20px như khách đã thử
   trực tiếp trên F12. Khai báo lại cho CẢ mobile để không còn media
   query nào cũ ghi đè (trước đó có 3.6rem / 2.8rem).
   ============================================================ */
.blog-hero-stats { margin-top: 20px; }
@media (max-width: 760px) { .blog-hero-stats { margin-top: 20px; } }

/* ---- Khối "Bản tiếng Anh" trong form soạn bài viết ---- */
.post-en {
  margin: 1.1rem 0 .2rem; border: 1px dashed var(--border-strong); border-radius: var(--radius);
  padding: .2rem .95rem .95rem; background: var(--navy-soft);
}
.post-en > summary {
  cursor: pointer; padding: .65rem 0; font-weight: 650; font-size: .93rem; color: var(--navy);
  list-style-position: inside;
}
.post-en > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.post-en[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: .55rem; }
.post-en .muted { font-size: .85rem; margin: 0 0 .7rem; }
/* Nhắc khách bản tiếng Anh mới dịch tiêu đề, thân bài còn tiếng Việt */
.post-lang-note {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 1.2rem;
  padding: .6rem .9rem; border-radius: var(--radius-sm); font-size: .88rem;
  background: var(--gold-soft); color: var(--gold-ink); border: 1px solid var(--gold-bd);
}
.post-lang-note .ui-icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }

/* ============================================================
   Header khách nền navy — lấy đúng màu nền của ảnh nhận diện
   (#01468c → #012f66, gạch chân vàng). Đặt cuối file để đè các
   rule nền trắng viết trước đó, gỡ ra là quay lại header trắng.
   ============================================================ */
.lp-top {
  background: linear-gradient(180deg, #01468c 0%, #012f66 100%);
  backdrop-filter: none;
  border-bottom: 1px solid rgba(245, 182, 10, .38);
}
.guest-login .lp-top { background: linear-gradient(180deg, #01468c 0%, #012f66 100%); }
.lp-brand { color: #fff; }
.lp-brand .brand-name { color: #fff; }
.lp-brand .brand-name em { color: var(--gold-light); }
.lp-brand .brand-text small { color: #cfe0f4; }
.lp-menu a { color: #dbe9f8; }
.lp-menu a .ui-icon { color: var(--gold); opacity: .85; }
.lp-menu a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.lp-menu a.on {
  background: rgba(245, 182, 10, .18); color: var(--gold-light);
  box-shadow: inset 0 0 0 1px rgba(245, 182, 10, .5);
}
.lp-menu a:hover .ui-icon, .lp-menu a.on .ui-icon { color: var(--gold-light); opacity: 1; }
.lp-menu-toggle { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); }
.lp-top .lang-switch a { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .26); }
.lp-top .lang-switch a:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .5); }
.lp-top .lang-switch a.on { background: #fff; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245, 182, 10, .45); }
.scroll-progress-bar {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light));
  box-shadow: 0 0 8px rgba(245, 182, 10, .5);
}
@media (max-width: 900px) {
  .lp-menu { background: #012f66; border-color: rgba(255, 255, 255, .18); box-shadow: 0 16px 30px rgba(1, 30, 66, .4); }
}

/* ============================================================
   Khối logo ở header/sidebar/footer dựng theo ĐÚNG tỉ lệ lockup gốc:
   khối chữ cao bằng 78% huy hiệu, khe hở 11% — nên nhìn y hệt ảnh
   nhận diện, kể cả dòng slogan và hai vạch nằm trong ảnh.
   ============================================================ */
.lp-top .inner { min-height: 78px; }
.guest-login main.container { min-height: min(720px, calc(100vh - 78px)); }
.lp-brand { gap: 7px; }
.lp-brand .brand-mark { height: 64px; width: auto; max-width: 96px; object-fit: contain; display: block; }
.lp-brand .brand-word { height: 50px; width: auto; max-width: none; display: block; }
.lp-brand .brand-text { display: block; }

.sb-brand { gap: 6px; }
.sb-brand img.brand-mark { height: 46px; max-width: 70px; }
.sb-brand-text { display: block; }
.sb-brand-text .brand-word { height: 36px; width: auto; max-width: none; display: block; }

.guest-footer-brand .brand { gap: 6px; }
.guest-footer-brand .brand-mark { height: 44px; max-width: 66px; }
.guest-footer-brand .brand-text { display: block; }
.guest-footer-brand .brand-word { height: 34px; width: auto; max-width: none; display: block; }

/* Khi admin đổi tên trung tâm, khối chữ về dạng text — vẫn xếp dọc như cũ */
.lp-brand .brand-text:has(.brand-name),
.sb-brand-text:has(.brand-name),
.guest-footer-brand .brand-text:has(.brand-name) { display: flex; flex-direction: column; align-items: center; text-align: center; }

@media (max-width: 430px) {
  .lp-brand .brand-mark { height: 48px; }
  .lp-brand .brand-word { height: 38px; max-width: none; }
}