:root{
  --bg: #F7F4EC;
  --panel: #FFFFFF;
  --ink: #1E2420;
  --ink-soft: #5B5F55;
  --line: #E4DFCF;
  --accent: #2F6F62;
  --accent-soft: #E7F0EC;
  --gold: #B8862E;
  --radius: 14px;
  --danger: #A6462E;
  --sidebar-bg: #14201B;
  --sidebar-ink: #E8E4D6;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Be Vietnam Pro',sans-serif;
  min-height:100vh;
}
h1,h2,h3{ font-family:'Playfair Display',serif; margin:0; }
::selection{ background:var(--gold); color:#fff; }
a{ color:inherit; }

/* ===== App layout ===== */
.app-layout{ display:flex; min-height:100vh; }
.sidebar{
  width:220px; flex-shrink:0; background:var(--sidebar-bg); color:var(--sidebar-ink);
  display:flex; flex-direction:column; padding:22px 14px; position:sticky; top:0; height:100vh;
  overflow-x:hidden;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 4px; }
.sidebar-brand .brand-logo{ width:34px; height:34px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.sidebar-brand .brand-text{ font-family:'Playfair Display',serif; font-size:18px; font-weight:700; line-height:1.2; min-width:0; }
.sidebar-brand small{ display:block; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:400; letter-spacing:.03em; color:#9CA396; margin-top:4px; text-transform:uppercase; line-height:1.5; white-space:nowrap; }
.sidebar-nav{ margin-top:26px; display:flex; flex-direction:column; gap:2px; flex:1; min-height:0; overflow-y:auto; }
.sidebar-item{
  display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:8px; cursor:pointer;
  font-size:13.5px; color:#C7CBBC; transition:background .15s ease, color .15s ease; user-select:none;
}
.sidebar-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-item.active{ background:rgba(255,255,255,.1); color:#fff; }
.sidebar-item .num{
  width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.08); color:#9CA396;
  font-family:'IBM Plex Mono',monospace; font-size:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sidebar-item.active .num{ background:var(--gold); color:#1E2420; }
.sidebar-foot{ margin-top:auto; font-family:'Be Vietnam Pro',sans-serif; font-size:12px; color:#9CA396; line-height:1.6; padding:10px; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-foot .signout{ cursor:pointer; color:#C7CBBC; }
.sidebar-foot .signout:hover{ color:#fff; }

.main{ flex:1; min-width:0; }
.main-inner{ max-width:760px; margin:0 auto; padding:32px 24px 90px; }

/* ===== Khách chưa đăng nhập (trang chào mừng + nút Đăng nhập/Đăng ký góc phải) ===== */
.guest-shell{ min-height:100vh; }
.guest-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line); background:var(--bg);
}
.guest-brand{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.guest-brand img{ width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.guest-brand span{ font-family:'Playfair Display',serif; font-size:15px; font-weight:700; color:var(--ink); }
.guest-content{ max-width:760px; margin:0 auto; padding:24px; }

/* ===== Auth screen ===== */
.auth-shell{ max-width:400px; margin:0 auto; padding:80px 20px; }
.auth-shell .auth-logo{ display:block; width:64px; height:64px; border-radius:50%; object-fit:cover; margin:0 auto 14px; }
.auth-shell h1{ font-size:26px; text-align:center; margin-bottom:6px; }
.auth-shell .sub{ text-align:center; color:var(--ink-soft); font-size:14px; margin-bottom:28px; line-height:1.7; }
.auth-shell .sub .sub-brand{ display:inline-block; margin-top:2px; font-size:12px; letter-spacing:.02em; }
.auth-shell label{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin:14px 0 6px; }
.auth-shell input{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  font-size:14.5px; font-family:'Be Vietnam Pro',sans-serif; background:#FDFCF8; color:var(--ink);
}
.auth-shell input:focus{ outline:none; border-color:var(--accent); }
.auth-tabs{ display:flex; gap:8px; margin-bottom:10px; justify-content:center; }
.auth-tab{ padding:8px 16px; border-radius:999px; font-size:13px; cursor:pointer; color:var(--ink-soft); }
.auth-tab.active{ background:var(--accent-soft); color:var(--accent); font-weight:600; }

/* ===== Shared components ===== */
.btn{
  appearance:none; border:none; cursor:pointer; font-family:'Be Vietnam Pro',sans-serif; font-weight:600; font-size:15px;
  padding:14px 26px; border-radius:999px; background:var(--accent); color:#fff; transition:transform .12s ease, opacity .12s ease;
}
.btn:hover{ opacity:.92; }
.btn:active{ transform:scale(.98); }
.btn:disabled{ background:var(--line); color:var(--ink-soft); cursor:not-allowed; }
.btn-sm{ padding:9px 18px; font-size:13.5px; }
.btn-ghost{ background:transparent; color:var(--ink-soft); border:1px solid var(--line); padding:11px 20px; font-size:14px; }
.btn-row{ display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.btn-full{ display:block; width:100%; text-align:center; margin-top:22px; }

.error-box{ background:#FBEAE5; border:1px solid var(--danger); color:var(--danger); padding:14px 16px; border-radius:10px; font-size:13.5px; line-height:1.6; margin-top:16px; }
.hint-box{ background:var(--accent-soft); border:1px solid var(--line); color:var(--accent); padding:14px 16px; border-radius:10px; font-size:13.5px; line-height:1.6; margin-top:16px; }

.tour-trigger{
  position:fixed; top:16px; right:16px; z-index:200; cursor:pointer;
  background:var(--gold); color:#241C05; font-weight:700; font-size:13px;
  padding:10px 18px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.22);
}
@media (max-width:820px){
  .tour-trigger{ top:70px; right:12px; padding:8px 14px; font-size:12.5px; }
}

.page-head{ margin-bottom:24px; }
.page-head .tag{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:5px 12px; border-radius:999px; margin-bottom:12px; }
.page-head h1{ font-size:26px; }
.page-head p{ color:var(--ink-soft); font-size:14.5px; margin-top:8px; line-height:1.6; }

.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:0 1px 2px rgba(30,36,32,.03); }
.section{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:16px; }
.section h3{ font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); font-family:'IBM Plex Mono',monospace; font-weight:600; margin-bottom:12px; }
.section .body{ font-size:15px; line-height:1.7; color:var(--ink); white-space:pre-line; }
.section .body.protected{ user-select:none; -webkit-user-select:none; -moz-user-select:none; }
.section.highlight, .section.highlight-dark{ background:#EDEBE3; color:var(--ink); border-color:#DCD8C9; }
.section.highlight h3, .section.highlight-dark h3{ color:var(--ink-soft); }
.section.highlight .body, .section.highlight-dark .body{ color:var(--ink); }
.section.highlight .body b, .section.highlight-dark .body b{ color:#8A5A00; }

textarea, select{
  width:100%; margin-top:12px; font-family:'Be Vietnam Pro',sans-serif; font-size:15px; line-height:1.55;
  padding:14px; border:1px solid var(--line); border-radius:10px; background:#FDFCF8; color:var(--ink);
}
textarea{ min-height:100px; resize:vertical; }
textarea:focus, select:focus{ outline:none; border-color:var(--accent); }

.chips{ margin-top:14px; display:flex; flex-wrap:wrap; gap:9px; }
.chip{ padding:10px 16px; border-radius:999px; border:1px solid var(--line); font-size:13.5px; cursor:pointer; background:#FDFCF8; color:var(--ink); transition:border-color .12s ease, background .12s ease, color .12s ease; }
.chip.selected{ background:var(--accent); border-color:var(--accent); color:#fff; }

.source-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:16px; }
.source-card{ border:1px solid var(--line); border-radius:12px; padding:16px 12px; text-align:center; cursor:pointer; background:#FDFCF8; transition:border-color .12s ease, background .12s ease; }
.source-card:hover{ border-color:var(--accent); }
.source-card.selected{ border-color:var(--accent); background:var(--accent-soft); }
.source-card .ic{ font-size:22px; margin-bottom:8px; }
.source-card .label{ font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.3; }

.idea-item, .list-item{ border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:10px; background:#FDFCF8; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.idea-item .txt, .list-item .txt{ font-size:14.5px; line-height:1.55; flex:1; }
.idea-item .meta, .list-item .meta{ font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; font-family:'IBM Plex Mono',monospace; }

.tab-row{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.tab-btn{ padding:9px 18px; border-radius:999px; font-size:13.5px; cursor:pointer; color:var(--ink-soft); border:1px solid var(--line); background:#FDFCF8; }
.tab-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

.loading{ text-align:center; padding:70px 0; }
.spinner{ width:36px;height:36px;border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); margin:0 auto 20px; animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading p{ color:var(--ink-soft); font-size:14px; }

table.plan{ width:100%; border-collapse:collapse; font-size:13.5px; margin-top:6px; }
table.plan th, table.plan td{ border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
table.plan th{ background:#FBF9F2; font-weight:600; font-size:12px; }

.week-grid{ display:grid; grid-template-columns:repeat(7,minmax(120px,1fr)); gap:10px; overflow-x:auto; margin-top:10px; }
.week-col{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px; min-width:120px; }
.week-col .day{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft); margin-bottom:8px; }
.week-slot{ border:1px dashed var(--line); border-radius:8px; padding:8px; font-size:12px; margin-bottom:8px; min-height:44px; }
.week-slot .slot-label{ font-size:10px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; letter-spacing:.05em; }
.week-slot.filled{ border-style:solid; border-color:var(--accent); background:var(--accent-soft); }

.topbar-mobile{ display:none; }
.sidebar-overlay{ display:none; }

/* Tạo Ảnh — 2 cột cố định (không dùng flex-wrap, tránh lỗi chồng đè khi item "sticky" rơi vào
   dòng flex riêng). Cột phải (preview) luôn giữ đúng 280px và dính khi cuộn trên desktop. */
.ta-layout{ display:grid; grid-template-columns:1fr 280px; gap:24px; align-items:start; }
.ta-preview{ position:sticky; top:16px; }
@media (max-width:820px){
  .ta-layout{ grid-template-columns:1fr; }
  /* Trên điện thoại không đủ chỗ hiện 2 cột — quay lại đúng trải nghiệm cũ: ảnh xem trước hiện
     NGAY ĐẦU (order:-1, đứng trước cột cài đặt dù đứng sau trong HTML), cập nhật live khi chỉnh
     bên dưới, khỏi phải kéo xuống cuối mới thấy kết quả. */
  .ta-preview{ position:static; justify-self:start; order:-1; }
}

@media (max-width:820px){
  .app-layout{ flex-direction:column; }

  /* Sidebar trở thành ngăn kéo (drawer) trượt ra từ trái, ẩn mặc định — mở bằng nút ☰ ở topbar
     cố định phía trên. Giữ nguyên bố cục dọc như bản desktop (không còn ép thành hàng ngang tràn
     lề như trước), vì giờ có đủ chỗ hiển thị full-height khi mở ra. */
  .sidebar{
    width:260px; max-width:82vw; height:100vh; position:fixed; top:0; left:0; z-index:101;
    flex-direction:column; align-items:stretch; overflow-x:visible; padding:22px 14px;
    transform:translateX(-100%); transition:transform .22s ease;
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-brand{ display:flex; }
  .sidebar-nav{ margin-top:26px; flex-direction:column; }
  .sidebar-foot{ display:block; }

  .sidebar-overlay{
    display:block; position:fixed; inset:0; background:rgba(20,24,20,.5); z-index:100;
    opacity:0; pointer-events:none; transition:opacity .22s ease;
  }
  .sidebar-overlay.open{ opacity:1; pointer-events:auto; }

  /* Thanh này là nút mở toolbar (sidebar), phải luôn nổi cố định trên cùng khi cuộn — chỉ bản
     thân toolbar mới ẩn mặc định, không được để mất luôn cả nút mở ra nó. Dùng fixed (không phải
     sticky) để chắc chắn không bị cuộn mất trong mọi trường hợp (kể cả PWA standalone trên iOS). */
  .topbar-mobile{
    display:flex; align-items:center; gap:12px; position:fixed; top:0; left:0; right:0; z-index:60;
    background:var(--sidebar-bg); color:var(--sidebar-ink); padding:14px 16px;
  }
  .topbar-mobile .menu-toggle{
    width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
    font-size:18px; cursor:pointer; background:rgba(255,255,255,.08); flex-shrink:0;
  }
  .topbar-mobile .topbar-title{ font-family:'Playfair Display',serif; font-size:16px; font-weight:700; }
  .app-layout{ margin-top:62px; }

  .main-inner{ padding:20px 16px 70px; }
  /* Trên di động, 7 cột ngang buộc phải kéo sang mới xem hết tuần — xếp mỗi ngày 1 hàng dọc, ngày
     làm nhãn cột trái + 3 buổi (sáng/trưa/tối) nằm ngang cùng hàng đó, không cần cuộn ngang nữa. */
  .week-grid{ grid-template-columns:1fr; overflow-x:visible; gap:8px; }
  .week-col{ display:grid; grid-template-columns:64px repeat(3,1fr); gap:8px; align-items:stretch; min-width:0; }
  .week-col .day{ display:flex; align-items:center; margin-bottom:0; font-size:10.5px; line-height:1.3; }
  .week-slot{ min-height:auto; }

  /* iOS Safari tự động phóng to (zoom) trang khi người dùng bấm vào 1 ô nhập có cỡ chữ < 16px —
     đúng lúc đăng nhập (ô email/mật khẩu) là dễ gặp nhất. Sau khi phóng, mức zoom đó dính luôn
     sang cả màn app chính (vẫn cùng 1 trang, không tải lại), che mất nút ☰ mở sidebar ở trên
     cùng — phải kéo/pinch tay mới thấy lại. Ép mọi ô nhập tối thiểu 16px để tắt hẳn auto-zoom. */
  .auth-shell input, input, textarea, select{ font-size:16px; }
}

@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; }
  .section{ break-inside:avoid; border-color:#ccc; }
}

/* Chú giải tâm thức (glossaryWrap() trong util.js) — chính CHỮ TÊN khái niệm là nơi bấm/trỏ vào để
   mở định nghĩa (không phải icon "?" riêng), gạch chân chấm để gợi ý có thể bấm vào. */
details.glossary-wrap{ display:inline; }
summary.glossary-term{
  display:inline; list-style:none; cursor:help;
  border-bottom:1px dotted var(--ink-soft); text-underline-offset:2px;
}
summary.glossary-term::-webkit-details-marker{ display:none; }
summary.glossary-term::marker{ content:''; }

/* Kiến Thức Nền Tảng — accordion từng phần, dùng <details> gốc, không cần JS quản lý mở/đóng. */
details.kt-section{ border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:10px; background:#FDFCF8; }
summary.kt-summary{ cursor:pointer; font-weight:600; font-size:14.5px; color:var(--ink); list-style:none; }
summary.kt-summary::-webkit-details-marker{ display:none; }
summary.kt-summary::marker{ content:''; }
summary.kt-summary::before{ content:'▸ '; color:var(--accent); }
details.kt-section[open] summary.kt-summary::before{ content:'▾ '; }

/* In trang (Ctrl+P/Cmd+P) — góp ý Quỳnh 2026-08-24: "nên có phần in ra cho những ai không quen
   dùng công nghệ". Ẩn sidebar/topbar/mọi nút bấm-để-thao-tác (.no-print — gắn thủ công ở từng
   module cho đúng chỗ, không đoán chung theo class .btn vì .btn còn dùng cho nút điều hướng cần
   giữ lại lúc in vd link tham khảo), cho phần nội dung chiếm full trang giấy. Input/textarea đang
   có giá trị vẫn hiện được — chỉ bỏ khung/nền để trông như chữ in, không như 1 form còn bỏ trống. */
@media print{
  .topbar-mobile, .sidebar-overlay, .sidebar, .no-print{ display:none !important; }
  .app-layout{ display:block !important; }
  .main, .main-inner{ max-width:100% !important; padding:0 !important; margin:0 !important; }
  input, textarea{ border:none !important; background:transparent !important; padding:2px 0 !important; -webkit-appearance:none; appearance:none; color:var(--ink) !important; }
  .card, .section{ break-inside:avoid; }
}