/* ============================================
   Cantaloupe - Main Stylesheet
   Theme: dưa lưới (xanh lá + cam melon)
   ============================================ */

:root {
  /* Brand */
  --green-900: #14532d;
  --green-800: #166534;
  --green-700: #15803d;
  --green-600: #16a34a;
  --green-500: #22c55e;
  --green-100: #dcfce7;
  --green-50:  #f0fdf4;

  --melon-600: #ea7317;
  --melon-500: #f59e0b;
  --melon-100: #ffedd5;

  /* Calendar color codes */
  --cal-system: #16a34a;   /* 🟢 xanh lá - hệ thống */
  --cal-manual: #2563eb;   /* 🔵 xanh dương - thủ công */
  --cal-alert:  #dc2626;   /* 🔴 đỏ - cảnh báo AI */

  /* Neutrals */
  --ink:     #0f172a;
  --slate-700:#334155;
  --slate-500:#64748b;
  --slate-400:#94a3b8;
  --slate-300:#cbd5e1;
  --slate-200:#e2e8f0;
  --slate-100:#f1f5f9;
  --slate-50: #f8fafc;
  --white:   #ffffff;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.14);
  --maxw: 1180px;
  --font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Nền gradient xanh lá mềm (theo ảnh 1 - GB Kitchen).
   Vẽ nền trên một lớp riêng đứng yên (body::before) thay cho background-attachment: fixed,
   để khi cuộn trình duyệt không phải vẽ lại nền mỗi khung hình -> cuộn mượt hơn, nhất là trên điện thoại. */
body { min-height: 100vh; background: #e6f8ec; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 78% -6%, #b9ecc9 0%, rgba(185,236,201,0) 55%),
    radial-gradient(900px 600px at 8% 4%, #d9f5e2 0%, rgba(217,245,226,0) 60%),
    linear-gradient(155deg, #cdeed8 0%, #e6f8ec 42%, #f3fbf5 100%);
}

a { color: var(--green-700); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4 { line-height: 1.25; margin: 0 0 .5em; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; cursor: pointer; font-family: inherit; font-size: 15px;
  font-weight: 600; padding: 11px 20px; border-radius: 999px;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
  text-decoration: none; line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-700); text-decoration: none; }
.btn-accent { background: var(--melon-600); color: #fff; }
.btn-accent:hover { background: #cf640f; text-decoration: none; }
.btn-ghost { background: transparent; color: var(--green-700); border: 1.5px solid var(--green-600); }
.btn-ghost:hover { background: var(--green-50); text-decoration: none; }
.btn-light { background: #fff; color: var(--ink); border: 1.5px solid var(--slate-200); }
.btn-light:hover { background: var(--slate-50); text-decoration: none; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-danger { background: var(--cal-alert); color: #fff; }
.btn-danger:hover { background: #b91c1c; text-decoration: none; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Public Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(255,255,255,.55);
}
.site-header .nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 66px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--green-800); }
.brand:hover { text-decoration: none; }
.brand .logo {
  width: 38px; height: 38px; border-radius: 11px;
  background: radial-gradient(circle at 30% 30%, var(--melon-500), var(--green-600));
  display: grid; place-items: center; font-size: 20px;
}
.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  padding: 9px 14px; border-radius: 9px; color: var(--slate-700); font-weight: 600; font-size: 15px; white-space: nowrap;
}
.nav-links a:hover { background: var(--green-50); color: var(--green-800); text-decoration: none; }
.nav-links a.active { background: var(--green-100); color: var(--green-800); }
.nav-cta { display: flex; align-items: center; gap: 10px; white-space: nowrap; }

.menu-toggle { display: none; background: none; border: none; font-size: 26px; cursor: pointer; color: var(--ink); }

/* ---------- Hero ---------- */
.hero {
  padding: 78px 0 64px;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { font-size: 46px; letter-spacing: -.5px; color: var(--green-900); }
.hero h1 .accent { color: var(--melon-600); }
.hero p.lead { font-size: 19px; color: var(--slate-700); max-width: 560px; }
.hero-cta { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--slate-200);
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--green-800); box-shadow: var(--shadow-sm); }

/* Đầu trang chủ: ảnh vườn tràn phía sau (học bố cục trang Ultralytics), khối chữ nằm bên trái để lộ quả dưa bên phải */
.hero-photo-bg { position: relative; overflow: hidden; min-height: min(80vh, 660px);
  display: flex; align-items: center; padding: 80px 0; }
/* Ảnh rộng hơn khung 30%, bám mép trái: phần cổ tay bên phải bị cắt bớt, quả dưa dời sang nửa phải (khoảng 53–83% bề ngang),
   không bị chữ che. max-width: none để bỏ quy tắc chung "ảnh không rộng quá khung". */
.hero-photo-bg .hb-img { position: absolute; top: 0; left: 0; width: 130%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 60%; }
/* Lớp phủ đen loang mờ: đậm bên trái (chỗ có chữ), nhạt dần sang phải để quả dưa vẫn rõ */
.hero-photo-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.40) 38%, rgba(0,0,0,.15) 68%, rgba(0,0,0,.05) 100%); }
/* Khối chữ bám hẳn mép trái màn hình (không canh theo khung giữa), nên màn hình càng rộng chữ càng không trôi vào quả dưa */
.hero-photo-bg > .container { position: relative; z-index: 1; width: 100%; max-width: none; padding: 0 clamp(20px, 6vw, 120px); }
/* Màn hình rộng (trên ~1300px): khối chữ, tiêu đề, mô tả, nút to dần theo bề ngang; laptop thường giữ cỡ cũ */
.hb-inner { max-width: max(min(560px, 50vw), 44vw); }
.hero-photo-bg h1 { font-size: clamp(34px, 4.4vw, 76px); line-height: 1.12; letter-spacing: -1px; color: #86efac; margin: 0 0 18px;
  text-wrap: balance; }
/* Cụm "giai đoạn sinh trưởng" luôn nằm chung một dòng */
.hero-photo-bg h1 .accent { color: var(--melon-600); white-space: nowrap; }
.hero-photo-bg p.lead { font-size: clamp(17px, 1.4vw, 24px); line-height: 1.7; color: #fff; margin: 0; }
.hero-photo-bg .hero-cta .btn { font-size: clamp(15px, 1.17vw, 20px); padding: clamp(11px, .86vw, 15px) clamp(20px, 1.56vw, 28px); }

/* Camera illustration */
.cam-illu { position: relative; aspect-ratio: 4/3.4; background: linear-gradient(180deg,#eafff1,#d6f5e3);
  border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--green-100); }

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section-alt { background: rgba(255,255,255,.4); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 42px; }
.section-head .eyebrow { color: var(--melon-600); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; }
.section-head h2 { font-size: 34px; color: var(--green-900); margin-top: 8px; }
.section-head p { color: var(--slate-500); font-size: 17px; }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px;
  padding: 26px; box-shadow: 0 8px 26px rgba(20,83,45,.08); transition: transform .15s ease, box-shadow .2s ease;
}
.card.hover:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(20,83,45,.14); }
/* Glass helper (bỏ hiệu ứng làm mờ nền vì rất nặng khi cuộn; nền phía sau trơn nên nhìn gần như không đổi) */
.glass { background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px; box-shadow: 0 8px 26px rgba(20,83,45,.08); }
.glass-solid { background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.8);
  border-radius: 20px; box-shadow: 0 8px 26px rgba(20,83,45,.08); }
