/* Giao diện phong cách MacLife / macOS: nền sáng dịu, thẻ bo tròn, biểu tượng ứng dụng, hỗ trợ chế độ tối */
:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --glass: rgba(255, 255, 255, .78);
  --side-bg: #f2f2f5;
  --pill: #e3e3e8;
  --icon: #0071e3;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: #e5e5ea;
  --line-strong: #d2d2d7;
  --primary: #0071e3;
  --primary-hover: #0062c4;
  --primary-soft: #e8f1fd;
  --accent: #c76a00;
  --ok: #1f8a3b;
  --ok-soft: #e5f5e9;
  --warn: #a85600;
  --warn-soft: #fff3e3;
  --danger: #d1180b;
  --danger-soft: #ffebe9;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .05);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .08);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Roboto, "Noto Sans", Arial, sans-serif;
  --brand-1: #2c5ea8; --brand-2: #45aee8;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d1d1f; --surface: #2a2a2d; --surface-2: #3a3a3d; --glass: rgba(29, 29, 31, .8); --side-bg: #252528; --icon: #3d9bff; --pill: #3a3a3d;
    --ink: #f5f5f7; --muted: #a1a1a6; --line: #3a3a3c; --line-strong: #48484a;
    --primary: #2997ff; --primary-hover: #52abff; --primary-soft: #0b2a4a; --accent: #ffb340;
    --ok: #30d158; --ok-soft: #0f3319; --warn: #ffb340; --warn-soft: #3a2a10; --danger: #ff6961; --danger-soft: #3d1715;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-hover: 0 8px 30px rgba(0, 0, 0, .5); color-scheme: dark;
    --brand-1: #6f9ff0; --brand-2: #5cc6f7;
  }
}
:root[data-theme="dark"] {
  --bg: #1d1d1f; --surface: #2a2a2d; --surface-2: #3a3a3d; --glass: rgba(29, 29, 31, .8); --side-bg: #252528; --icon: #3d9bff; --pill: #3a3a3d;
  --ink: #f5f5f7; --muted: #a1a1a6; --line: #3a3a3c; --line-strong: #48484a;
  --primary: #2997ff; --primary-hover: #52abff; --primary-soft: #0b2a4a; --accent: #ffb340;
  --ok: #30d158; --ok-soft: #0f3319; --warn: #ffb340; --warn-soft: #3a2a10; --danger: #ff6961; --danger-soft: #3d1715;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-hover: 0 8px 30px rgba(0, 0, 0, .5); color-scheme: dark;
  --brand-1: #6f9ff0; --brand-2: #5cc6f7;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.01em; }
h1 { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: 1.15rem; font-weight: 650; }
h3 { font-size: 1rem; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: .9em; }
.boot { padding: 3rem; text-align: center; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }

/* ---------- Thanh bên kiểu MacLife ---------- */
.layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(to right, var(--side-bg) 290px, var(--bg) 290px); }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--side-bg); border-right: 1px solid var(--line); padding: 18px 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); padding: 2px 10px; }
.brand-mark { width: 46px; height: 31px; flex: none; display: block; }
.logo b { font-size: 1.25rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.logo small { display: block; font-size: .72rem; color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; margin-top: 3px; }
.search { position: relative; }
.search input[type=search] { width: 100%; border-radius: 999px; padding-left: 38px; background: var(--surface-2); border: 1px solid var(--line); min-height: 40px; font-size: .98rem; }
.search input[type=search]:focus { background: var(--surface); border-color: var(--primary); }
.search .sic svg { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-res { position: absolute; left: 0; top: calc(100% + 8px); width: min(380px, 86vw); max-height: 440px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-hover); padding: 6px; z-index: 60; }
.search-res a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.search-res a:hover, .search-res a.sel { background: var(--surface-2); }
.search-res .h { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 10px 2px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 13px; padding: 9px 12px; border-radius: 11px; color: var(--ink); text-decoration: none; font-size: 1.02rem; }
.nav a svg { width: 22px; height: 22px; color: var(--icon); flex: none; stroke-width: 1.7; }
.nav a:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.nav a.active { background: var(--surface-2); font-weight: 650; }
.nav .sep { height: 1px; background: var(--line); margin: 8px 6px; }
.side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.side-bottom .sep { height: 1px; background: var(--line); margin: 0 6px; }
.theme-row { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: var(--muted); font-size: .92rem; }
.theme-seg { display: inline-flex; background: var(--surface-2); border-radius: 12px; padding: 4px; gap: 2px; }
.theme-seg button { width: 40px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.theme-seg button svg { width: 19px; height: 19px; }
.theme-seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.user { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-align: left; width: 100%; }
.user:hover { background: var(--surface-2); }
.user .av { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; background: linear-gradient(135deg, #7d7aff, #bf5af2); }
.user b { display: block; font-size: 1rem; }
.user span.sub { font-size: .82rem; color: var(--muted); }
.rel { position: relative; }
.menu { position: absolute; left: 0; bottom: calc(100% + 8px); min-width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-hover); padding: 6px; z-index: 60; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); background: transparent; border: 0; cursor: pointer; font-size: .95rem; text-align: left; }
.menu a:hover, .menu button:hover { background: var(--surface-2); }
.menu svg { width: 18px; height: 18px; color: var(--icon); }
.menu .sep { height: 1px; background: var(--line); margin: 6px 4px; }
.mobilebar { display: none; }
.icon-btn { width: 38px; height: 38px; border-radius: 999px; border: 0; background: var(--surface-2); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }
.main { min-width: 0; }
.content { padding: 40px 48px 64px; max-width: 1360px; width: 100%; margin: 0 auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-head p { margin: 6px 0 0; color: var(--muted); font-size: 1.05rem; }

/* ---------- Trang Khám phá (kiểu MacLife) ---------- */
.explore-head h1 { font-size: 3rem; margin-bottom: 6px; }
.explore-head p { color: var(--muted); font-size: 1.2rem; margin: 0 0 26px; }
.hero { position: relative; overflow: hidden; border-radius: 24px; padding: 48px 56px; color: #fff; min-height: 340px; border: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(700px 380px at 78% 45%, rgba(64, 140, 255, .45), transparent 65%), linear-gradient(110deg, #07142e 0%, #0b2150 45%, #10306e 100%); }
.hero .brandline { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; position: relative; z-index: 1; }
.hero .brandline .ico { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.hero .brandline .ico svg { width: 30px; height: 30px; color: #fff; }
.hero .eyebrow { font-size: .8rem; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; opacity: .85; }
.hero .brandline b { display: block; font-size: 1.35rem; }
.hero h2 { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; margin: 0 0 14px; position: relative; z-index: 1; }
.hero p { margin: 0; max-width: 560px; font-size: 1.12rem; line-height: 1.55; opacity: .92; position: relative; z-index: 1; }
.hero .cta { display: flex; align-items: center; gap: 28px; margin-top: 28px; position: relative; z-index: 1; }
.hero .btn-white { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #0b3a8c; border-radius: 999px; padding: 14px 26px; font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.hero .cta .meta b { display: block; font-size: 1.2rem; }
.hero .cta .meta span { font-size: .92rem; opacity: .85; }
.hero .art { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); width: 420px; height: 300px; z-index: 0; }
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 34px 0 6px; }
.picks a { text-decoration: none; color: var(--ink); }
.picks .eyebrow { color: var(--primary); font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.picks b { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; margin: 6px 0 4px; }
.picks span.d { color: var(--muted); font-size: 1.05rem; }
.section { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 34px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 22px; }
.sec-head h2 { font-size: 1.95rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.sec-head a { font-size: 1.1rem; text-decoration: none; color: var(--primary); }
.applist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
@media (min-width: 1680px) { .applist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ai { display: flex; align-items: center; gap: 18px; text-decoration: none; color: var(--ink); padding: 12px 0; }
.ai .ico { width: 92px; height: 92px; border-radius: 22px; display: grid; place-items: center; color: #fff; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 6px 16px rgba(0, 0, 0, .25); }
.ai .ico svg { width: 46px; height: 46px; stroke-width: 1.6; }
.ai .body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; align-self: stretch; border-bottom: 1px solid var(--line); }
.ai .txt { flex: 1; min-width: 0; }
.ai .txt b { display: block; font-size: 1.22rem; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai .txt span { display: block; color: var(--muted); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai .act { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; padding: 8px 18px; border-radius: 999px; background: var(--pill); color: var(--primary); font-weight: 750; font-size: 1.05rem; }
.ai .act small { font-size: .78rem; color: var(--muted); }
.ai:hover .pill { background: var(--primary); color: #fff; }
.ai:hover .txt b { color: var(--primary); }
.g-blue { background: linear-gradient(135deg, #5ac8fa, #0071e3); }
.g-indigo { background: linear-gradient(135deg, #7d7aff, #5e5ce6); }
.g-purple { background: linear-gradient(135deg, #da8fff, #af52de); }
.g-pink { background: linear-gradient(135deg, #ff6482, #ff2d55); }
.g-orange { background: linear-gradient(135deg, #ffcc00, #ff9500); }
.g-green { background: linear-gradient(135deg, #63e6a0, #28a745); }
.g-teal { background: linear-gradient(135deg, #64d2ff, #30b0c7); }
.g-gray { background: linear-gradient(135deg, #a1a1a6, #636366); }
.g-red { background: linear-gradient(135deg, #ff7b72, #e5352b); }

/* ---------- Thành phần ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 20px; }
.card + .card, .grid + .card, .grid + .grid { margin-top: 16px; }
.grid > .card + .card { margin-top: 0; }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat .v { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--muted); font-size: .88rem; }
.stat.ok .v { color: var(--ok); }
.stat.warn .v { color: var(--warn); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: 7px 16px; border-radius: 999px; cursor: pointer; font-weight: 550; text-decoration: none; white-space: nowrap; min-height: 36px; }
.btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-hover); }
.btn.danger { color: var(--danger); border-color: var(--line-strong); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--primary-soft); }
.btn.sm { padding: 3px 9px; font-size: .84rem; min-height: 28px; }
.btn.lg { padding: 11px 18px; font-size: 1rem; }
.btn svg { width: 16px; height: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.quick a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.quick a:hover { border-color: var(--primary); }
.quick a span.ic { width: 36px; height: 36px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex: none; }
.quick a span.ic svg { width: 20px; height: 20px; }

label.f { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); font-weight: 500; }
input[type=text], input[type=password], input[type=date], input[type=search], input[type=number], select, textarea {
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 7px 11px; background: var(--surface); min-height: 36px; width: 100%; color: var(--ink);
}
textarea { resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, .chip:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: 0; border-color: var(--primary); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: .92rem; cursor: pointer; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.toolbar label.f { min-width: 140px; flex: 1 1 140px; }
.toolbar .grow { flex: 2 1 220px; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.none { background: var(--surface-2); color: var(--muted); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.info { background: var(--primary-soft); color: var(--primary); }

table.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl th { font-size: .82rem; color: var(--muted); font-weight: 600; background: var(--surface-2); position: sticky; top: 0; z-index: 1; }
.tbl tr:hover td { background: var(--surface-2); }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.empty { padding: 28px; text-align: center; color: var(--muted); }

/* Biểu đồ thanh */
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 140px 1fr 70px; gap: 10px; align-items: center; font-size: .9rem; }
.bar-row .track { height: 10px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.bar-row .fill { height: 100%; background: var(--primary); border-radius: 6px; }
.bar-row .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }

/* ---------- Bảng đánh giá ---------- */
.eval-bar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.eval-bar .spacer { flex: 1; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 6px 12px; cursor: pointer; font-size: .86rem; border-radius: 8px; }
.seg button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
table.eval { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.eval th { font-size: .8rem; color: var(--muted); text-align: left; padding: 8px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.eval td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; background: var(--surface); }
.eval tr.dirty td { background: var(--warn-soft); }
.eval tr.saved td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.eval tr.dirty td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.eval tr.err td { background: var(--danger-soft); }
.eval textarea { min-height: 58px; font-size: .9rem; padding: 6px 8px; }
.eval .name b { display: block; }
.eval .name .code { font-size: .78rem; color: var(--muted); }
.eval .last { margin-top: 6px; font-size: .78rem; color: var(--muted); background: var(--surface-2); border-left: 3px solid var(--line-strong); padding: 4px 6px; border-radius: 4px; }
.eval .cell-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.eval .status { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.col-chk { width: 34px; } .col-stt { width: 42px; } .col-name { width: 15%; } .col-status { width: 112px; }
.support-toggle { display: inline-flex; gap: 5px; align-items: center; font-size: .8rem; cursor: pointer; color: var(--warn); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.chip { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 2px 9px; font-size: .78rem; cursor: pointer; line-height: 1.4; }
.chip.good { background: var(--ok-soft); border-color: #9cc9ae; color: var(--ok); }
.chip.support { background: var(--warn-soft); border-color: #e3c48f; color: var(--warn); }
.chip.good::before { content: "+ "; font-weight: 700; }
.chip.support::before { content: "− "; font-weight: 700; }
/* Dấu cộng / trừ */
.marks { display: flex; gap: 6px; margin-top: 6px; }
.mark { width: 34px; height: 30px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; color: var(--muted); display: inline-grid; place-items: center; }
.mark.plus:hover { border-color: var(--ok); color: var(--ok); }
.mark.minus:hover { border-color: var(--danger); color: var(--danger); }
.mark.plus.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.mark.minus.on { background: var(--danger); border-color: var(--danger); color: #fff; }
.mark.static { width: 24px; height: 22px; font-size: .95rem; cursor: default; vertical-align: middle; }
.mark-btn.plus { color: var(--ok); border-color: #9cc9ae; }
.mark-btn.minus { color: var(--danger); border-color: #e2b7b2; }

td.mark-cell { text-align: center !important; font-weight: 700; font-size: 1.15rem; }
td.mark-cell.plus { color: var(--ok); }
td.mark-cell.minus { color: var(--danger); }

/* ---------- Lịch báo giảng ---------- */
.lbg-tbl td { padding: 6px 8px; }
.lbg-tbl textarea, .lbg-tbl input[type=text], .lbg-tbl select { font-size: .88rem; min-height: 32px; padding: 4px 7px; }
.lbg-tbl textarea { resize: none; overflow: hidden; }
.lbg-tbl tr.day-start td { border-top: 2px solid var(--line-strong); }
.lbg-tbl tr.off td { background: var(--surface-2); }
.lbg-tbl tr.manual td:nth-child(5) { color: var(--accent); }
table.tkb th { white-space: nowrap; }
table.tkb input { text-transform: uppercase; text-align: center; font-weight: 600; min-width: 80px; }
table.tkb input:placeholder-shown { font-weight: 400; }
.grow { flex: 1; }

/* ---------- Hộp thoại, thông báo ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; }
.modal { background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 640px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modal.wide { max-width: 920px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; }
.modal-body { padding: 16px 18px; max-height: 70vh; overflow-y: auto; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; box-shadow: var(--shadow); font-size: .92rem; }
.toast.ok { background: var(--ok); color: #fff; }
.toast.err { background: var(--danger); color: #fff; }
.toast.warn { background: var(--warn); color: #fff; }
.notice { padding: 11px 14px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font-size: .9rem; margin-bottom: 12px; }
.notice.warn { background: var(--warn-soft); color: var(--warn); }
.notice.err { background: var(--danger-soft); color: var(--danger); }
.sugg { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; }
.sugg p { margin: 0; flex: 1; }
.lib-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.lib-item p { margin: 0; flex: 1; }
.tag { font-size: .74rem; color: var(--muted); background: var(--surface-2); padding: 1px 7px; border-radius: 5px; margin-right: 4px; }
.timeline { border-left: 2px solid var(--line-strong); margin-left: 6px; padding-left: 16px; }
.timeline .t { position: relative; padding-bottom: 14px; }
.timeline .t::before { content: ""; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.timeline .t.sup::before { background: var(--warn); }

/* ---------- Đăng nhập ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(900px 500px at 15% 0%, rgba(94, 92, 230, .35), transparent 60%), radial-gradient(900px 500px at 100% 100%, rgba(0, 113, 227, .35), transparent 60%), var(--bg); }
.auth .card { width: 100%; max-width: 420px; padding: 32px; box-shadow: var(--shadow-hover); }
.auth .tile { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #34c3ff, #0071e3 55%, #5e5ce6); }
.auth .tile svg { width: 36px; height: 36px; }
.auth h1 { font-size: 1.25rem; text-align: center; }
.auth p.sub { text-align: center; color: var(--muted); margin-top: 0; }
.auth form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }

/* ---------- Thiết bị nhỏ ---------- */
@media (max-width: 1200px) { .hero .art { opacity: .35; } }
@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; background: var(--bg); }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 290px; z-index: 70; transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .side { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .4); }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 65; }
  .menu { left: 0; }
  .mobilebar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; position: sticky; top: 0; z-index: 40; background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); }
  .mobilebar b { font-weight: 800; letter-spacing: .02em; }
  .applist { grid-template-columns: 1fr; }
  .ai .ico { width: 64px; height: 64px; border-radius: 16px; } .ai .ico svg { width: 32px; height: 32px; }
  .ai .txt b { font-size: 1.05rem; } .ai .txt span { font-size: .92rem; } .pill { min-width: 72px; padding: 6px 14px; font-size: .95rem; }
  .explore-head h1 { font-size: 2.2rem; }
  .hero { padding: 26px 22px; min-height: 0; } .hero h2 { font-size: 1.8rem; } .hero .art { display: none; }
  .picks { grid-template-columns: 1fr; gap: 20px; }
  .content { padding: 20px 16px 48px; }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 100px 1fr 60px; }
  /* Bảng đánh giá thành dạng thẻ */
  table.eval, .eval tbody, .eval tr, .eval td { display: block; width: 100%; }
  .eval thead { display: none; }
  .eval tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; background: var(--surface); }
  .eval td { border-bottom: 0; padding: 6px 12px; }
  .eval td[data-label]::before { content: attr(data-label); display: block; font-size: .76rem; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
  .eval td.col-chk { padding-bottom: 0; }
  .eval td.col-chk::after { content: " Chọn để thao tác hàng loạt"; font-size: .78rem; color: var(--muted); }
  .eval td.stt-cell { display: none; }
  .eval .status { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .eval-bar { top: 59px; }
}

/* ---------- In ấn ---------- */
#print-area { display: none; }
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { background: #fff; font-size: 11pt; }
  #app, #toasts { display: none !important; }
  #print-area { display: block; }
  #print-area h1 { text-align: center; font-size: 15pt; margin-bottom: 8px; }
  #print-area .meta { margin-bottom: 10px; font-size: 10pt; }
  #print-area table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  #print-area th, #print-area td { border: 1px solid #555; padding: 4px 5px; vertical-align: top; text-align: left; }
  #print-area th { background: #e6eef5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-area tr { page-break-inside: avoid; }
  #print-area td.mark-cell { text-align: center; font-size: 12pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-area .lbg-page { page-break-after: always; font-family: "Times New Roman", serif; }
  #print-area .lbg-head { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 11pt; }
  #print-area .lbg-head .t { width: 55%; text-align: center; }
  #print-area table.lbg-print { font-size: 10pt; margin-top: 6px; }
  #print-area table.lbg-print td.c { text-align: center; }
  #print-area .lbg-sign { display: flex; justify-content: space-around; margin-top: 14px; text-align: center; font-size: 11pt; }
  #print-area .sign { margin-top: 24px; margin-left: 60%; text-align: center; }
  #print-area .note { font-style: italic; font-size: 8.5pt; margin-top: 10px; }
}

/* Biểu tượng nhỏ trong kết quả tìm kiếm */
.ico-sm { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.ico-sm svg { width: 17px; height: 17px; }

/* ===== Bộ chọn tuần cỡ lớn ===== */
.weekpick { display: grid; gap: 12px; }
.wp-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wp-nav { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font-size: 2rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 4px; flex: none; }
.wp-nav:hover:not(:disabled) { background: var(--primary); color: #fff; border-color: var(--primary); }
.wp-nav:disabled { opacity: .35; cursor: default; }
.wp-title { display: flex; flex-direction: column; min-width: 220px; flex: 1 1 auto; text-align: center; }
.wp-no { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.wp-date { font-size: 1.12rem; color: var(--muted); margin-top: 2px; }
.wp-date .badge { font-size: .8rem; vertical-align: middle; }
.wp-today { flex: none; }
.wp-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.wp-chip { flex: none; scroll-snap-align: center; min-width: 64px; padding: 8px 6px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wp-chip b { font-size: 1.3rem; line-height: 1.1; }
.wp-chip small { font-size: .8rem; color: var(--muted); }
.wp-chip:hover { border-color: var(--primary); }
.wp-chip.cur { border: 2px solid var(--ok); }
.wp-chip.off { opacity: .55; text-decoration: line-through; }
.wp-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; opacity: 1; text-decoration: none; }
.wp-chip.on small { color: rgba(255,255,255,.85); }
@media (max-width: 600px) { .wp-top { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; } .wp-no { font-size: 1.6rem; } .wp-date { font-size: .95rem; } .wp-nav { width: 44px; height: 44px; }
  .wp-title { min-width: 0; flex: 1 1 0; } .wp-today { grid-column: 1 / -1; justify-self: center; } }

/* ===== Kế hoạch bài dạy ===== */
.notice.ok { background: var(--ok-soft); color: var(--ok); }
.khbd .card { margin-bottom: 12px; }
.khbd .card h2 { font-size: 1.1rem; }
.khbd textarea { resize: vertical; line-height: 1.45; }
.hd-item { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; background: var(--surface-2); }
.hd-top { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.hd-top input[data-a=ten] { flex: 1 1 auto; font-weight: 600; }
.hd-top .hd-tg { width: 110px; flex: none; }
.hd-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
@media (max-width: 760px) { .hd-cols { grid-template-columns: 1fr; } .hd-top { flex-wrap: wrap; } .hd-top input[data-a=ten] { flex-basis: 100%; } }
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.thumbs img { height: 72px; max-width: 160px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.sec-item { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.sec-item .hd-top input[data-k=title] { flex: 1 1 auto; font-weight: 700; }
.hd-cols.three { grid-template-columns: 1.3fr 1fr .8fr; }
@media (max-width: 760px) { .hd-cols.three { grid-template-columns: 1fr; } }
.lbg-tbl [data-khbd][data-st=ok] { color: var(--ok); border-color: var(--ok); }
.lbg-tbl [data-khbd][data-st=auto] { color: var(--warn); border-color: var(--warn); }
.lbg-tbl [data-khbd] { white-space: nowrap; }
.lbg-tbl { min-width: 1180px; }
.lbg-tbl th:nth-child(7), .lbg-tbl td:nth-child(7) { min-width: 230px; }

/* ===== Thêm giáo án: kéo thả, xem trước, tổng quan tuần ===== */
.dropzone { border: 2px dashed var(--line-strong); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: var(--surface-2); }
.dropzone small { color: var(--muted); max-width: 520px; }
.drop-on { outline: 3px dashed var(--primary); outline-offset: -6px; background: var(--primary-soft) !important; }
.segl { padding: 6px 12px; font-size: .86rem; border-radius: 8px; color: var(--text); text-decoration: none; }
.segl.on { background: var(--surface); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.chip { display: inline-flex; gap: 4px; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: .8rem; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); text-decoration: none; margin: 2px 2px; white-space: nowrap; }
.chip.on { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.chip.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.chip.auto { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.chip.none { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.legend .chip { cursor: default; }
.wk-row { margin-bottom: 10px; padding: 14px 16px; }
.wk-row.cur { border: 2px solid var(--primary); }
.wk-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 2px; }
.warn-t { color: var(--warn); }

/* ===== Trò chơi học tập ===== */
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.game-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.gc-top { display: flex; gap: 12px; align-items: flex-start; }
.gc-top .ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem; flex: none; }
.gc-top > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gc-act { display: flex; flex-wrap: wrap; gap: 6px; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.type-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--text); }
.type-card:hover { border-color: var(--primary); }
.type-card .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem; }
.q-item, .row-item { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.row-item { display: flex; gap: 8px; align-items: center; padding: 8px; }
.row-item input[type=text], .row-item input:not([type]) { flex: 1 1 auto; }
.order-ed { padding-left: 22px; }
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.opt { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; color: #fff; }
.opt input:not([type=radio]) { flex: 1; background: rgba(255,255,255,.95); color: #111; border: 0; }
.opt input[type=radio] { width: 22px; height: 22px; accent-color: #fff; }
.grp-ed { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.grp { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.bulk { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.bulk summary { cursor: pointer; font-weight: 600; }
.bulk textarea { width: 100%; margin: 6px 0; font-family: inherit; }
@media (max-width: 700px) { .opts { grid-template-columns: 1fr; } }

.stage { background: var(--surface); border-radius: 20px; padding: 18px; min-height: 60vh; border: 1px solid var(--line); }
.stage:fullscreen { padding: 32px; overflow: auto; }
.gm { display: flex; flex-direction: column; gap: 14px; }
.gm-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.gm-title { font-size: 1.3rem; }
.gm-meta { font-weight: 600; color: var(--muted); }
.gm-center { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 10px; }
.gm-hint { color: var(--muted); margin: 0; text-align: center; }
.gm-q { font-size: clamp(1.3rem, 2.6vw, 2.2rem); font-weight: 700; text-align: center; padding: 18px; border-radius: 18px; background: var(--surface-2); }
.gm-q.small { font-size: 1.2rem; }
.gm-timer { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.gm-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #34c759, #ffcc00, #ff3b30); transition: width .1s linear; }
.gm-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gm-tiles.two .gm-tile { font-size: clamp(1.4rem, 3vw, 2.4rem); min-height: 130px; }
.gm-tile { display: flex; align-items: center; gap: 14px; text-align: left; border: 0; border-radius: 16px; padding: 18px; min-height: 92px; font-size: clamp(1.05rem, 2vw, 1.6rem); font-weight: 700; color: #fff; cursor: pointer; transition: transform .1s, opacity .2s; box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.gm-tile:hover:not(:disabled) { transform: translateY(-2px); }
.gm-tile span { font-size: 1.6rem; opacity: .9; }
.gm-tile.dim { opacity: .35; } .gm-tile.right { outline: 5px solid #fff; box-shadow: 0 0 0 9px #34c759; } .gm-tile.wrong { animation: gmShake .4s; } .gm-tile.picked { outline: 5px solid #fff; box-shadow: 0 0 0 9px var(--primary); }
.gm-red { background: #e5484d; } .gm-blue { background: #2f6fde; } .gm-yellow { background: #d9a300; } .gm-green { background: #2e9e4d; } .gm-purple { background: #8e4ec6; } .gm-orange { background: #e8730c; }
.gm-match { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gm-match > div { display: flex; flex-direction: column; gap: 10px; }
.gm-card { border: 2px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: 14px; padding: 14px; font-size: 1.1rem; font-weight: 600; cursor: pointer; text-align: center; min-height: 58px; }
.gm-card.b { background: var(--surface-2); }
.gm-card.sel { border-color: var(--primary); background: var(--primary-soft); }
.gm-card.right { border-color: #34c759; background: #34c75922; color: var(--ok); cursor: default; }
.gm-card.wrong, .shake { animation: gmShake .4s; border-color: #ff3b30 !important; }
@keyframes gmShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.gm-flip { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 10px; }
.gm-fc { position: relative; min-height: 110px; border: 0; border-radius: 14px; cursor: pointer; perspective: 600px; background: transparent; padding: 0; }
.gm-fc span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; padding: 8px; backface-visibility: hidden; transition: transform .35s; font-weight: 700; }
.gm-fc .f { background: linear-gradient(135deg, #5e5ce6, #0a84ff); color: #fff; font-size: 2rem; }
.gm-fc .t { background: var(--surface-2); color: var(--text); transform: rotateY(180deg); border: 2px solid var(--line-strong); font-size: 1rem; }
.gm-fc.up .f { transform: rotateY(180deg); } .gm-fc.up .t { transform: rotateY(360deg); }
.gm-fc.right .t { border-color: #34c759; background: #34c75922; }
.gm-order { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 760px; margin: 0 auto; width: 100%; }
.gm-order li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line-strong); background: var(--surface); cursor: grab; font-size: 1.1rem; }
.gm-order .n { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.gm-order .t { flex: 1; }
.gm-order li.right { border-color: #34c759; background: #34c75918; } .gm-order li.wrong { border-color: #ff3b30; background: #ff3b3018; }
.gm-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 48px; padding: 10px; border-radius: 14px; background: var(--surface-2); }
.gm-chip { border: 2px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: 999px; padding: 8px 14px; font-size: 1rem; font-weight: 600; cursor: pointer; }
.gm-chip.sel { border-color: var(--primary); background: var(--primary-soft); }
.gm-chip.right { border-color: #34c759; background: #34c75922; } .gm-chip.wrong { border-color: #ff3b30; background: #ff3b3022; }
.gm-groups { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 12px; }
.gm-group { min-height: 160px; border: 2px dashed var(--line-strong); border-radius: 16px; padding: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; cursor: pointer; }
.gm-group b { width: 100%; text-align: center; font-size: 1.15rem; margin-bottom: 4px; }
.gm-wheel { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }
.gm-wheel-box { position: relative; width: min(560px, 90vw); }
.gm-wheel-box canvas { width: 100%; height: auto; display: block; }
.gm-pin { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 2.6rem; color: #ff3b30; text-shadow: 0 2px 4px rgba(0,0,0,.3); }
.gm-wside { display: flex; flex-direction: column; gap: 12px; align-items: center; min-width: 240px; }
.gm-won .gm-big { color: var(--primary); }
.gm-big { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; }
.gm-msg { font-size: 1.4rem; font-weight: 700; }
.gm-stars { font-size: 3rem; color: #ffb800; letter-spacing: 6px; } .gm-stars span { color: var(--line-strong); }
.gm-review { text-align: left; max-width: 760px; width: 100%; margin-top: 12px; display: grid; gap: 6px; }
.gm-review > div { padding: 8px 12px; border-radius: 12px; } .gm-review .ok { background: var(--ok-soft); } .gm-review .no { background: var(--danger-soft); }
.gm-lb { text-align: left; min-width: 280px; } .gm-lb li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.gm-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; }
.gm-confetti i { position: absolute; top: -10px; width: 10px; height: 16px; border-radius: 2px; animation: gmFall linear forwards; }
@keyframes gmFall { to { transform: translateY(105vh) rotate(720deg); } }
@media (max-width: 700px) { .gm-tiles, .gm-match { grid-template-columns: 1fr; } .gm-groups { grid-template-columns: 1fr; } }

/* Phòng trực tiếp */
.live-head { display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.live-title { font-size: 1.6rem; font-weight: 800; }
.live-url { font-size: 1.1rem; color: var(--muted); }
.live-code { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 900; letter-spacing: .08em; background: var(--primary); color: #fff; padding: 6px 26px; border-radius: 18px; }
.live-code .closed { font-size: 1.6rem; letter-spacing: 0; }
.live-stats { display: flex; gap: 12px; margin-bottom: 14px; } .live-stats div { background: var(--surface-2); border-radius: 14px; padding: 10px 18px; display: flex; flex-direction: column; } .live-stats b { font-size: 1.8rem; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; max-width: 620px; margin: 0 auto 16px; text-align: center; }
.pod .pb { border-radius: 12px 12px 0 0; color: #fff; font-size: 2rem; font-weight: 900; display: grid; place-items: center; }
.pod.p1 .pb { height: 120px; background: #ffb800; } .pod.p2 .pb { height: 90px; background: #a1a1aa; } .pod.p3 .pb { height: 70px; background: #c2783e; }
.pod .pn { font-weight: 800; } .pod .ps { color: var(--muted); }
.stage:fullscreen .no-proj { display: none; }

/* Bảng ý kiến */
.pb-head { text-align: center; } .pb-head h1 { margin: 0 0 4px; } .pb-head p { font-size: 1.2rem; margin: 0 0 8px; }
.pb-wall { display: grid; grid-template-columns: repeat(var(--n), minmax(220px, 1fr)); gap: 12px; overflow-x: auto; }
.pb-col h3 { margin: 0 0 8px; text-align: center; padding: 8px; border-radius: 12px; background: var(--surface-2); }
.pb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pb-wall[style*="--n:1"] .pb-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pb-note { border-radius: 14px; padding: 12px; color: #1d1d1f; box-shadow: 0 2px 6px rgba(0,0,0,.12); display: flex; flex-direction: column; gap: 8px; animation: pbIn .3s; }
@keyframes pbIn { from { transform: scale(.9); opacity: 0; } }
.pb-note.pending { opacity: .6; outline: 2px dashed #8e8e93; }
.pb-text { font-size: 1.05rem; white-space: pre-wrap; word-break: break-word; }
.pb-foot { display: flex; justify-content: space-between; gap: 6px; font-size: .8rem; color: #3a3a3c; align-items: center; }
.pb-foot button { border: 0; background: rgba(255,255,255,.6); border-radius: 999px; padding: 2px 8px; cursor: pointer; font-size: .85rem; }
.n-yellow { background: #fff3a8; } .n-pink { background: #ffc9de; } .n-blue { background: #c7e2ff; } .n-green { background: #c9f2d0; } .n-purple { background: #e2d4ff; } .n-orange { background: #ffd8b0; } .n-gv { background: #fff; border: 2px solid var(--primary); }
.pb-form { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
.pb-form textarea { flex: 1 1 320px; font-size: 1.05rem; }
.pb-colors { display: flex; gap: 4px; }
.pb-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); cursor: pointer; display: grid; place-items: center; }
.pb-dot input { appearance: none; width: 12px; height: 12px; border-radius: 50%; margin: 0; } .pb-dot input:checked { background: #1d1d1f; }

/* Trang học sinh */
.play-app { min-height: 100vh; background: linear-gradient(160deg, #5e5ce6 0%, #0a84ff 55%, #30d158 120%); padding: 0 16px 30px; }
.play-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; color: #fff; } .play-head a { color: #fff; text-decoration: none; font-size: 1.2rem; } .play-head .muted { color: rgba(255,255,255,.85); }
.play-card { max-width: 480px; margin: 6vh auto 0; background: var(--surface); border-radius: 24px; padding: 28px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.play-card.wide { max-width: 860px; }
.play-card form { display: flex; flex-direction: column; gap: 12px; }
.play-emoji { font-size: 3.4rem; }
.play-code { font-size: 2.2rem; text-align: center; letter-spacing: .25em; font-weight: 800; padding: 12px; border-radius: 16px; }
.play-search { width: 100%; margin-bottom: 12px; }
.play-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; max-height: 55vh; overflow: auto; }
.play-name { padding: 12px; border-radius: 14px; border: 2px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-size: 1.05rem; font-weight: 600; cursor: pointer; }
.play-name:hover { border-color: var(--primary); background: var(--primary-soft); }
.play-game, .pb { max-width: 1200px; margin: 0 auto; background: var(--surface); border-radius: 24px; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.tbl .track { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; min-width: 80px; }
.tbl .track .fill { height: 100%; background: var(--primary); border-radius: 999px; transition: width .4s; }

/* ===== Hình ảnh tiết học & sao ===== */
.album { margin-bottom: 12px; }
.al-head { margin-bottom: 10px; }
.al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.al-ph { position: relative; border: 0; padding: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; background: var(--surface-2); }
.al-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.al-ph:hover img { transform: scale(1.04); }
.al-ph.sel { outline: 4px solid var(--primary); outline-offset: -4px; }
.al-pub { position: absolute; right: 6px; top: 6px; background: rgba(255,255,255,.9); border-radius: 999px; padding: 1px 6px; font-size: .8rem; }
.al-chk { position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.95); border: 2px solid var(--primary); display: grid; place-items: center; color: var(--primary); font-weight: 800; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 1000; display: grid; place-items: center; padding: 20px; }
.lightbox figure { margin: 0; max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lightbox img { max-width: 92vw; max-height: 76vh; border-radius: 10px; object-fit: contain; }
.lightbox figcaption { color: #fff; text-align: center; }
.lb-x, .lb-prev, .lb-next { position: fixed; border: 0; background: rgba(255,255,255,.15); color: #fff; width: 52px; height: 52px; border-radius: 50%; font-size: 1.8rem; cursor: pointer; }
.lb-x { top: 16px; right: 16px; } .lb-prev { left: 16px; top: 50%; } .lb-next { right: 16px; top: 50%; }
.lb-tools { display: flex; gap: 6px; justify-content: center; margin: 8px 0 4px; flex-wrap: wrap; }
.reasons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.reasons .chip { cursor: pointer; font-size: .9rem; padding: 6px 12px; }
.star-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 12px; align-items: start; }
.star-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.star-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; text-align: center; transition: transform .1s; }
.star-card:hover { transform: translateY(-2px); border-color: #ffb800; }
.star-card:active { transform: scale(.97); }
.star-card.sel { border-color: var(--primary); background: var(--primary-soft); }
.star-card .av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff9f0a, #ff375f); }
.star-card .stars-n { display: flex; flex-direction: column; } .star-card .big { color: #d9a300; font-weight: 800; font-size: 1.2rem; }
.star-card .today { position: absolute; top: 8px; right: 8px; font-size: .72rem; background: #ffb800; color: #fff; border-radius: 999px; padding: 1px 7px; }
.star-fly { position: absolute; top: 20%; left: 50%; font-size: 2.6rem; color: #ffb800; pointer-events: none; animation: starFly .9s ease-out forwards; }
@keyframes starFly { from { transform: translate(-50%, 0) scale(.6); opacity: 1; } to { transform: translate(-50%, -80px) scale(1.6); opacity: 0; } }
.star-side { position: sticky; top: 10px; max-height: 80vh; overflow: auto; }
.log-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.honor-list { max-width: 520px; margin: 0 auto; } .honor-list li { display: flex; justify-content: space-between; padding: 6px 4px; font-size: 1.1rem; }
@media (max-width: 900px) { .star-wrap { grid-template-columns: 1fr; } .star-side { position: static; } }
.rt-stars { display: flex; gap: 6px; justify-content: center; }
.rt-stars button { border: 0; background: none; font-size: 2rem; color: var(--line-strong); cursor: pointer; padding: 0 2px; transition: transform .1s; line-height: 1; }
.rt-stars.big button { font-size: clamp(3rem, 8vw, 5rem); }
.rt-stars button.on { color: #ffb800; text-shadow: 0 2px 6px rgba(255,184,0,.4); }
.rt-stars button:hover { transform: scale(1.15); }
.rt-face { font-size: 1.6rem; min-height: 2.2rem; }
.rt-crit { max-width: 720px; margin: 0 auto; width: 100%; display: grid; gap: 8px; }
.rt-c { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 14px; background: var(--surface-2); font-size: 1.1rem; font-weight: 600; }
.rt-live { display: grid; grid-template-columns: 220px 1fr 1fr; gap: 16px; align-items: center; margin-bottom: 16px; }
.rt-avg { text-align: center; } .rt-avg-st { color: #ffb800; font-size: 1.8rem; letter-spacing: 2px; }
.rt-dist > div, .rt-cr > div { display: grid; grid-template-columns: 34px 1fr 30px; gap: 8px; align-items: center; margin: 4px 0; }
.rt-dist .track { height: 14px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .rt-dist .fill { height: 100%; background: #ffb800; }
.rt-cr > div { grid-template-columns: 1fr auto; padding: 6px 10px; background: var(--surface-2); border-radius: 10px; }
.rt-comments { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
@media (max-width: 900px) { .rt-live { grid-template-columns: 1fr; } }
.rate { color: #d9a300; white-space: nowrap; }
.dist { display: flex; gap: 3px; align-items: flex-end; height: 34px; } .dist i { flex: 1; background: #ffb800; border-radius: 3px 3px 0 0; min-height: 2px; }
.star-mark{display:flex;align-items:center;gap:6px;font-size:.92rem;padding:8px 10px;border-radius:10px;background:var(--ok-bg,#e8f7ee);cursor:pointer}
.star-mark input{width:18px;height:18px}
.star-mark .mk-plus{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#1f9d55;color:#fff}

/* ===== Ôn tập & Kiểm tra ===== */
.ot-sel .f { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--muted); }
.ot-sel .seg button[disabled] { opacity: .45; cursor: not-allowed; }
.ot-lesson { margin-bottom: 12px; }
.ot-lh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ot-lh h3 { margin: 0; font-size: 1.05rem; }
.ot-sec { font-weight: 700; font-size: .9rem; margin: 12px 0 6px; color: var(--primary); }
.ot-item { display: flex; gap: 8px; align-items: flex-start; padding: 5px 6px; border-radius: 8px; cursor: pointer; line-height: 1.45; }
.ot-item:hover { background: var(--surface-2); }
.ot-item > input { margin-top: 4px; flex: none; width: 16px; height: 16px; }
.ot-item.q > div { flex: 1; min-width: 0; }
.ot-stem { margin: 4px 0; line-height: 1.5; }
.ot-opts { list-style: none; margin: 4px 0 4px 6px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 14px; }
.ot-opts li { padding: 3px 8px; border-radius: 8px; border: 1px solid transparent; }
.ot-opts li[data-pick] { cursor: pointer; }
.ot-opts li[data-pick]:hover { border-color: var(--line-strong); background: var(--surface-2); }
.ot-opts li.ans { background: var(--ok-soft); border-color: #9cc9ae; color: var(--ok); font-weight: 600; }
.ot-tick { font-weight: 800; }
.ot-img { display: block; max-width: min(320px, 100%); max-height: 200px; margin: 6px 0; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.ot-img.sm { display: inline-block; max-height: 90px; max-width: 140px; vertical-align: middle; margin: 2px 0 2px 6px; }
.ot-warn { color: var(--warn); font-size: .84rem; margin: 2px 0; }
.ot-guide { font-size: .86rem; background: var(--surface-2); border-radius: 8px; padding: 6px 10px; margin-top: 6px; }
.ot-src { font-size: .78rem; color: var(--muted); margin-left: 4px; }
.badge.lv1 { background: #e7f1ff; color: #1d5fbf; }
.badge.lv2 { background: #fff1db; color: #a35a00; }
.badge.lv3 { background: #fde7ef; color: #b0245a; }
.ot-q { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; padding: 12px 14px; }
.ot-q.pend { border-left: 4px solid var(--warn); }
.ot-cb input { width: 18px; height: 18px; margin-top: 3px; }
.ot-qb { flex: 1; min-width: 0; }
.ot-qa { display: flex; flex-direction: column; gap: 4px; flex: none; }
.ot-bulk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--primary-soft); }
.ot-bulk.hidden { display: none; }
.ot-form .row3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.ot-form .f { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-size: .86rem; }
.ot-form textarea { width: 100%; }
.ot-optrow { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.ot-optrow input[name^="o"] { flex: 1; }
.ot-exam-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ot-lessons { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.ot-struct input { width: 64px; }
.ot-struct td { vertical-align: middle; }
.err-t { color: var(--danger); }
.ot-saved { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ot-saved:last-child { border-bottom: 0; }
.ot-exhead .f { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--muted); }
.ot-exhead .f.grow { flex: 1; min-width: 220px; }
.ot-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: .9rem; }
.ot-part { margin-top: 12px; }
.ot-part h3 { margin: 0 0 8px; }
.ot-ei { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ot-ea { display: flex; flex-direction: column; gap: 4px; flex: none; align-items: stretch; }
.ot-ea input { width: 70px; display: block; }
.ot-pick { max-height: 60vh; overflow: auto; }
@media (max-width: 900px) {
  .ot-exam-grid { grid-template-columns: 1fr; }
  .ot-form .row3 { grid-template-columns: 1fr; }
  .ot-ei, .ot-q { flex-direction: column; }
  .ot-ea, .ot-qa { flex-direction: row; flex-wrap: wrap; }
}
#fs, #fl { min-width: 210px; }
@media (max-width: 600px) { .ot-opts { grid-template-columns: 1fr; } }

/* ===== Logo THẦY LẬP IT ===== */
.brand-word { display: block; font-weight: 900; font-size: 1.42rem; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.brand-word .b1 { color: var(--brand-1); }
.brand-word .b2 { color: var(--brand-2); margin-left: .28em; }
.logo { padding: 4px 10px 6px; }
.logo small { margin-top: 5px; }
.mb-brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark.sm { width: 32px; height: 22px; }
.mb-brand .brand-word { font-size: 1.15rem; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 4px; }
.brand-mark.big { width: 76px; height: 52px; }
.auth-brand h1 { margin: 0; }
.auth-brand .brand-word { font-size: 1.9rem; }

/* ===== Buổi sáng / chiều trong lịch báo giảng & thời khoá biểu ===== */
:root { --sang: #b45f00; --sang-bg: #fff4dc; --sang-row: #fffaf0; --chieu: #4549c2; --chieu-bg: #e9ebff; --chieu-row: #f6f7ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sang: #ffc261; --sang-bg: #4a3311; --sang-row: #2e2a22; --chieu: #aab0ff; --chieu-bg: #282c5c; --chieu-row: #26283a; } }
:root[data-theme="dark"] { --sang: #ffc261; --sang-bg: #4a3311; --sang-row: #2e2a22; --chieu: #aab0ff; --chieu-bg: #282c5c; --chieu-row: #26283a; }
.sess-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-weight: 800; font-size: .86rem; letter-spacing: .01em; white-space: nowrap; }
.sess-pill.sess-S { background: var(--sang-bg); color: var(--sang); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sang) 35%, transparent); }
.sess-pill.sess-C { background: var(--chieu-bg); color: var(--chieu); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chieu) 35%, transparent); }
.sess-pill.mini { padding: 1px 7px; font-size: .8rem; }
.lbg-tbl tr.sess-S td { background: var(--sang-row); }
.lbg-tbl tr.sess-C td { background: var(--chieu-row); }
.lbg-tbl tr.sess-S td:nth-child(2) { box-shadow: inset 4px 0 0 var(--sang); }
.lbg-tbl tr.sess-C td:nth-child(2) { box-shadow: inset 4px 0 0 var(--chieu); }
.lbg-tbl tr.sess-start td { border-top: 2px dashed color-mix(in srgb, var(--chieu) 55%, transparent); }
.lbg-tbl tr.off td { background: var(--surface-2); }
table.tkb tr.tkb-sess th { text-align: left; padding: 8px 10px; position: static; }
table.tkb tr.tkb-sess.sess-S th { background: var(--sang-bg); color: var(--sang); border-top: 3px solid var(--sang); }
table.tkb tr.tkb-sess.sess-C th { background: var(--chieu-bg); color: var(--chieu); border-top: 3px solid var(--chieu); }
table.tkb tr.tkb-sess .small { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
table.tkb tr.sess-S:not(.tkb-sess) td, table.tkb tr.sess-S:not(.tkb-sess) th { background: var(--sang-row); }
table.tkb tr.sess-C:not(.tkb-sess) td, table.tkb tr.sess-C:not(.tkb-sess) th { background: var(--chieu-row); }
table.tkb tr:not(.tkb-sess) th { color: var(--ink); font-weight: 700; }
.sess-pill svg { width: 15px; height: 15px; flex: none; }
.sess-pill.mini svg { width: 14px; height: 14px; }
table.tkb tr.tkb-sess .sess-pill { font-size: .95rem; padding: 4px 14px; }
table.tkb input.tkb-in.sess-S:not(:placeholder-shown) { border-color: color-mix(in srgb, var(--sang) 55%, transparent); color: var(--sang); background: var(--sang-bg); }
table.tkb input.tkb-in.sess-C:not(:placeholder-shown) { border-color: color-mix(in srgb, var(--chieu) 55%, transparent); color: var(--chieu); background: var(--chieu-bg); }
.pub-lbg tr.sess-S td { background: var(--sang-row); }
.pub-lbg tr.sess-C td { background: var(--chieu-row); }
.pub-lbg tr.sess-S td:nth-child(2) { box-shadow: inset 4px 0 0 var(--sang); }
.pub-lbg tr.sess-C td:nth-child(2) { box-shadow: inset 4px 0 0 var(--chieu); }

/* ===== Trò chơi kiểu Wayground ===== */
.wg-hero { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; padding: 26px 28px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #8e5cff 0%, #5b3fd6 45%, #3b2aa8 100%); box-shadow: 0 10px 30px rgba(73, 50, 190, .25); margin-bottom: 14px; }
.wg-hero h1 { margin: 0 0 12px; font-size: 1.9rem; letter-spacing: -.02em; }
.wg-hero-in { flex: 1 1 520px; min-width: 0; }
.wg-search { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 4px 6px 4px 14px; max-width: 640px; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.wg-search input { flex: 1; border: 0 !important; background: transparent !important; color: #111; font-size: 1rem; min-height: 42px; outline: none !important; box-shadow: none !important; }
.wg-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wg-qc { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-weight: 600; font-size: .86rem; }
.wg-qc:hover { background: rgba(255,255,255,.28); }
.wg-qc .ico { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .95rem; }
.wg-hero-act { display: flex; flex-direction: column; gap: 8px; }
.wg-hero-act .btn { background: #fff; color: #3b2aa8; border-color: #fff; font-weight: 700; }
.wg-hero-act .btn.primary { background: #ffd23f; border-color: #ffd23f; color: #2b1d00; }
.wg-tabs { margin: 0 0 14px; }
.wg-h { font-size: 1.15rem; margin: 6px 0 10px; }
.wg-libhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.wg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.wg-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.wg-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.wg-cover { position: relative; height: 104px; display: flex; align-items: center; justify-content: center; color: #fff; }
.wg-ico { font-size: 2.6rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,.2)); }
.wg-type { position: absolute; left: 10px; bottom: 8px; font-size: .74rem; font-weight: 700; background: rgba(0,0,0,.25); padding: 2px 8px; border-radius: 999px; }
.wg-live { position: absolute; right: 10px; top: 8px; font-size: .74rem; font-weight: 800; background: #fff; color: #d70015; padding: 2px 8px; border-radius: 999px; }
.cv-blue { background: linear-gradient(135deg, #4f8bff, #2759d6); } .cv-green { background: linear-gradient(135deg, #34c77b, #13915a); } .cv-purple { background: linear-gradient(135deg, #b16cff, #7a3be0); }
.cv-orange { background: linear-gradient(135deg, #ffa24c, #f06a1d); } .cv-teal { background: linear-gradient(135deg, #2ec5c9, #128a9b); } .cv-pink { background: linear-gradient(135deg, #ff7aa8, #e0386e); }
.cv-red { background: linear-gradient(135deg, #ff6b6b, #d63031); } .cv-amber { background: linear-gradient(135deg, #ffc94a, #f39c12); } .cv-indigo { background: linear-gradient(135deg, #7a7fff, #4a4fd0); }
.wg-body { padding: 10px 12px 4px; flex: 1; }
.wg-title { display: block; line-height: 1.3; }
.wg-meta, .wg-plays { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.wg-lesson { font-size: .8rem; margin-top: 3px; color: var(--ink); opacity: .8; }
.wg-act { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px 10px 10px; }
.wg-act .btn.primary { flex: 1; }
.wg-run { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 10px; }
.wg-room { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid #8e5cff; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); }
.wg-room.closed { border-left-color: var(--line-strong); }
.wg-rh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wg-mode { font-size: .78rem; font-weight: 700; color: #6a45e0; }
.wg-code { font-family: ui-monospace, Menlo, monospace; font-weight: 800; letter-spacing: .12em; background: #efe9ff; color: #4b2fbf; padding: 2px 8px; border-radius: 8px; }
.wg-prog { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); }
.wg-prog .track { flex: 1; }
.wg-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.wg-mcard { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; }
.wg-mcard.on { border-color: #7a4dff; background: color-mix(in srgb, #7a4dff 8%, var(--surface)); }
.wg-mi { font-size: 1.6rem; }
.live-mode { font-size: .9rem; margin-top: 4px; opacity: .9; }
.live-mode code.sel { user-select: all; }
/* học sinh */
.play-mode { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; background: #efe9ff; color: #4b2fbf; margin: 2px; }
.play-mode.m-dl { background: #fff1db; color: #a35a00; }
.gm-pts { color: #b88600; }
.gm-points { font-size: 1.5rem; font-weight: 900; color: #b88600; margin: 4px 0; }
.gm-fx { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 22px; border-radius: 16px; color: #fff; font-size: 1.05rem; box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: gmPop .35s ease-out; z-index: 5; white-space: nowrap; }
.gm-fx.ok { background: linear-gradient(135deg, #20b25b, #0d8a43); } .gm-fx.no { background: linear-gradient(135deg, #ff6b5b, #d63031); }
.gm-fx span { font-size: 1.6rem; font-weight: 900; } .gm-fx i { font-style: normal; font-size: .9rem; }
@keyframes gmPop { from { transform: translate(-50%, 20px) scale(.8); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
.gm-body { position: relative; }
.pc-wrap { max-width: 900px; margin: 0 auto; padding: 10px; }
.pc-head { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 10px; }
.pc-head b { color: #b88600; }
.pc-res.ok { border-top: 6px solid #20b25b; } .pc-res.no { border-top: 6px solid #d63031; }
.pc-rank { font-size: 1.3rem; }
.pc-pulse { animation: pcP 1.4s ease-in-out infinite; }
@keyframes pcP { 50% { transform: scale(1.15); } }
/* thầy điều khiển */
.pz { padding: 6px 0; }
.pz-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; }
.pz-clock { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; font-weight: 900; background: #7a4dff; color: #fff; }
.pz-clock.hot { background: #d63031; animation: pcP .8s infinite; }
.pz-q { font-size: clamp(1.4rem, 3vw, 2.3rem); font-weight: 800; text-align: center; margin: 18px 0 20px; line-height: 1.3; }
.pz-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pz-tile { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 18px; min-height: 80px; border-radius: 14px; color: #fff; font-size: clamp(1rem, 2vw, 1.4rem); font-weight: 700; overflow: hidden; }
.pz-tile.dim { opacity: .35; } .pz-tile.right { box-shadow: 0 0 0 4px #fff, 0 0 0 8px #20b25b; }
.pz-sym { font-size: 1.4rem; }
.pz-txt { flex: 1; }
.pz-cnt { display: flex; align-items: flex-end; gap: 6px; height: 48px; }
.pz-cnt i { width: 14px; background: rgba(255,255,255,.85); border-radius: 4px 4px 0 0; min-height: 3px; }
.pz-cnt b { font-size: 1.4rem; }
.pz-ok { position: absolute; right: 10px; top: 6px; font-size: 1.4rem; }
.pz-ctl { display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.pz-lobby { text-align: center; }
.pz-names { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; }
.pz-names span { background: var(--surface-2); padding: 6px 12px; border-radius: 999px; font-weight: 600; animation: gmPop2 .3s ease-out; }
@keyframes gmPop2 { from { transform: scale(.6); opacity: 0; } }
.pz-h { text-align: center; }
.pz-board { max-width: 560px; margin: 10px auto; padding-left: 28px; }
.pz-board li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); margin-bottom: 6px; font-size: 1.1rem; }
/* báo cáo */
.rp-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.rp-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.rp-c { min-width: 120px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; }
.rp-c b { font-size: 1.5rem; } .rp-c span { font-size: .78rem; color: var(--muted); }
.rp-c.a-hi { background: #e3f7ea; color: #0d7a3d; } .rp-c.a-mid { background: #fff3d6; color: #9a5b00; } .rp-c.a-lo { background: #fde4e2; color: #b42318; }
.rp-acc { font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.rp-acc.a-hi { background: #e3f7ea; color: #0d7a3d; } .rp-acc.a-mid { background: #fff3d6; color: #9a5b00; } .rp-acc.a-lo { background: #fde4e2; color: #b42318; }
.rp-tbl th.rp-qh { text-align: center; padding: 6px 4px; }
.rp-cell { text-align: center !important; font-weight: 800; padding: 6px 4px !important; }
.rp-cell.ok { background: #d9f5e3 !important; color: #0d7a3d; } .rp-cell.no { background: #fde0dd !important; color: #b42318; } .rp-cell.na { background: var(--surface-2) !important; }
.rp-qs { display: grid; gap: 10px; }
.rp-q.hard { border-left: 5px solid #d63031; }
.rp-qhd { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rp-qt { margin: 6px 0 8px; font-weight: 600; }
.rp-opt { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 30px; gap: 10px; align-items: center; padding: 4px 8px; border-radius: 8px; font-size: .9rem; }
.rp-opt.ok { background: #e3f7ea; color: #0d7a3d; font-weight: 700; }
@media (max-width: 700px) { .pz-tiles { grid-template-columns: 1fr; } .wg-hero h1 { font-size: 1.4rem; } }
.pc-head { color: #fff; }
.pc-head .pc-pts { background: #fff; color: #9a6b00; padding: 2px 12px; border-radius: 999px; }
.pz-tile .pz-ok { position: static; margin-left: 4px; }
.wg-act { flex-wrap: nowrap; }
.wg-act .btn.ghost { padding-left: 6px; padding-right: 6px; }

/* ===== Bảng kiểu Padlet ===== */
.pd { position: relative; min-height: 70vh; border-radius: 20px; padding: 18px 18px 90px; color: #1d1d1f; overflow: hidden; }
.pd-wp-sky { background: linear-gradient(160deg, #a8d8ff 0%, #6fb1ff 55%, #5b8cff 100%); }
.pd-wp-sunset { background: linear-gradient(160deg, #ffd7a8 0%, #ff9a8b 55%, #ff6a88 100%); }
.pd-wp-mint { background: linear-gradient(160deg, #d4fce6 0%, #96e6c3 60%, #5ccf9f 100%); }
.pd-wp-grape { background: linear-gradient(160deg, #9b7bff 0%, #6a4ce0 60%, #4527a0 100%); }
.pd-wp-peach { background: linear-gradient(160deg, #fff1e6 0%, #ffd6c4 60%, #ffb7a1 100%); }
.pd-wp-cork { background-color: #c79a63; background-image: radial-gradient(rgba(90, 55, 20, .35) 1.2px, transparent 1.5px), radial-gradient(rgba(255, 230, 190, .35) 1px, transparent 1.4px); background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px; }
.pd-wp-chalk { background-color: #2f4f3e; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px); background-size: 6px 6px; }
.pd-wp-night { background-color: #141a3a; background-image: radial-gradient(#fff 1px, transparent 1.4px), radial-gradient(rgba(255,255,255,.6) .8px, transparent 1.2px), linear-gradient(180deg, #1c2459, #0d1029); background-size: 120px 120px, 70px 70px, 100% 100%; background-position: 10px 20px, 40px 60px, 0 0; }
.pd-wp-dots { background-color: #f7f5ff; background-image: radial-gradient(#c9c0ff 1.6px, transparent 1.8px); background-size: 18px 18px; }
.pd-wp-plain { background: #eef0f4; }
.pd-wp-grape .pd-head, .pd-wp-chalk .pd-head, .pd-wp-night .pd-head { color: #fff; }
.pd-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.pd-icon { font-size: 2rem; width: 54px; height: 54px; border-radius: 16px; background: rgba(255,255,255,.85); display: grid; place-items: center; flex: none; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.pd-ht { flex: 1; min-width: 0; }
.pd-ht h1 { margin: 0; font-size: 1.5rem; letter-spacing: -.01em; }
.pd-prompt { margin: 4px 0 0; font-size: 1.15rem; font-weight: 600; }
.pd-desc { margin: 4px 0 0; opacity: .85; }
.pd-head a { color: inherit; }
.pd-hr { display: flex; gap: 8px; align-items: center; font-size: .85rem; font-weight: 700; flex-wrap: wrap; justify-content: flex-end; }
.pd-hr > span { background: rgba(255,255,255,.75); color: #1d1d1f; padding: 4px 10px; border-radius: 999px; }
.pd-freeze { border: 0; cursor: pointer; padding: 6px 12px; border-radius: 999px; background: #fff; font-weight: 700; color: #1d1d1f; }
.pd-freeze.on { background: #ffd23f; }
.pd-banner { background: rgba(255,255,255,.92); border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; font-weight: 600; color: #1d1d1f; }
.pd-banner.hidden, .pd-fab.hidden { display: none; }
.pd-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 60px 10px; color: #1d1d1f; background: rgba(255,255,255,.7); border-radius: 18px; max-width: 420px; margin: 30px auto; }
.pd-empty div { font-size: 2.6rem; }
.pd-wall { column-width: 250px; column-gap: 14px; }
.pd-wall .pd-card { break-inside: avoid; margin-bottom: 14px; }
.pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.pd-stream { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.pd-cols { display: flex; gap: 14px; overflow-x: auto; align-items: flex-start; padding-bottom: 8px; }
.pd-sec { flex: 0 0 280px; display: flex; flex-direction: column; gap: 12px; }
.pd-sech { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.9); color: #1d1d1f; position: sticky; top: 0; }
.pd-sech b { flex: 1; } .pd-sech span { font-size: .8rem; color: #6e6e73; }
.pd-sech button { border: 0; width: 28px; height: 28px; border-radius: 50%; background: #ff4f87; color: #fff; font-size: 1.1rem; cursor: pointer; }
.pd-card { background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 2px 10px rgba(0,0,0,.14); display: flex; flex-direction: column; gap: 8px; color: #1d1d1f; }
.pd-card.new { animation: pbIn .35s; }
.pd-card.c-yellow { background: #fff6b8; } .pd-card.c-pink { background: #ffd6e7; } .pd-card.c-blue { background: #d4e8ff; } .pd-card.c-green { background: #d4f5dc; }
.pd-card.c-purple { background: #e7dcff; } .pd-card.c-orange { background: #ffe0c2; } .pd-card.c-gv { background: #fff; box-shadow: 0 0 0 3px #ff4f87, 0 2px 10px rgba(0,0,0,.14); }
.pd-card.pending { opacity: .62; outline: 2px dashed #6e6e73; }
.pd-card.pinned { box-shadow: 0 0 0 3px #ffb800, 0 4px 14px rgba(0,0,0,.18); }
.pd-meta { display: flex; align-items: center; gap: 8px; }
.pd-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: hsl(var(--h) 65% 52%); flex: none; font-size: .9rem; }
.pd-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pd-who b { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-who small { color: #6e6e73; font-size: .74rem; }
.pd-tools { display: flex; gap: 2px; opacity: .25; transition: opacity .15s; }
.pd-card:hover .pd-tools, .pd-tools:focus-within { opacity: 1; }
.pd-tools button, .pd-tools select { border: 0; background: rgba(0,0,0,.06); border-radius: 8px; padding: 2px 6px; cursor: pointer; font-size: .8rem; color: #1d1d1f; max-width: 110px; }
.pd-title { margin: 0; font-size: 1.05rem; }
.pd-img { width: 100%; border-radius: 10px; cursor: zoom-in; display: block; max-height: 360px; object-fit: cover; background: #eee; }
.pd-text { white-space: pre-wrap; word-break: break-word; font-size: .98rem; line-height: 1.45; }
.pd-text a, .pd-cm a { color: #2759d6; }
.pd-link { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.05); text-decoration: none; color: inherit; }
.pd-link span:last-child { display: flex; flex-direction: column; min-width: 0; }
.pd-link small { color: #6e6e73; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pd-rx, .pd-cbtn { border: 0; background: rgba(0,0,0,.06); border-radius: 999px; padding: 3px 10px; cursor: pointer; font-size: .86rem; color: #1d1d1f; }
.pd-rx.on { background: #ffe0ea; color: #e0245e; font-weight: 700; }
.pd-rx:disabled { cursor: default; }
.pd-vote { display: inline-flex; align-items: center; gap: 4px; } .pd-vote .pd-rx.on { background: #dff3e6; color: #0d7a3d; }
.pd-stars { display: inline-flex; align-items: center; gap: 1px; }
.pd-stars button { border: 0; background: none; cursor: pointer; font-size: 1.15rem; color: #c7c7cc; padding: 0 1px; }
.pd-stars button.on { color: #ffb800; } .pd-stars small { margin-left: 4px; color: #6e6e73; }
.pd-cms { border-top: 1px solid rgba(0,0,0,.08); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pd-cm { font-size: .86rem; background: rgba(255,255,255,.7); border-radius: 10px; padding: 5px 8px; position: relative; padding-right: 22px; }
.pd-cm.gv { background: #ffeaf1; }
.pd-cm button { position: absolute; right: 4px; top: 3px; border: 0; background: none; cursor: pointer; color: #8e8e93; }
.pd-cf { display: flex; gap: 6px; } .pd-cf input { flex: 1; min-width: 0; border: 1px solid rgba(0,0,0,.15); border-radius: 999px; padding: 5px 10px; background: #fff; color: #1d1d1f; }
.pd-cf button { border: 0; border-radius: 999px; padding: 4px 12px; background: #ff4f87; color: #fff; font-weight: 700; cursor: pointer; }
.pd-fab { position: absolute; right: 20px; bottom: 20px; width: 62px; height: 62px; border-radius: 50%; border: 0; background: #ff4f87; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; box-shadow: 0 8px 22px rgba(255, 79, 135, .45); transition: transform .15s; }
.pd-fab:hover { transform: scale(1.08); }
.play-app .pd-fab { position: fixed; }
.pd-cmp-back { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: grid; place-items: center; z-index: 100; padding: 16px; }
.pd-cmp { width: min(520px, 100%); background: #fff; border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.3); color: #1d1d1f; max-height: 92vh; overflow: auto; }
.pd-cmp.c-yellow { background: #fff6b8; } .pd-cmp.c-pink { background: #ffd6e7; } .pd-cmp.c-blue { background: #d4e8ff; } .pd-cmp.c-green { background: #d4f5dc; } .pd-cmp.c-purple { background: #e7dcff; } .pd-cmp.c-orange { background: #ffe0c2; }
.pd-cmp-h { display: flex; justify-content: space-between; align-items: center; } .pd-cmp-h button { border: 0; background: none; font-size: 1.1rem; cursor: pointer; }
.pd-cmp input, .pd-cmp textarea, .pd-cmp select { width: 100%; border: 1px solid rgba(0,0,0,.15); border-radius: 12px; padding: 8px 10px; background: rgba(255,255,255,.85); color: #1d1d1f; font-size: 1rem; }
.pd-in-title { font-weight: 700; }
.pd-cmp .hidden { display: none; }
.pd-prev img { max-width: 100%; max-height: 220px; border-radius: 10px; display: block; }
.pd-prev button { margin-top: 6px; border: 0; background: rgba(0,0,0,.07); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.pd-att { display: flex; gap: 8px; }
.pd-attb { border: 1px dashed rgba(0,0,0,.25); background: rgba(255,255,255,.6); border-radius: 12px; padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: .9rem; color: #1d1d1f; }
.pd-colsel { display: flex; gap: 8px; align-items: center; font-size: .9rem; } .pd-colsel select { flex: 1; }
.pd-colors { display: flex; gap: 6px; }
.pd-colors button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); cursor: pointer; }
.pd-colors button.on { border-color: #1d1d1f; box-shadow: 0 0 0 2px #fff inset; }
.pd-colors .c-white { background: #fff; } .pd-colors .c-yellow { background: #fff6b8; } .pd-colors .c-pink { background: #ffd6e7; } .pd-colors .c-blue { background: #d4e8ff; } .pd-colors .c-green { background: #d4f5dc; } .pd-colors .c-purple { background: #e7dcff; } .pd-colors .c-orange { background: #ffe0c2; }
.pd-cmp-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .pd-cmp-f small { color: #6e6e73; }
.pd-zoom { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 120; display: grid; place-items: center; cursor: zoom-out; padding: 20px; }
.pd-zoom img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.pd-host { margin: 0 auto; }
.play-app .pd { border-radius: 0; min-height: calc(100vh - 56px); }
/* trình soạn */
.pd-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pd-pk { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink); }
.pd-pk span { font-size: 1.4rem; } .pd-pk small { color: var(--muted); }
.pd-pk.on { border-color: #ff4f87; background: color-mix(in srgb, #ff4f87 8%, var(--surface)); }
.pd-wps { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.pd-wpb { height: 64px; border-radius: 12px; border: 3px solid transparent; cursor: pointer; display: flex; align-items: flex-end; padding: 4px; }
.pd-wpb span { background: rgba(255,255,255,.85); color: #1d1d1f; font-size: .72rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.pd-wpb.on { border-color: #ff4f87; }
@media (max-width: 600px) { .pd { padding: 12px 10px 90px; } .pd-head { flex-wrap: wrap; } .pd-sec { flex-basis: 85vw; } }
.pd-foot .pd-tools { margin-left: auto; }
.pd-pick, .pd-wps { margin: 6px 0 18px; }

/* ===== 3 mục trong Trò chơi học tập ===== */
.sx-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.sx { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.sx:hover { transform: translateY(-2px); }
.sx-ic { font-size: 1.9rem; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.sx b { display: block; font-size: 1.05rem; } .sx small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; margin-top: 2px; }
.sx-game .sx-ic { background: linear-gradient(135deg, #8e5cff, #3b2aa8); } .sx-board .sx-ic { background: linear-gradient(135deg, #ff8fb1, #ff4f87); } .sx-wheel .sx-ic { background: linear-gradient(135deg, #ffd24d, #ff8a00); }
.sx-game.on { border-color: #6a45e0; background: color-mix(in srgb, #6a45e0 7%, var(--surface)); }
.sx-board.on { border-color: #ff4f87; background: color-mix(in srgb, #ff4f87 7%, var(--surface)); }
.sx-wheel.on { border-color: #ff9f0a; background: color-mix(in srgb, #ff9f0a 8%, var(--surface)); }
.pd-hero { background: radial-gradient(120% 140% at 0% 0%, #ffb3c9 0%, #ff6f9c 45%, #e83e77 100%); box-shadow: 0 10px 30px rgba(232, 62, 119, .25); }
.pd-hero p { margin: 0; max-width: 720px; opacity: .95; }
.pd-hero .wg-hero-act .btn.primary { background: #fff; color: #e83e77; border-color: #fff; }
.pdl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pdl-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.pdl-cover { position: relative; height: 120px; padding: 12px; }
.pdl-ic { font-size: 1.6rem; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.85); display: grid; place-items: center; }
.pdl-mini { position: absolute; right: 12px; bottom: 10px; display: flex; gap: 6px; }
.pdl-mini i { width: 38px; height: 46px; border-radius: 6px; background: rgba(255,255,255,.9); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.pdl-mini i:nth-child(2) { height: 34px; background: #fff6b8; } .pdl-mini i:nth-child(3) { height: 54px; background: #d4e8ff; }
/* Vòng quay */
.wq-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.wq-classes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wq-classes .chip { font-size: .92rem; padding: 5px 14px; }
.wq-classes .chip.on { background: #ff9f0a; border-color: #ff9f0a; color: #fff; font-weight: 700; }
.wq-custom { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.wq-c { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.wh { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; background: radial-gradient(120% 120% at 50% 0%, #fff7e0, #ffe2b3 60%, #ffd08a); border-radius: 22px; padding: 18px; }
.wh:fullscreen { border-radius: 0; padding: 30px; align-content: center; }
.wh-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.wh-box { position: relative; width: 100%; display: flex; justify-content: center; }
.wh-box canvas { cursor: pointer; filter: drop-shadow(0 10px 24px rgba(0,0,0,.25)); border-radius: 50%; }
.wh-pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 38px solid #1d1d1f; filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); z-index: 2; }
.wh-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 50%; border: 5px solid #1d1d1f; background: #fff; font-weight: 900; font-size: 1rem; cursor: pointer; color: #1d1d1f; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.wh-hub:hover { background: #fff3c4; }
.wh-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wh-bar .btn { background: #fff; color: #1d1d1f; } .wh-bar .btn.primary { background: #ff8a00; border-color: #ff8a00; color: #fff; }
.wh-side { background: rgba(255,255,255,.85); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; min-height: 0; max-height: 720px; color: #1d1d1f; }
.wh-sh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .wh-sh span { font-size: .8rem; color: #6e6e73; }
.wh-list { overflow: auto; flex: 1; min-height: 120px; display: flex; flex-direction: column; gap: 2px; }
.wh-item { display: flex; gap: 8px; align-items: center; font-size: .9rem; padding: 3px 6px; border-radius: 8px; cursor: pointer; }
.wh-item:hover { background: rgba(0,0,0,.05); } .wh-item.out span { text-decoration: line-through; color: #8e8e93; }
.wh-hist { margin: 0; padding-left: 22px; max-height: 180px; overflow: auto; font-size: .88rem; }
.wh-hist li { display: flex; justify-content: space-between; gap: 6px; } .wh-hist small { color: #8e8e93; }
.wh-win { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.35); border-radius: inherit; z-index: 5; }
.wh-win.hidden { display: none; }
.wh-card { background: #fff; border-radius: 24px; padding: 28px 34px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); animation: gmPop2 .35s ease-out; max-width: 92%; color: #1d1d1f; }
.wh-wl { font-weight: 700; color: #ff8a00; font-size: 1.1rem; }
.wh-name { font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 900; letter-spacing: -.02em; margin: 6px 0 18px; }
.wh-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 900px) { .sx-nav { grid-template-columns: 1fr; } .wh { grid-template-columns: 1fr; } .wh-side { max-height: 320px; } }
.logo small.slogan { font-style: italic; font-weight: 600; color: var(--brand-1); opacity: .85; letter-spacing: .01em; }

/* ================= TRÌNH CHIẾU BÀI GIẢNG ================= */
body.pz-on { overflow: hidden; }
.pz { position: fixed; inset: 0; z-index: 45; background: #0b0b0c; color: #fff; outline: none; display: flex; flex-direction: column; user-select: none; }
.pz-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; cursor: pointer; }
.pz.idle, .pz.idle .pz-stage { cursor: none; }
.pz-stage canvas { position: absolute; background: #fff; box-shadow: 0 0 0 1px #222; }
.pz-stage .pz-ink { background: transparent; box-shadow: none; pointer-events: none; touch-action: none; }
.pz.pen .pz-ink { pointer-events: auto; cursor: crosshair; }
.pz-blank { position: absolute; inset: 0; z-index: 3; }
.pz-msg { position: absolute; inset: 0; display: grid; place-items: center; z-index: 4; padding: 20px; }
.pz-card { background: #1c1c1f; border: 1px solid #333; border-radius: 22px; padding: 30px 34px; max-width: 560px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default; }
.pz-card h2 { margin: 6px 0 10px; font-size: 1.4rem; }
.pz-card p { color: #c7c7cc; line-height: 1.5; }
.pz-big { font-size: 3rem; }
.pz-acts { display: flex; justify-content: center; gap: 10px; margin: 16px 0 6px; flex-wrap: wrap; }
.pz-sub { color: #a1a1a6 !important; font-size: .9rem; margin: 6px 0 10px; }
.pz-spin { width: 38px; height: 38px; border-radius: 50%; border: 4px solid #444; border-top-color: #0a84ff; margin: 0 auto 8px; animation: pzSpin .8s linear infinite; }
@keyframes pzSpin { to { transform: rotate(360deg); } }
.pz-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 16px; border-radius: 16px;
  background: rgba(28,28,30,.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: opacity .3s, transform .3s; z-index: 6; max-width: calc(100vw - 24px); }
.pz.idle .pz-bar { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.pz-info { font-size: .86rem; color: #d1d1d6; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-nav, .pz-tools { display: flex; align-items: center; gap: 4px; }
.pz-b { background: transparent; border: 0; color: #fff; min-width: 38px; height: 38px; padding: 0 9px; border-radius: 10px; font-size: 1.05rem; cursor: pointer; font-weight: 600; white-space: nowrap; }
.pz-b:hover { background: rgba(255,255,255,.14); }
.pz-nav .pz-b { font-size: 1.6rem; line-height: 1; }
.pz-num { background: rgba(255,255,255,.1); border: 0; color: #fff; border-radius: 10px; height: 38px; padding: 0 12px; font-size: .95rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.pz-num b { font-size: 1.05rem; }
.pz-x:hover { background: #ff453a; }
.pz-penbar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 14px; background: rgba(28,28,30,.9); z-index: 7; border: 1px solid rgba(255,255,255,.12); }
.pz-dot { width: 28px; height: 28px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.pz-dot.on { border-color: #fff; box-shadow: 0 0 0 2px #0a84ff; }
.pz-timer { position: absolute; top: 16px; right: 18px; z-index: 5; background: rgba(0,0,0,.78); color: #fff; font-size: 2.6rem; font-weight: 800; padding: 6px 20px; border-radius: 16px; font-variant-numeric: tabular-nums; border: 2px solid rgba(255,255,255,.2); }
.pz-timer.warn { color: #ffd60a; }
.pz-timer.done { background: #ff3b30; animation: pzBlink .6s ease-in-out infinite alternate; }
@keyframes pzBlink { to { transform: scale(1.06); } }
.pz-panel { position: absolute; z-index: 8; background: rgba(22,22,24,.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #fff; padding: 20px; overflow-y: auto; }
.pz-panel h3 { margin: 0 0 4px; font-size: 1.25rem; }
.pz-panel.side { top: 0; right: 0; bottom: 0; width: min(420px, 92vw); border-left: 1px solid #333; box-shadow: -10px 0 40px rgba(0,0,0,.4); }
.pz-panel.full { inset: 0; padding: 24px; }
.pz-pclose { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.12); border: 0; color: #fff; width: 38px; height: 38px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; z-index: 3; }
.pz-stu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.pz-st { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid #3a3a3c; background: #2c2c2e; color: #fff; cursor: pointer; font-size: .95rem; font-weight: 600; min-height: 56px; transition: transform .15s; }
.pz-st:hover { background: #3a3a3c; }
.pz-st b { color: #ffd60a; font-size: .85rem; letter-spacing: 1px; min-height: 1em; }
.pz-st.pop { transform: scale(1.06); background: #6b4e00; border-color: #ffd60a; }
.pz-tbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.pz-g { background: #2c2c2e; border: 2px solid transparent; border-radius: 12px; padding: 6px; cursor: pointer; color: #fff; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.pz-g canvas { width: 100%; aspect-ratio: 16/9; background: #fff; border-radius: 6px; object-fit: contain; }
.pz-g.on { border-color: #0a84ff; }
.pz-g:hover { border-color: #636366; }
.pz-panel.full .wh { max-width: 1200px; margin: 30px auto 0; }
@media (max-width: 760px) { .pz-info { display: none; } .pz-bar { gap: 6px; padding: 6px; } .pz-b { min-width: 32px; padding: 0 6px; } }

/* ================= TRANG BÀI GIẢNG ================= */
.bg-sum { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; }
.bg-meter { flex: 0 0 180px; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bg-meter i { display: block; height: 100%; background: linear-gradient(90deg, #5e5ce6, #30d158); border-radius: inherit; }
.bg-day { margin-bottom: 22px; }
.bg-day h2 { font-size: 1.15rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.bg-day h2 small { color: var(--muted); font-weight: 500; }
.bg-day.past { opacity: .62; }
.bg-day.past:hover { opacity: 1; }
.bg-day.today { background: var(--primary-soft); margin-left: -14px; margin-right: -14px; padding: 14px; border-radius: 20px; scroll-margin-top: 12px; }
.bg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 10px; }
.bg-card { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 14px; padding: 10px 12px 10px 10px; }
.bg-card.sess-S { border-left-color: var(--sang); }
.bg-card.sess-C { border-left-color: var(--chieu); }
.bg-thumb { width: 112px; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; text-align: center; font-size: .72rem; line-height: 1.25; border: 1px solid var(--line); }
.bg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-thumb > span:not(.muted) { font-size: 1.6rem; }
.bg-thumb.sm { width: 128px; }
.bg-ci { min-width: 0; }
.bg-meta { font-size: .84rem; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bg-meta b { color: var(--ink); }
.bg-cls { color: var(--ink); font-weight: 700; }
.bg-title { font-weight: 600; margin: 3px 0 2px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bg-play { font-size: 1.02rem; padding-left: 18px; padding-right: 18px; white-space: nowrap; }
.bg-drop { margin: 14px 0 6px; padding: 18px; }
.bg-drop.drop-on, .dropzone.drop-on { border-color: var(--primary); background: var(--primary-soft); }
.bg-khoh { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 10px; }
.bg-khoh h2 { margin: 0; font-size: 1.2rem; }
.bg-list { display: flex; flex-direction: column; gap: 10px; }
.bg-row { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bg-lh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bg-lh h3 { margin: 0; font-size: 1.02rem; }
.bg-weeks { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-wk { font-size: .76rem; background: var(--surface-2); border-radius: 99px; padding: 2px 9px; color: var(--muted); }
.bg-slide { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 8px; border-radius: 12px; background: var(--surface-2); }
.bg-sa { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bg-st { font-size: .8rem; }
.bg-st.ok { color: var(--ok); } .bg-st.warn { color: var(--warn); } .bg-st.conv { color: var(--primary); }
.bg-from { padding: 6px 10px; background: var(--surface-2); border-radius: 10px; }
.bg-prog { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.bg-pf { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; min-width: 100px; }
.bg-pf i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s; }
.bg-bulk select { width: 100%; }
.bg-bulk select.bad { border-color: var(--warn); }
.bg-more { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
@media (max-width: 640px) { .bg-card, .bg-slide { grid-template-columns: 84px minmax(0, 1fr); } .bg-thumb, .bg-thumb.sm { width: 84px; } .bg-act, .bg-sa { grid-column: 1 / -1; justify-content: stretch; } .bg-play { width: 100%; } }

/* Trang Khám phá: Hôm nay lên lớp */
.td-box { margin: 0 0 22px; }
.td-box h2 small { font-weight: 500; font-size: .9rem; }
.td-list { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.td-it { flex: 0 0 300px; scroll-snap-align: start; display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--line-strong); border-radius: 16px; padding: 10px; }
.td-it.sess-S { border-top-color: var(--sang); } .td-it.sess-C { border-top-color: var(--chieu); }
.td-th { width: 92px; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; border: 1px solid var(--line); }
.td-th img { width: 100%; height: 100%; object-fit: cover; }
.td-m { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.td-m b { color: var(--ink); }
.td-t { font-weight: 600; font-size: .92rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.td-it > .btn { grid-column: 1 / -1; justify-content: center; }
.td-go { font-size: 1rem; }
.pz-num { white-space: nowrap; }
.pz-grid { align-items: start; }
.bg-bulk { table-layout: fixed; width: 100%; min-width: 820px; }
.bg-bulk td { vertical-align: top; }
.bg-bulk td:first-child b { word-break: break-word; }
.pz-stage canvas { visibility: hidden; }
.pz.ready .pz-stage canvas { visibility: visible; }
.ver-warn { position: sticky; top: 0; z-index: 44; background: #fff4dc; color: #7a4100; border-bottom: 1px solid #e3c48f; padding: 10px 16px; font-size: .92rem; text-align: center; }
.side-bottom .ver { font-size: .72rem; color: var(--muted); padding: 0 10px 6px; }

/* Trang khách vãng lai */
.pub-hero h2 { max-width: 760px; }
.pub-cta { flex-wrap: wrap; gap: 12px !important; }
.hero .btn-white.ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.pub-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 22px 0 6px; }
.pub-w { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.pub-w:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.pub-w .pw-ic { font-size: 2rem; }
.pub-w > b { font-size: 1.15rem; }
.pub-w > span { color: var(--muted); line-height: 1.45; }
.pub-w em { font-style: normal; color: var(--primary); font-weight: 600; margin-top: auto; }
.pub-feat { cursor: default; }
.lk-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; max-width: 760px; margin-bottom: 16px; }
.lk-form input { font-size: 1.1rem; min-height: 46px; }
@media (max-width: 640px) { .lk-form { grid-template-columns: 1fr; } }
.pub-hero .brand-word .b1 { color: #fff; -webkit-text-fill-color: #fff; background: none; }
.pub-hero .brand-word .b2 { color: #7cc4ff; -webkit-text-fill-color: #7cc4ff; background: none; }
.pub-w > span b { color: var(--ink); }
.ev-star { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 99px; background: #fff4cc; color: #9a6b00; font-weight: 700; font-size: .78rem; }
:root[data-theme="dark"] .ev-star { background: #4a3a0a; color: #ffd60a; }

/* Minh chứng hoạt động */
.bar-row.st-row { grid-template-columns: minmax(80px, 1fr) 60px; margin: 0; min-width: 160px; }
.st-bars { display: flex; align-items: flex-end; gap: 6px; height: 200px; padding-top: 18px; }
.st-b { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.st-b i { display: block; width: 100%; max-width: 34px; min-height: 2px; background: linear-gradient(180deg, #5aa2ff, #1d4fd8); border-radius: 6px 6px 2px 2px; }
.st-b small { font-size: .68rem; color: var(--muted); white-space: nowrap; }
.st-n { font-size: .72rem; font-weight: 700; color: var(--muted); }
.st-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.st-list > div:last-child { border-bottom: 0; }
.st-list b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .grid.cols-2 { grid-template-columns: 1fr; } }

.logo small.slogan { font-style: normal; font-weight: 500; font-size: .8rem; line-height: 1.35; color: var(--muted); opacity: 1; margin-top: 4px; }
.auth p.slogan-txt { font-size: 1rem; line-height: 1.45; margin: 2px 6px 6px; }
.pub-hero h2.pub-slogan { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.25; max-width: 900px; }
.pub-hero h2.pub-slogan, .auth p.slogan-txt, .logo small.slogan { text-wrap: balance; }
/* Khẩu hiệu: chữ thường, có màu chuyển nhẹ */
.logo small.slogan { font-weight: 600; background: linear-gradient(90deg, var(--brand-1), #7a5cff 55%, #e0479e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth p.slogan-txt { font-weight: 600; background: linear-gradient(90deg, #0071e3, #7a5cff 55%, #e0479e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pub-hero h2.pub-slogan { background: linear-gradient(90deg, #ffffff 0%, #ffe8a3 55%, #ffc9e0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Logo + khẩu hiệu ở thanh bên: căn giữa */
.side .logo { justify-content: center; text-align: center; }
.side .logo > span { display: flex; flex-direction: column; align-items: center; width: 100%; }
.side .logo small.slogan { text-align: center; margin-left: auto; margin-right: auto; }

/* Đánh giá gọn (kiểu thẻ, giống tặng sao) */
.qe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; }
.qe-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, background .15s; }
.qe-card.m-plus { border-left-color: #1f8a3b; }
.qe-card.m-minus { border-left-color: #d70015; }
.qe-card.hidden { display: none; }
.qe-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qe-name b { font-size: 1.02rem; }
.qe-top .marks { margin: 0; flex-shrink: 0; }
.qe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qe-chip { border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 5px 12px; font-size: .86rem; cursor: pointer; line-height: 1.2; }
.qe-chip:hover { border-color: var(--primary); }
.qe-chip.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.qe-chip.minus.on { background: var(--danger-soft, #fde8e8); border-color: #d70015; color: #b00012; }
.qe-chip.add { background: transparent; border-style: dashed; color: var(--muted); }
.qe-foot { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.qe-foot:empty { display: none; }
/* Đánh giá gọn dạng danh sách: mỗi học sinh một dòng */
.qe-list { display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.qe-list .qe-card { display: grid; grid-template-columns: 34px minmax(170px, 230px) auto minmax(0, 1fr) 92px; align-items: center; gap: 12px; border: 0; border-left: 4px solid transparent; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 12px; }
.qe-list .qe-card:last-child { border-bottom: 0; }
.qe-list .qe-card:nth-child(even) { background: var(--surface-2); }
.qe-list .qe-card.m-plus { border-left-color: #1f8a3b; }
.qe-list .qe-card.m-minus { border-left-color: #d70015; }
.qe-stt { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.qe-list .qe-name { min-width: 0; }
.qe-list .qe-name b { font-size: .98rem; }
.qe-list .marks { margin: 0; }
.qe-list .qe-chips { gap: 5px; }
.qe-list .qe-chip { padding: 4px 10px; font-size: .82rem; }
.qe-list .qe-foot { justify-content: flex-end; }
@media (max-width: 900px) { .qe-list .qe-card { grid-template-columns: 28px 1fr auto; } .qe-list .qe-chips { grid-column: 1 / -1; } .qe-list .qe-foot { grid-column: 1 / -1; justify-content: flex-start; } }
.qe-chip.own { max-width: 100%; text-align: left; white-space: normal; }

/* Chân trang */
.site-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; border-top: 1px solid var(--line); margin: 0 auto; padding: 18px 0 24px; color: var(--muted); font-size: .9rem; max-width: 1264px; width: calc(100% - 96px); }
.site-foot nav { display: flex; align-items: center; gap: 8px 28px; flex-wrap: wrap; }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--ink); }
@media (max-width: 760px) { .site-foot { width: calc(100% - 32px); flex-direction: column; align-items: flex-start; } }
.guide h3 { margin: 14px 0 6px; } .guide h3:first-child { margin-top: 0; } .guide ol { margin: 0; padding-left: 20px; line-height: 1.6; }
.fb-it { border-top: 1px solid var(--line); padding: 10px 0; color: var(--ink); }
.fb-it.done { opacity: .55; }
.fb-msg { white-space: pre-line; margin: 4px 0 6px; font-size: .95rem; }

/* ===== Kiểu "cửa hàng ứng dụng" (MacLife) ===== */
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; }
@media (max-width: 1250px) { .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .st-grid { grid-template-columns: 1fr; } }
.st-app { display: flex; align-items: center; gap: 18px; text-decoration: none; color: var(--ink); padding: 14px 0; }
.st-app .ico, .st-tile .ico { position: relative; width: 84px; height: 84px; border-radius: 20px; display: grid; place-items: center; color: #fff; flex: none; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 8px 18px rgba(0,0,0,.18); }
.st-app .ico::after, .st-tile .ico::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.38), rgba(255,255,255,0) 48%); pointer-events: none; }
.st-app .ico svg { width: 44px; height: 44px; stroke-width: 1.6; }
.st-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; align-self: stretch; border-bottom: 1px solid var(--line); }
.st-txt { flex: 1; min-width: 0; }
.st-txt b { display: block; font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-txt span { display: block; color: var(--muted); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-act { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; min-width: 84px; }
.st-act .pill { background: var(--pill); color: var(--primary); font-weight: 700; border-radius: 999px; padding: 7px 22px; font-size: 1rem; }
.st-act small { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.st-app:hover .pill { background: var(--primary); color: #fff; }
.st-app:hover .st-txt b { color: var(--primary); }
@media (max-width: 760px) { .st-app .ico { width: 64px; height: 64px; border-radius: 16px; } .st-app .ico svg { width: 34px; height: 34px; } }

.st-coll-wrap { position: relative; }
.st-coll { display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 18px); gap: 36px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.st-coll::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { .st-coll { grid-auto-columns: 88%; gap: 16px; } }
.st-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
.st-card .eyebrow { color: var(--primary); font-size: .8rem; font-weight: 700; letter-spacing: .08em; }
.st-ct { font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; }
.st-cd { color: var(--muted); font-size: 1.05rem; margin-bottom: 14px; }
.st-art { position: relative; display: block; aspect-ratio: 16/10; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.st-art::before { content: ""; position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; right: -20%; top: -35%; background: rgba(255,255,255,.45); }
.st-art.c-blue { background: linear-gradient(135deg, #eaf3fb, #cfe3f6 70%, #b9d4ee); }
.st-art.c-green { background: linear-gradient(135deg, #eef5e3, #dbead0 70%, #c9dfb9); }
.st-art.c-orange { background: linear-gradient(135deg, #fff3e3, #ffe2c7 70%, #ffd0b0); }
.st-tile { position: absolute; transition: transform .25s; }
.st-tile .ico { width: clamp(64px, 9vw, 120px); height: clamp(64px, 9vw, 120px); border-radius: 26%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 14px 28px rgba(0,0,0,.22); }
.st-tile .ico svg { width: 52%; height: 52%; stroke-width: 1.5; }
.st-tile .ico.emo { font-size: clamp(30px, 4.4vw, 60px); }
.st-card:hover .st-tile { transform: rotate(0deg) scale(1.04) !important; }
.st-cap { position: absolute; left: 28px; bottom: 22px; font-weight: 600; font-size: .98rem; color: #1d3f6e; }
.c-green .st-cap { color: #2f5a1e; } .c-orange .st-cap { color: #8a3d00; }
.st-next { position: absolute; right: -14px; top: 58%; width: 44px; height: 88px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.6rem; cursor: pointer; box-shadow: var(--shadow); }
@media (max-width: 760px) { .st-next { display: none; } }
.st-grid { column-gap: 28px; }
.st-app .ico { width: 72px; height: 72px; border-radius: 18px; }
.st-app .ico svg { width: 38px; height: 38px; }
.st-act { min-width: 74px; }
.st-act .pill { padding: 6px 18px; }
.st-tile .ico { width: clamp(56px, 7.4vw, 104px); height: clamp(56px, 7.4vw, 104px); }
.st-tile .ico.emo { font-size: clamp(28px, 3.8vw, 52px); }
.st-cap { z-index: 2; background: rgba(255,255,255,.7); padding: 3px 10px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 760px) { .st-grid { grid-template-columns: minmax(0, 1fr); } }