/* ================= CÁC TRANG LUYỆN TẬP (Listening, Reading, Speaking, Giải đề, Định hướng, Vocabulary, Grammar) =================
   Bố cục theo các trang practice của trang mẫu, nội dung chuyển sang TOEIC. Dùng chung cho mọi trang practice-*.html và orientation.html */
:root {
  --moss: #1E3006;
  --herb-50: #FFFADD;
  --herb-100: #DADBB6;
  --herb-500: #6A8042;
  --herb-600: #5A6D38;
  --herb-700: #4A5A2E;
  --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-400: #94A3B8;
  --slate-500: #64748B; --slate-600: #475569; --slate-700: #334155; --slate-800: #1E293B; --slate-900: #0F172A;
  --font: "Quicksand", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-weight: 500; color: var(--slate-800); background: #fff; overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p { margin: 0; }
.p-container { width: min(1152px, 100% - 48px); margin-inline: auto; }
.p-container.wide { width: min(1280px, 100% - 48px); }
.p-container.narrow { width: min(1024px, 100% - 32px); }

/* ---------- thanh trên cùng (kính mờ sáng như trang mẫu) ---------- */
.p-nav {
  position: fixed; inset: 0 0 auto; z-index: 100; padding: 16px 0;
  background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--slate-100); box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.p-nav-in { width: min(1280px, 100% - 48px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p-logo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 24px; letter-spacing: -.04em; color: #000; }
.p-logo-mark { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: #3f5a33; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.p-logo-mark svg { width: 30px; height: 30px; }
.p-logo b { color: var(--herb-500); font-weight: 700; }
.p-nav-actions { display: flex; align-items: center; gap: 8px; }
.p-pill { height: 40px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; background: var(--slate-100); color: var(--slate-700); font-size: 12px; font-weight: 700; transition: background .2s; }
.p-pill:hover { background: var(--slate-200); }
.p-pill svg { color: var(--herb-600); }
.p-pill.round { width: 40px; padding: 0; justify-content: center; position: relative; color: var(--slate-600); }
.p-pill.round svg { color: currentColor; }
.p-badge-count { position: absolute; top: -2px; right: -2px; width: 20px; height: 20px; border-radius: 50%; background: #F43F5E; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.p-user { height: 44px; padding: 0 16px 0 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); font-size: 13px; }
.p-user i { width: 32px; height: 32px; border-radius: 50%; background: #e5ecd9; color: var(--herb-500); display: grid; place-items: center; }
.p-user small { display: block; font-size: 10px; font-weight: 700; color: var(--slate-400); letter-spacing: .06em; }
.p-page { padding-top: 112px; padding-bottom: 96px; }

/* ---------- chi tiết dùng chung ---------- */
.p-back { display: inline-flex; align-items: center; gap: 6px; color: var(--slate-500); font-weight: 700; font-size: 14px; transition: color .2s; }
.p-back:hover { color: var(--slate-900); }
.p-chip-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--herb-50); color: var(--herb-700); border: 1px solid var(--herb-100); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.p-tag { display: inline-flex; align-items: center; padding: 2px 12px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border: 1px solid; }
.p-tag.amber { background: #FEF3C7; color: #B45309; border-color: #FDE68A; }
.p-tag.blue { background: #DBEAFE; color: #1D4ED8; border-color: #BFDBFE; padding: 4px 12px; }
.p-tag.green { background: #D1FAE5; color: #047857; border-color: #A7F3D0; }
.p-empty { padding: 32px 16px; text-align: center; color: var(--slate-400); font-style: italic; font-size: 14px; }
.ico { width: 20px; height: 20px; flex: none; }
.ico.sm { width: 16px; height: 16px; } .ico.xs { width: 14px; height: 14px; }

/* thông báo "đang cập nhật" khi bấm vào mục chưa có nội dung */
.p-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 200; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--moss); color: #fff; font-weight: 700; font-size: 14px; padding: 12px 20px; border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.2); transition: opacity .25s, transform .25s; max-width: calc(100% - 32px); text-align: center;
}
.p-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 767px) {
  .p-nav { padding: 12px 0; }
  .p-nav-in, .p-container, .p-container.wide { width: calc(100% - 32px); }
  .p-logo { font-size: 18px; } .p-logo-mark { width: 40px; height: 40px; }
  .hide-sm { display: none !important; }
  .p-page { padding-top: 96px; }
}