.feature-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  font-size: 26px; margin-bottom: 16px; background: var(--green-100); color: var(--green-800);
}
.feature-icon.melon { background: var(--melon-100); color: var(--melon-600); }
.card h3 { font-size: 20px; color: var(--ink); }
.card p { color: var(--slate-500); margin: 0; }

/* ---------- Spec strip ---------- */
.spec-item { display: flex; gap: 16px; align-items: flex-start; }
.spec-item .big { font-size: 30px; }

/* ---------- Blog cards ---------- */
.post-card { overflow: hidden; padding: 0; cursor: pointer; }
.post-thumb { aspect-ratio: 16/9; display: grid; place-items: center; font-size: 52px; color: #fff; }
.post-body { padding: 20px 22px 24px; }
.post-tag { font-size: 12px; font-weight: 700; color: var(--melon-600); text-transform: uppercase; letter-spacing: .5px; }
.post-card h3 { font-size: 19px; margin: 8px 0; }
.post-meta { color: var(--slate-400); font-size: 13px; margin-top: 12px; }

/* ---------- Forum ---------- */
.forum-item { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px; background: rgba(255,255,255,.72);
  margin-bottom: 12px; transition: box-shadow .2s, transform .15s; box-shadow: 0 6px 20px rgba(20,83,45,.06); }
.forum-item:hover { box-shadow: var(--shadow-md); }
.forum-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; flex-shrink: 0; }
.forum-main { flex: 1; min-width: 0; }
.forum-main h3 { font-size: 17px; margin: 0 0 3px; }
.forum-main .muted { color: var(--slate-500); font-size: 13px; }
.forum-stat { text-align: center; color: var(--slate-500); font-size: 13px; min-width: 64px; }
.forum-stat b { display: block; font-size: 20px; color: var(--green-700); }

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--slate-700); }
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 14px; border: 1.5px solid rgba(148,163,184,.4); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 15px; background: rgba(255,255,255,.85); color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px var(--green-100); }
.field textarea { min-height: 110px; resize: vertical; }
.form-note { font-size: 13px; color: var(--slate-400); margin-top: 4px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-900); color: #cfeeda; padding: 52px 0 28px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.site-footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.site-footer a { color: #a7d8bb; display: block; padding: 4px 0; font-size: 14px; }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 34px; padding-top: 20px; text-align: center; font-size: 13px; color: #8fc4a5; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.badge-green { background: var(--green-100); color: var(--green-800); }
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-blue { background: #dbeafe; color: #1d4ed8; }
.badge-amber { background: var(--melon-100); color: var(--melon-600); }
.badge-gray { background: var(--slate-100); color: var(--slate-500); }

/* dot */
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-green { background: var(--green-500); }
.dot-red { background: var(--cal-alert); }
.dot-gray { background: var(--slate-300); }

/* ---------- Toast / Push notification ---------- */
#toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 12px; max-width: 380px; }
.toast {
  background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); padding: 16px 18px;
  border-left: 5px solid var(--green-500); animation: toastIn .3s ease;
}
.toast.alert { border-left-color: var(--cal-alert); animation: toastIn .3s ease, blinkBorder 1s ease-in-out 3; }
.toast .t-title { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.toast .t-body { font-size: 14px; color: var(--slate-600); margin: 6px 0 10px; }
.toast .t-actions { display: flex; gap: 8px; }
.toast .t-close { position: absolute; top: 8px; right: 10px; cursor: pointer; color: var(--slate-400); background: none; border: none; font-size: 18px; }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes blinkBorder { 50% { border-left-color: #fca5a5; } }

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 1500; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: 18px; max-width: 540px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-lg); animation: toastIn .25s ease; }
.modal-head { padding: 22px 26px; border-bottom: 1px solid var(--slate-200); display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { margin: 0; font-size: 20px; }
.modal-body { padding: 24px 26px; }
.modal-foot { padding: 18px 26px; border-top: 1px solid var(--slate-200); display: flex; justify-content: flex-end; gap: 10px; }
.modal .close-x { background: none; border: none; font-size: 26px; cursor: pointer; color: var(--slate-400); line-height: 1; }

/* utilities */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--slate-500); }
.hidden { display: none !important; }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 16px; } .gap-1 { gap: 8px; }
.wrap { flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 36px; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Menu trên có 6 mục: thu thành nút ☰ khi màn hình hẹp hơn 1100px để chữ không bị xuống dòng */
@media (max-width: 1100px) {
  .nav-links { display: none; position: absolute; top: 66px; left: 0; right: 0; background: #fff; flex-direction: column;
    padding: 12px; border-bottom: 1px solid var(--slate-200); box-shadow: var(--shadow-md); }
  .nav-links.open { display: flex; }
  .nav-links a { width: 100%; }
  .menu-toggle { display: block; }
  /* Nút ☰ nằm bên phải, cạnh nút "Vào Dashboard" (không đứng lẻ loi giữa thanh menu) */
  .site-header .nav { justify-content: flex-start; gap: 12px; }
  .nav-cta { margin-left: auto; }
  .menu-toggle { order: 2; }
}
@media (max-width: 620px) {
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 30px; }
  .section-head h2 { font-size: 26px; }
}

/* ---------- 6 giai đoạn sinh trưởng (dùng chung) ---------- */
:root { --cal-ai: #8b5cf6; /* 🟣 tím - sự kiện do AI phát hiện giai đoạn */ }
.stage-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px 4px 8px;
  border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 75%, #000); white-space: nowrap; }
.stage-chip i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); display: inline-block; }
.stage-photo { aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; position: relative; background: #dcfce7; }
.stage-photo > img { width: 100%; height: 100%; object-fit: cover; }
/* Ghi nguồn nhỏ ở góc ảnh lấy từ bộ dữ liệu ngoài (giấy phép CC BY bắt buộc ghi nguồn) */
.anh-nguon { position: absolute; top: 10px; right: 10px; padding: 2px 9px; border-radius: 999px;
  background: rgba(0,0,0,.45); color: #fff; font-size: 11px; line-height: 1.5; pointer-events: none; }
.stage-card { padding: 0; overflow: hidden; }
.stage-card .stage-photo { border-radius: 0; aspect-ratio: 16/10; }
.stage-card .sc-body { padding: 16px 18px 20px; }
.stage-card .sc-num { font-size: 12px; font-weight: 800; color: var(--slate-400); }
.stage-card h3 { font-size: 17px; margin: 6px 0; }
.stage-card p { font-size: 14px; }
.toast.stage { border-left-color: var(--cal-ai); }
.demo-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; font-size: 13px; color: #92400e; }
.upload-box { border: 2px dashed var(--green-500); border-radius: 18px; padding: 26px; text-align: center; background: rgba(240,253,244,.6); }
.upload-box img { max-height: 260px; margin: 0 auto 12px; border-radius: 12px; }
.det-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(148,163,184,.2); font-size: 14px; }
.det-row:last-child { border-bottom: none; }
.det-steps { margin: 6px 0 0; padding-left: 20px; color: var(--slate-700); font-size: 14px; line-height: 1.8; }

/* ---------- Chuyển trang mượt ----------
   Trình duyệt giữ trang cũ đến khi trang mới sẵn sàng rồi chuyển mờ dần sang (không còn chớp trắng).
   Thanh bên Dashboard và menu trên đứng yên, chỉ phần nội dung đổi.
   Chạy được trên Chrome, Edge, Cốc Cốc và Safari bản mới; trình duyệt cũ vẫn chuyển trang bình thường. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.dash-sidebar { view-transition-name: dash-sidebar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }

/* Người dùng bật "giảm chuyển động" trong máy -> tắt nhấp nháy, trượt */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Biểu tượng nét mảnh (thay emoji, xem CT.thayEmoji trong common.js) ---------- */
.ic-svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; flex-shrink: 0; }
.btn .ic-svg { width: 18px; height: 18px; }
.feature-icon .ic-svg { width: 26px; height: 26px; }
.spec-item .big .ic-svg { width: 28px; height: 28px; }
.brand .logo .ic-svg, .dash-brand .logo .ic-svg { width: 22px; height: 22px; color: #fff; stroke-width: 2; }
.step-num { font-size: 22px; font-weight: 800; color: var(--green-800); line-height: 1; }
.site-footer a .ic-svg { margin-right: 6px; }
.spec-item .big { color: var(--green-700); }

/* ---------- Trang chủ bản "sang hơn" (body class="trang-chu"), duyệt 28/10/2026 ----------
   Giữ màu xanh bạc hà, cam và phông chữ cũ. Chỉ áp cho trang chủ:
   1. Nền sạch: các đoạn xen kẽ trắng tinh / xanh bạc hà rất nhạt, bỏ nền loang màu
   4. Thanh menu trong suốt nằm đè lên ảnh đầu trang, cuộn xuống mới hiện nền trắng (CT.menuTrongSuot)
   5. Thẻ gọn: viền mảnh, bóng đổ nhẹ, bo góc đều
   7. Thoáng hơn: tiêu đề các đoạn to hơn, khoảng cách giữa các đoạn rộng hơn */
.trang-chu { background: #fff; }
.trang-chu::before { display: none; }
.trang-chu .section { background: #fff; padding: 96px 0; }
.trang-chu .section-alt { background: #f2faf5; }

.trang-chu .site-header { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent;
  transition: background .25s ease, box-shadow .25s ease; }
.trang-chu .site-header:not(.scrolled) .brand,
.trang-chu .site-header:not(.scrolled) .nav-links a,
.trang-chu .site-header:not(.scrolled) .menu-toggle { color: #fff; }
.trang-chu .site-header:not(.scrolled) .nav-links a:hover { background: rgba(255,255,255,.15); color: #fff; }
.trang-chu .site-header:not(.scrolled) .nav-links a.active { background: rgba(255,255,255,.2); color: #fff; }
.trang-chu .site-header:not(.scrolled) .btn-ghost { color: #fff; border-color: rgba(255,255,255,.75); }
.trang-chu .site-header.scrolled { background: #fff; box-shadow: 0 1px 0 rgba(15,23,42,.06), 0 6px 20px rgba(15,23,42,.05); }
@media (max-width: 1100px) {
  .trang-chu .site-header .nav-links a, .trang-chu .site-header:not(.scrolled) .nav-links a { color: var(--slate-700); }
}
/* Ảnh đầu trang chạy lên sát mép trên (nằm dưới menu); lớp tối mờ ở mép trên cho chữ menu dễ đọc */
.trang-chu .hero-photo-bg { min-height: min(88vh, 720px); padding-top: 120px; }
.trang-chu .hero-photo-bg::after {
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35) 0, rgba(0,0,0,0) 140px),
    linear-gradient(90deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.40) 38%, rgba(0,0,0,.15) 68%, rgba(0,0,0,.05) 100%); }

.trang-chu .card { background: #fff; border: 1px solid rgba(15,23,42,.07); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05); }
.trang-chu .card.hover:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 14px 32px rgba(15,23,42,.09); }
.trang-chu .cam-illu { border-radius: 16px; box-shadow: 0 8px 24px rgba(15,23,42,.08); border-color: rgba(15,23,42,.07); }

.trang-chu .section-head { margin-bottom: 56px; }
.trang-chu .section-head h2 { font-size: 40px; letter-spacing: -0.5px; margin-top: 10px; }
.trang-chu .section-head p { font-size: 18px; line-height: 1.7; }
.trang-chu .grid { gap: 28px; }
@media (max-width: 620px) { .trang-chu .section { padding: 64px 0; } .trang-chu .section-head h2 { font-size: 28px; } }


/* ---------- Trang Tri thức và Cộng đồng bản "sang" (body class="trang-chu trang-con"), duyệt 29/10/2026 ----------
   Dùng chung kiểu trang chủ (.trang-chu), thêm .trang-con cho phần riêng. Giữ màu xanh bạc hà, cam và phông chữ cũ. */

/* Đầu trang con: ảnh tràn phía sau như trang chủ, khung cao gần bằng trang chủ (30/10: khung thấp làm ảnh bị phóng
   quá cỡ, nhòe trên màn hình rộng). Ảnh vừa đúng bề ngang, không kéo giãn; chỉnh chỗ cắt bằng object-position trên thẻ <img>. */
.trang-con .hero-photo-bg { min-height: min(80vh, 680px); padding: 120px 0 72px; }
.trang-con .hero-photo-bg .hb-img { width: 100%; object-position: 50% 55%; }
.trang-con .hb-eyebrow { display: inline-block; color: #fdba74; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.5px; font-size: clamp(13px, 1vw, 17px); margin-bottom: 12px; }
.trang-con .hero-photo-bg h1 { font-size: clamp(32px, 3.6vw, 66px); }
.trang-con .hb-inner { max-width: max(min(620px, 60vw), 44vw); }
.trang-con .section { padding: 64px 0 96px; }

/* Nút lọc */
.loc-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 36px; }
.loc-btn { border: 1px solid rgba(15,23,42,.1); background: #fff; color: var(--slate-700); padding: 9px 18px;
  border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.loc-btn:hover { border-color: var(--green-500); color: var(--green-800); }
.loc-btn.active { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.loc-btn .so { opacity: .65; margin-left: 4px; font-weight: 500; }
.loc-bar .loc-phai { margin-left: auto; }

/* ---------- Tri thức: thẻ bài viết có ảnh thật ---------- */
.bai { padding: 0; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
.bai-anh { aspect-ratio: 3 / 2; overflow: hidden; background: var(--green-50); }
.bai-anh img, .bai-anh svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.bai:hover .bai-anh img, .bai:hover .bai-anh svg { transform: scale(1.03); }
.bai-than { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.bai-tag { font-size: 12px; font-weight: 800; color: var(--melon-600); text-transform: uppercase; letter-spacing: .8px; }
.bai h3 { font-size: 19px; line-height: 1.35; margin: 8px 0 8px; color: var(--ink); }
.bai p { color: var(--slate-500); font-size: 15px; line-height: 1.65; margin: 0; }
.bai-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--slate-400); font-size: 13px; margin-top: auto; padding-top: 14px; }
.bai-meta span { display: inline-flex; align-items: center; gap: 5px; }

/* Hàng đầu: bài nổi bật to bên trái, hai bài gọn bên phải */
.tt-dau { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; margin-bottom: 28px; }
.bai-noi-bat .bai-anh { aspect-ratio: 16 / 9; }
.bai-noi-bat h3 { font-size: 26px; line-height: 1.3; }
.bai-noi-bat p { font-size: 16px; }
.bai-noi-bat .bai-than { padding: 24px 28px 28px; }
.tt-ben { display: grid; grid-template-rows: 1fr 1fr; gap: 28px; }
.bai-gon { flex-direction: row; }
.bai-gon .bai-anh { aspect-ratio: auto; width: 42%; flex-shrink: 0; }
.bai-gon h3 { font-size: 17px; }
.bai-gon p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
/* Lọc còn đúng một bài: thẻ nằm ngang, ảnh to bên trái */
.bai-ngang { flex-direction: row; }
.bai-ngang .bai-anh { aspect-ratio: auto; width: 56%; flex-shrink: 0; min-height: 360px; }
.bai-ngang .bai-than { padding: 32px 36px; justify-content: center; }
.bai-ngang h3 { font-size: 28px; }
.bai-ngang p { font-size: 16px; }
.bai-ngang .bai-meta { margin-top: 18px; }

/* Khung đọc bài */
.modal.doc-bai { max-width: 820px; }
.doc-bai .modal-body { padding: 0 0 8px; }
.doc-anh { aspect-ratio: 21 / 9; overflow: hidden; }
.doc-anh img, .doc-anh svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-than { padding: 26px 34px 10px; }
.doc-than h2 { font-size: 30px; line-height: 1.25; color: var(--green-900); margin: 8px 0 12px; }
.doc-than .bai-meta { margin: 0 0 18px; padding: 0; }
.doc-mo-dau { font-size: 18px; line-height: 1.7; color: var(--slate-700); margin: 0 0 22px; }
.doc-than h4 { font-size: 15px; text-transform: uppercase; letter-spacing: .8px; color: var(--melon-600); margin: 0 0 12px; }
.doc-y { list-style: none; padding: 0; margin: 0 0 22px; }
.doc-y li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--slate-100, #f1f5f9); font-size: 16px; line-height: 1.6; color: var(--slate-700); }
.doc-y li:last-child { border-bottom: none; }
.doc-y .ic-svg { color: var(--green-600); width: 22px; height: 22px; margin-top: 1px; }
.doc-luu-y { font-size: 13px; color: var(--slate-500); background: var(--green-50); border-radius: 10px; padding: 10px 14px; margin: 0 0 20px; }
.doc-khac { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.doc-khac a { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid rgba(15,23,42,.08); border-radius: 12px;
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.doc-khac a:hover { border-color: var(--green-500); }
.doc-khac .nho { width: 84px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.doc-khac .nho img, .doc-khac .nho svg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Cộng đồng ---------- */
.cd-wrap { max-width: 920px; margin: 0 auto; }
.bao-mau { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 14px; background: #fffbeb;
  border: 1px solid #fde68a; color: #92400e; font-size: 14px; line-height: 1.6; margin-bottom: 28px; }
.bao-mau .ic-svg { width: 20px; height: 20px; margin-top: 2px; }
.cd-item { display: flex; align-items: center; gap: 18px; padding: 20px 24px; margin-bottom: 14px; cursor: pointer; }
.cd-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; flex-shrink: 0; }
.cd-main { flex: 1; min-width: 0; }
.cd-main h3 { font-size: 18px; line-height: 1.4; margin: 6px 0 4px; color: var(--ink); }
.cd-main .muted { color: var(--slate-500); font-size: 13px; }
.cd-nhan { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cd-loai { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--c-bg); color: var(--c); }
.nhan-mau { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; }
.nhan-may { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e0f2fe; color: #075985; }
.cd-so { display: flex; gap: 22px; color: var(--slate-500); font-size: 14px; }
.cd-so span { display: inline-flex; align-items: center; gap: 6px; min-width: 110px; white-space: nowrap; }
.cd-so b { color: var(--green-700); font-size: 16px; }
.cd-trong { text-align: center; color: var(--slate-500); padding: 40px 0; }

/* Khung xem chủ đề */
.modal.doc-cd { max-width: 720px; }
.cd-hoi { display: flex; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--slate-200); margin-bottom: 18px; }
.cd-hoi p { margin: 6px 0 0; font-size: 16px; line-height: 1.7; color: var(--slate-700); }
.cd-tl-dau { font-size: 14px; font-weight: 700; color: var(--slate-500); margin: 0 0 12px; }
.cd-tl { display: flex; gap: 12px; margin-bottom: 16px; }
.cd-tl .cd-avatar { width: 38px; height: 38px; font-size: 15px; }
.cd-tl-bong { background: var(--green-50); border-radius: 4px 14px 14px 14px; padding: 10px 14px; flex: 1; }
.cd-tl-bong b { font-size: 14px; color: var(--ink); }
.cd-tl-bong p { margin: 4px 0 0; font-size: 15px; line-height: 1.65; color: var(--slate-700); }

@media (max-width: 900px) {
  .tt-dau { grid-template-columns: 1fr; }
  .bai-ngang { flex-direction: column; }
  .bai-ngang .bai-anh { width: 100%; min-height: 0; aspect-ratio: 3 / 2; }
  .cd-so { display: none; }
}

/* ---------- Trang Nhận diện, Đặt trước, Đăng nhập bản "sang", duyệt 30/10/2026 ----------
   Nhận diện, Đặt trước dùng body class="trang-chu trang-con" như Tri thức; Đăng nhập dùng body class="trang-dn". */
/* Nhận diện: tiêu đề đã nằm trên ảnh đầu trang nên ẩn phần giới thiệu cũ */
.trang-con .page-intro { display: none; }
#congCu { scroll-margin-top: 90px; }
.trang-con .upload-box { background: #f7fcf9; border-color: rgba(22,163,74,.45); }

/* Đặt trước: thẻ gói nổi bật viền xanh, phần cam kết */
.trang-con .goi-noi { border: 2px solid var(--green-500) !important; }
.trang-con .gia { font-size: 34px; font-weight: 800; color: var(--green-800); }
.trang-con .gia span { font-size: 15px; color: var(--slate-500); font-weight: 600; }
.trang-con .ds-goi { list-style: none; padding: 0; margin: 14px 0 20px; }
.trang-con .ds-goi li { display: flex; gap: 10px; padding: 7px 0; color: var(--slate-700); font-size: 15px; }
.trang-con .ds-goi .ic-svg { color: var(--green-600); margin-top: 2px; }
.cam-ket { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cam-ket div { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--green-50);
  color: var(--green-900); font-weight: 600; font-size: 14px; }
.cam-ket .ic-svg { width: 22px; height: 22px; color: var(--green-700); }
#datTruoc { scroll-margin-top: 90px; }

/* Đăng nhập: nửa trái ảnh vườn, nửa phải biểu mẫu trên nền trắng */
.trang-dn { background: #fff; }
.trang-dn::before { display: none; }
.dn-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }
.dn-anh { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 56px; }
.dn-anh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05) 60%); }
/* Ảnh ong thụ phấn: khung đứng nên chỉ lấy phần giữa-trái của ảnh ngang, chỗ có bông hoa và con ong */
.dn-anh .dn-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 34% 50%; }
/* Chữ và biểu mẫu to dần theo màn hình rộng, laptop thường giữ cỡ cũ */
.dn-chu { position: relative; z-index: 1; color: #fff; max-width: max(460px, 30vw); }
.dn-chu .brand { color: #fff; font-size: clamp(22px, 1.7vw, 30px); margin-bottom: 14px; }
.dn-chu h2 { color: #86efac; font-size: clamp(34px, 2.65vw, 50px); line-height: 1.2; margin: 0 0 10px; }
.dn-chu p { color: #fff; font-size: clamp(16px, 1.25vw, 21px); line-height: 1.7; margin: 0; }
.dn-form { display: grid; place-items: center; padding: 48px 32px; }
.dn-hop { width: 100%; max-width: clamp(400px, 31vw, 520px); }
.dn-hop h1 { color: var(--green-900); font-size: clamp(30px, 2.35vw, 40px); margin: 0 0 6px; }
.dn-hop .muted { margin: 0 0 26px; }
.dn-hop .field input { background: #fff; }
.dn-hoac { display: flex; align-items: center; gap: 12px; color: var(--slate-400); font-size: 13px; margin: 18px 0; }
.dn-hoac::before, .dn-hoac::after { content: ""; flex: 1; height: 1px; background: var(--slate-200); }
.dn-ve { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; color: var(--slate-500); font-size: 14px; }

@media (max-width: 900px) {
  .dn-wrap { grid-template-columns: 1fr; }
  .dn-anh { min-height: 260px; padding: 32px; }
  .cam-ket { grid-template-columns: 1fr; }
}

/* ---------- Điện thoại: các trang công cộng (làm 02/11/2026) ----------
   Chỉ đổi khi màn hình hẹp (từ 620px trở xuống, cỡ điện thoại); máy tính giữ nguyên giao diện đã duyệt.
   Giữ màu, phông, ảnh như bản máy tính, chỉ sắp xếp lại cho vừa màn hình nhỏ. */
@media (max-width: 620px) {
  /* Menu trên: logo, nút Đăng nhập (hoặc Vào Dashboard) và ☰; nút "Đặt trước" đã có trong menu ☰ nên ẩn bớt */
  .nav-cta .nut-dat-truoc { display: none; }
  .nav-cta .btn { padding: 9px 14px; font-size: 14px; }
  .brand { font-size: 18px; gap: 8px; }
  .brand .logo { width: 34px; height: 34px; }
  .nav-links a { padding: 12px 14px; font-size: 16px; }

  /* Ảnh đầu trang: khối chữ rộng hết màn hình (trước bị bó còn khoảng 200px), chữ được xuống dòng,
     lớp tối phủ đều vì chữ trải hết bề ngang (bản máy tính tối bên trái, sáng dần bên phải) */
  .hb-inner, .trang-con .hb-inner { max-width: none; }
  .hero-photo-bg > .container { padding: 0 20px; }
  .hero-photo-bg .hb-img { width: 100%; }
  .hero-photo-bg h1, .trang-con .hero-photo-bg h1 { font-size: 30px; letter-spacing: -.5px; }
  .hero-photo-bg h1 .accent { white-space: normal; }
  .hero-photo-bg p.lead { font-size: 16px; }
  .hero-photo-bg::after, .trang-chu .hero-photo-bg::after {
    background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.55) 100%); }
  .trang-chu .hero-photo-bg { min-height: min(86vh, 640px); padding: 104px 0 48px; }
  .trang-con .hero-photo-bg { min-height: min(72vh, 560px); padding: 100px 0 48px; }
  .hero-cta { gap: 10px; }

  /* Các đoạn, tiêu đề, thẻ gọn hơn cho vừa màn hình */
  .section { padding: 48px 0; }
  .trang-chu .section { padding: 56px 0; }
  .trang-con .section { padding: 40px 0 56px; }
  .section-head, .trang-chu .section-head { margin-bottom: 32px; }
  .section-head h2, .trang-chu .section-head h2 { font-size: 26px; }
  .section-head p, .trang-chu .section-head p { font-size: 16px; }
  .upload-box { padding: 18px; }

  /* Thông báo nhỏ không tràn ra ngoài mép màn hình */
  #toast-wrap { top: 12px; left: 12px; right: 12px; max-width: none; }

  /* Khung đọc bài (Tri thức), xem chủ đề (Cộng đồng) và các khung bật lên khác */
  .modal-overlay { padding: 10px; }
  .modal-head { padding: 16px 18px; }
  .modal-body { padding: 18px; }
  .modal-foot { padding: 14px 18px; }
  .doc-anh { aspect-ratio: 16 / 9; }
  .doc-than { padding: 20px 18px 6px; }
  .doc-than h2 { font-size: 23px; }
  .doc-mo-dau { font-size: 16px; }
  .doc-y li { font-size: 15px; }
  .doc-khac { grid-template-columns: 1fr; }

  /* Tri thức: bài nổi bật, hai bài gọn (ảnh lên trên chữ), nút lọc */
  .loc-bar { gap: 8px; margin-bottom: 24px; }
  .loc-btn { padding: 8px 14px; font-size: 13px; }
  .tt-dau, .tt-ben { gap: 20px; }
  .bai-noi-bat h3 { font-size: 21px; }
  .bai-noi-bat .bai-than, .bai-ngang .bai-than { padding: 20px; }
  .bai-gon { flex-direction: column; }
  .bai-gon .bai-anh { width: 100%; aspect-ratio: 3 / 2; }
  .bai-ngang h3 { font-size: 22px; }

  /* Cộng đồng */
  .cd-item { padding: 16px; gap: 14px; }
  .cd-avatar { width: 42px; height: 42px; font-size: 16px; }
  .cd-main h3 { font-size: 16px; }

  /* Đặt trước */
  .trang-con .gia { font-size: 30px; }

  /* Đăng nhập: ảnh thấp lại, biểu mẫu sát mép hơn */
  .dn-anh { min-height: 220px; padding: 24px 20px; }
  .dn-chu h2 { font-size: 26px; }
  .dn-chu p { font-size: 15px; }
  .dn-form { padding: 32px 20px 40px; }

  /* Chân trang */
  .site-footer { padding: 40px 0 24px; }
  .footer-grid { gap: 24px; }
}

/* ---------- Nút mặt trời / mặt trăng ở góc dưới bên phải (js/common.js gắn vào trang công cộng có ảnh bìa và Đăng nhập;
   Dashboard không có nút, đổi ở Cài đặt > Giao diện), 03/11/2026: một lựa chọn sáng/tối chung cho cả web.
   Nút đang chọn tô đậm: mặt trời nền xanh lá; mặt trăng nền trắng trên khung tối ---------- */
.nut-bia { position: fixed; right: 20px; bottom: 20px; z-index: 1200; display: flex; gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(255,255,255,.92); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 8px 24px rgba(15,23,42,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .3s; }
.nut-bia button { width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0; background: transparent; color: #64748b;
  display: grid; place-items: center; cursor: pointer; transition: background .25s, color .25s; }
.nut-bia button:hover { color: #166534; }
.nut-bia .ic-svg { width: 20px; height: 20px; }
.nut-bia button[aria-pressed="true"] { background: #15803d; color: #fff; }
.bia-toi .nut-bia, .che-do-toi .nut-bia { background: rgba(40,50,45,.92); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.bia-toi .nut-bia button, .che-do-toi .nut-bia button { color: rgba(255,255,255,.7); }
.bia-toi .nut-bia button:hover, .che-do-toi .nut-bia button:hover { color: #fff; }
.bia-toi .nut-bia button[aria-pressed="true"], .che-do-toi .nut-bia button[aria-pressed="true"] { background: #fff; color: #28322d; }
@media (max-width: 700px) {
  .nut-bia { right: 14px; bottom: 14px; }
  .nut-bia button { width: 38px; height: 38px; }
}

/* ============================================================
   12/11/2026: sửa theo danh sách rà soát người dùng chọn (A7, A8, A9, B18). Phần của Dashboard nằm cuối css/dashboard-moi.css.
   ============================================================ */
/* A7. Chân trang: dòng địa chỉ chỉ là chữ (không bấm được); email dài được ngắt dòng khi khung hẹp */
.site-footer a.ft-tinh { pointer-events: none; }
.site-footer a { overflow-wrap: anywhere; }
/* Email dài: điện thoại cho chữ nhỏ lại một chút để nằm gọn một dòng (nếu vẫn chật thì ngắt ở trước chữ @, đã đặt <wbr>) */
@media (max-width: 700px) { .site-footer a[href^="mailto:"] { font-size: 15px !important; } }
/* A8. Thẻ giai đoạn (trang Nhận diện): chỉ một tên, ô màu của giai đoạn đứng trước tên */
.stage-card h3.sc-ten { display: flex; align-items: center; gap: 10px; }
.stage-card h3.sc-ten i { flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
/* B18. Chữ 10–11px nâng lên 12px */
.anh-nguon { font-size: 12px; }
.nhan-mau, .nhan-may { font-size: 12px; }
/* A9. Nút đóng thông báo: vùng bấm 32px (trước chỉ khoảng 23px) */
.toast .t-close { top: 4px; right: 4px; width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
  font-size: 20px; line-height: 1; border-radius: 50%; }
.toast .t-close:hover { background: rgba(15,23,42,.06); }
/* A9. Điện thoại: nút nhỏ cao khoảng 36px (trước 27px), chữ 14px */
@media (max-width: 820px) {
  .btn-sm { padding: 9px 16px; font-size: 14px; }
  /* Hai nút cạnh nhau ở đầu trang (Lịch: "Ngày xuống giống" + "Thêm công việc"): chữ 13px, đệm ngang hẹp hơn để vừa một hàng,
     không rớt chữ thành 2 dòng; vẫn cao khoảng 36px */
  .topbar-actions { gap: 8px; flex-wrap: wrap; }
  .topbar-actions .btn-sm { padding: 10px 12px; font-size: 13px; white-space: nowrap; }
}