/* ============================================================
   DÀNH CHO NHÂN VIÊN QUÁN — bảng điều hành
   ------------------------------------------------------------
   Bố cục và cách tương tác lấy theo Google Calendar (lưới giờ, khối
   thời gian, thẻ chi tiết) — nhưng MÀU thì lấy trọn của trang khách:
   giấy kem, trắng xanh, navy, chỉ vàng đồng. Nhân viên đi từ trang web
   vào đây không thấy như lạc sang một phần mềm khác.

   File này KHÔNG nạp flightdeck.css: trang khách được thiết kế để đọc
   một lần (nhiều khoảng thở, chữ to), còn đây là công cụ làm việc cả
   ngày, cần dày đặc thông tin hơn. Chung bảng màu, khác nhịp.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

:root {
  --paper:      #F8F5EE;
  --paper-2:    #F1ECE0;
  --paper-3:    #E7E0D0;
  --frost:      #EDF3F8;
  --frost-2:    #DCE8F2;
  --white:      #FFFFFF;

  --navy:       #0D2440;
  --navy-2:     #14375E;
  --blue:       #1E5FA6;
  --blue-soft:  #4E8DCB;
  --sky:        #9CC4E4;
  --ink:        #1B2531;
  --muted:      #5E6D7E;
  --hairline:   #D5CEBE;
  --hairline-b: #C3D5E6;

  --gold:       #B08D4F;
  --gold-soft:  #DFC98F;
  --ok:         #2E7D5B;
  --ok-bg:      #E4F3EA;
  --warn:       #A8752A;
  --warn-bg:    #FDF6E9;
  --bad:        #A63A32;
  --bad-bg:     #FBEDEC;

  --f-display: "Playfair Display", Georgia, serif;
  --f-body:    "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --f-mono:    "Space Mono", ui-monospace, Consolas, monospace;

  --hour-h: 54px;
  --gutter: 62px;
  --head-h: 66px;
  --side-w: 290px;
  --r-sm: 6px;
  --r: 12px;
  --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(13,36,64,.06), 0 2px 8px rgba(13,36,64,.05);
  --shadow: 0 2px 4px rgba(13,36,64,.06), 0 12px 32px rgba(13,36,64,.10);
  --shadow-lg: 0 4px 10px rgba(13,36,64,.08), 0 28px 64px rgba(13,36,64,.16);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;              /* chỉ vùng lịch và cột bên được cuộn */
  overflow-wrap: break-word;
}

button { font-family: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--f-display); color: var(--navy); margin: 0; font-weight: 600; }

/* Thuộc tính `hidden` của HTML chạy qua luật [hidden]{display:none} của
   trình duyệt — luật yếu nhất, thua mọi luật tự viết. `.gate` đặt
   display:grid và `.app` đặt display:flex, nên cả hai ĐÈ MẤT `hidden`:
   màn khoá vẫn phủ kín màn hình và nuốt mọi cú bấm dù mắt không thấy. */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }

.app { display: flex; flex-direction: column; height: 100%; }

/* ============================================================
   MÀN HÌNH KHOÁ
   ============================================================ */
.gate {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 20px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(20,55,94,.35), transparent 60%),
    var(--navy);
}
.gate__card {
  width: min(400px, 100%);
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px 30px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.gate__card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft), var(--gold));
}
.gate__card img { width: 52px; height: 52px; margin: 0 auto 16px; object-fit: contain; }
.gate__eyebrow {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue); font-weight: 600; margin: 0 0 8px;
}
.gate__card h1 { font-size: 26px; margin-bottom: 8px; }
.gate__card p { margin: 0 0 24px; font-size: 14px; color: var(--muted); }

.gate input {
  width: 100%; height: 54px;
  border: 1px solid var(--hairline); border-radius: var(--r);
  background: var(--white);
  font-family: var(--f-mono);
  font-size: 24px; letter-spacing: .34em; text-align: center;
  color: var(--navy);
  margin-bottom: 16px;
  padding-left: .34em;            /* bù letter-spacing để chữ nằm giữa */
}
.gate input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,95,166,.15); }
.gate input::placeholder { letter-spacing: .2em; font-size: 15px; color: #9AA6B4; }

.gate button {
  width: 100%; height: 48px; border: 0; border-radius: 999px;
  background: var(--navy); color: var(--paper);
  font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .16s ease;
}
.gate button:hover { background: var(--navy-2); }
.gate__err {
  display: none; margin: 14px 0 0;
  font-size: 13.5px; color: var(--bad); font-weight: 500;
}
.gate__err.is-on { display: block; }
.gate__back {
  display: inline-block; margin-top: 18px;
  font-size: 13px; color: var(--muted); text-decoration: none;
}
.gate__back:hover { color: var(--navy); text-decoration: underline; }

/* ============================================================
   THANH TRÊN
   ============================================================ */
.topbar {
  flex: none; height: var(--head-h);
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--gold-soft), transparent 55%);
  opacity: .8;
}

.tb-brand { display: flex; align-items: center; gap: 11px; margin-right: 6px; text-decoration: none; }
.tb-brand img { width: 32px; height: 32px; object-fit: contain; }
.tb-brand b {
  font-family: var(--f-display); font-size: 18px; color: var(--navy);
  font-weight: 600; display: block; line-height: 1.1;
}
.tb-brand small {
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}

.tb-btn {
  height: 36px; padding: 0 16px;
  border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--white); color: var(--ink);
  font-size: 13.5px; font-weight: 500;
  transition: background-color .14s ease, border-color .14s ease;
}
.tb-btn:hover { background: var(--frost); border-color: var(--hairline-b); }

.tb-nav {
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--navy); font-size: 20px; line-height: 1;
  display: grid; place-items: center;
  transition: background-color .14s ease;
}
.tb-nav:hover { background: var(--frost-2); }
.tb-nav[disabled] { opacity: .3; cursor: not-allowed; background: transparent; }

.tb-title {
  flex: 0 1 auto; min-width: 0;
  font-family: var(--f-display);
  font-size: 20px; color: var(--navy); margin: 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-spacer { flex: 1 1 auto; min-width: 0; }
.tb-btn, .tb-nav, .tb-views, .tb-brand, .search { flex: none; }

.tb-views {
  display: inline-flex; border: 1px solid var(--hairline);
  border-radius: 999px; overflow: hidden; background: var(--white);
}
.tb-views button {
  height: 36px; padding: 0 16px;
  border: 0; background: transparent; color: var(--ink);
  font-size: 13.5px; font-weight: 500;
}
.tb-views button + button { border-left: 1px solid var(--hairline); }
.tb-views button:hover { background: var(--frost); }
.tb-views button.is-on { background: var(--navy); color: var(--paper); }

/* ---------- Ô tìm kiếm ---------- */
.search { position: relative; width: min(280px, 30vw); }
.search input {
  width: 100%; height: 36px;
  border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--white); color: var(--ink);
  font-family: var(--f-body); font-size: 14px;
  padding: 0 34px 0 38px;
  -webkit-appearance: none; appearance: none;
}
.search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,95,166,.13); }
.search::before {
  content: "🔍"; position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%); font-size: 13px; opacity: .55; pointer-events: none;
}
.search__x {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 14px; line-height: 1;
  display: none;
}
.search.has-q .search__x { display: grid; place-items: center; }
.search__x:hover { background: var(--frost-2); color: var(--navy); }

.sresults {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(460px, calc(100vw - 32px));
  max-height: min(60vh, 520px); overflow: auto;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  display: none;
}
.sresults.is-on { display: block; }
.sresults__head {
  padding: 10px 16px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  border-bottom: 1px solid var(--hairline);
  background: var(--frost);
  position: sticky; top: 0;
}
.sitem {
  display: block; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--paper-2);
  background: var(--white); padding: 11px 16px;
  font-family: var(--f-body);
}
.sitem:hover { background: var(--frost); }
.sitem__top { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.sitem__name { font-weight: 600; color: var(--navy); font-size: 14.5px; }
.sitem__when { font-family: var(--f-mono); font-size: 12.5px; color: var(--blue); white-space: nowrap; }
.sitem__meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sitem.is-dead .sitem__name { text-decoration: line-through; color: var(--muted); }
.sempty { padding: 22px 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* ============================================================
   THÂN TRANG: CỘT BÊN + LỊCH
   ============================================================ */
.body { flex: 1 1 auto; display: flex; min-height: 0; }

.side {
  flex: none; width: var(--side-w);
  border-right: 1px solid var(--hairline);
  background: var(--paper-2);
  overflow: auto;
  padding: 18px 16px 24px;
}

.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  overflow: hidden;
}
.card__head {
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--hairline);
  background: var(--frost);
}
.card__head .k {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue); font-weight: 600; display: block;
}
.card__head h2 { font-size: 18px; margin-top: 3px; }
.card__head .d { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.card__body { padding: 14px 16px; }

/* --- Lịch bay ngày mai --- */
.tmr-sum {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.tmr-sum div { background: var(--white); padding: 11px 6px; text-align: center; }
.tmr-sum b {
  display: block; font-family: var(--f-display); font-size: 21px;
  color: var(--navy); line-height: 1.1;
}
.tmr-sum span {
  display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
}

.tmr-list { list-style: none; margin: 0; padding: 0; }
.tmr-list li {
  padding: 11px 16px;
  border-bottom: 1px solid var(--paper-2);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px;
  align-items: start;
  cursor: pointer;
}
.tmr-list li:last-child { border-bottom: 0; }
.tmr-list li:hover { background: var(--frost); }
.tmr-list .t {
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 700;
  color: var(--navy); white-space: nowrap; line-height: 1.35;
}
/* display:block — không có nó thì tên khách và dòng "1 tiếng · 2 khách"
   dính liền nhau thành "Đặng Thu Trang1 tiếng". */
.tmr-list .n { display: block; font-weight: 600; color: var(--ink); font-size: 14px; }
.tmr-list .m { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.tmr-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 5px; vertical-align: 1px;
}
.tmr-none {
  padding: 22px 16px; text-align: center;
  color: var(--muted); font-size: 13.5px;
}
.tmr-warn {
  margin: 0; padding: 10px 16px;
  background: var(--warn-bg); border-top: 1px solid #EBD9B4;
  font-size: 12.5px; color: var(--warn);
}

/* ============================================================
   VÙNG LỊCH
   ============================================================ */
.cal { flex: 1 1 auto; overflow: auto; position: relative; background: var(--white); min-width: 0; }

.grid-head {
  position: sticky; top: 0; z-index: 5;
  display: grid;
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
}
.gh-corner { border-right: 1px solid var(--hairline); }
.gh-day { padding: 7px 4px 9px; text-align: center; border-right: 1px solid var(--paper-2); }
.gh-day:last-child { border-right: 0; }
.gh-dow {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 3px;
}
.gh-num {
  width: 42px; height: 42px; margin: 0 auto;
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 24px; color: var(--navy);
  border-radius: 50%;
}
.gh-day.is-today .gh-dow { color: var(--blue); }
.gh-day.is-today .gh-num { background: var(--navy); color: var(--paper); }
.gh-count { font-size: 10.5px; color: var(--muted); margin-top: 3px; height: 14px; }

.grid-body { display: grid; position: relative; }
.gb-gutter { border-right: 1px solid var(--hairline); }
.gb-hour { height: var(--hour-h); position: relative; text-align: right; padding-right: 8px; }
.gb-hour span {
  position: relative; top: -8px;
  font-family: var(--f-mono); font-size: 10.5px; color: var(--muted);
}
.gb-hour:first-child span { display: none; }

.gb-col { position: relative; border-right: 1px solid var(--paper-2); }
.gb-col:last-child { border-right: 0; }
.gb-col.is-weekend { background: #FCFAF5; }
.gb-slot { height: var(--hour-h); border-bottom: 1px solid var(--paper-2); }
.gb-slot::after {
  content: ""; display: block; height: 50%;
  border-bottom: 1px dotted #EFEADF;
}

/* --- Khối lượt bay --- */
.ev {
  position: absolute;
  border-radius: var(--r-sm);
  padding: 4px 7px;
  font-family: var(--f-body);
  font-size: 12px; line-height: 1.3;
  color: #fff;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.5);
  cursor: pointer; text-align: left; display: block;
  transition: box-shadow .14s ease, filter .14s ease;
}
.ev:hover { box-shadow: var(--shadow); filter: brightness(1.07); }
.ev b { font-weight: 600; display: block; }
.ev small { display: block; opacity: .92; font-size: 11px; font-family: var(--f-mono); }
.ev.is-short { padding: 2px 7px; }
.ev.is-short b, .ev.is-short small { display: inline; font-size: 11px; }
.ev.is-short small { margin-left: 6px; }

.ev--wait   { background: #C07A18; }        /* chờ thanh toán — cần làm gì đó */
.ev--ok     { background: var(--ok); }
.ev--done   { background: var(--navy-2); }
.ev--cancel { background: #A9B2BC; text-decoration: line-through; opacity: .6; }
.ev--event  { background: #6B4E9E; }

.ev.is-hit { outline: 3px solid var(--gold); outline-offset: 1px; z-index: 6; }

.nowline { position: absolute; left: 0; right: 0; height: 0; z-index: 4; pointer-events: none; }
.nowline::before {
  content: ""; position: absolute; left: -5px; top: -5px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--bad);
}
.nowline::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  border-top: 2px solid var(--bad);
}

/* ============================================================
   XEM THÁNG
   ============================================================ */
.month { display: grid; grid-template-rows: auto 1fr; height: 100%; min-height: 540px; }
.month-head {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; background: var(--white); z-index: 4;
}
.month-head div {
  padding: 9px 4px; text-align: center;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.month-body {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, 1fr);
}
.mcell {
  border-right: 1px solid var(--paper-2);
  border-bottom: 1px solid var(--paper-2);
  padding: 4px 6px 6px; min-width: 0; overflow: hidden;
}
.mcell:nth-child(7n) { border-right: 0; }
.mcell.is-out { background: var(--paper-2); }
.mcell.is-out .mcell__num { color: #B7B0A2; }
.mcell__num {
  width: 26px; height: 26px; margin: 2px auto 5px;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 12px; color: var(--ink); border-radius: 50%;
}
.mcell.is-today .mcell__num { background: var(--navy); color: var(--paper); font-weight: 700; }
.mchip {
  display: flex; align-items: center; gap: 5px;
  width: 100%; border: 0; border-radius: var(--r-sm);
  padding: 2px 6px; margin-bottom: 2px;
  font-family: var(--f-body); font-size: 11.5px; text-align: left;
  background: transparent; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mchip:hover { background: var(--frost); }
.mchip i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.mchip time { font-family: var(--f-mono); color: var(--muted); font-size: 10.5px; }
.mchip.is-cancel { text-decoration: line-through; color: var(--muted); }
.mchip.is-hit { background: var(--frost-2); outline: 2px solid var(--gold); }
.mmore {
  border: 0; background: transparent; color: var(--blue);
  font-size: 11.5px; padding: 1px 6px; border-radius: var(--r-sm);
}
.mmore:hover { background: var(--frost); }

/* ============================================================
   THẺ CHI TIẾT
   ============================================================ */
.pop-back { position: fixed; inset: 0; z-index: 60; background: transparent; }
.pop {
  position: fixed; z-index: 61;
  width: min(374px, calc(100vw - 24px));
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.pop::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft), var(--gold));
}
.pop__top { display: flex; align-items: flex-start; gap: 10px; padding: 17px 12px 8px 18px; }
.pop__dot { flex: none; width: 13px; height: 13px; border-radius: 3px; margin-top: 6px; }
.pop__ttl { flex: 1; min-width: 0; }
.pop__ttl h2 { font-size: 21px; margin-bottom: 3px; }
.pop__ttl p { margin: 0; font-size: 12.5px; color: var(--muted); }
.pop__x {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 17px; line-height: 1;
}
.pop__x:hover { background: var(--frost-2); color: var(--navy); }

.pop__rows { padding: 6px 18px 4px; display: grid; gap: 9px; }
.pop__row { display: flex; gap: 12px; font-size: 13.5px; color: var(--ink); }
.pop__row i { flex: none; width: 18px; text-align: center; color: var(--muted); font-style: normal; }
.pop__row span { min-width: 0; overflow-wrap: anywhere; }
.pop__row a { color: var(--blue); text-decoration: none; }
.pop__row a:hover { text-decoration: underline; }
.pop__row code { font-family: var(--f-mono); font-size: 12.5px; }

.pop__state {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
}
.st-wait   { background: var(--warn-bg); color: var(--warn); }
.st-ok     { background: var(--ok-bg);   color: var(--ok); }
.st-done   { background: var(--frost-2); color: var(--navy-2); }
.st-cancel { background: var(--bad-bg);  color: var(--bad); }

.pop__acts {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 13px 18px 16px; margin-top: 4px;
  border-top: 1px solid var(--hairline);
}
.pop-btn {
  height: 34px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--white);
  color: var(--blue); font-size: 13px; font-weight: 600;
}
.pop-btn:hover { background: var(--frost); border-color: var(--hairline-b); }
.pop-btn--danger { color: var(--bad); }
.pop-btn--danger:hover { background: var(--bad-bg); border-color: #E8C4C1; }
.pop-btn[disabled] { opacity: .45; cursor: default; background: var(--white); }

/* ============================================================
   TRẠNG THÁI TRANG
   ============================================================ */
.banner {
  display: none; flex: none;
  padding: 10px 16px; font-size: 13.5px;
  background: var(--bad-bg); color: #8C2F28;
  border-bottom: 1px solid #E8C4C1;
}
.banner.is-on { display: block; }

.loading {
  position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 30;
  background: var(--frost-2); overflow: hidden; display: none;
}
.loading.is-on { display: block; }
.loading::after {
  content: ""; position: absolute; left: -40%; top: 0; bottom: 0; width: 40%;
  background: var(--gold);
  animation: slide 1.1s infinite ease-in-out;
}
@keyframes slide { to { left: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .loading::after { animation: none; left: 0; width: 100%; }
}

/* ============================================================
   MÀN HÌNH HẸP
   ============================================================ */
@media (max-width: 1100px) {
  :root { --side-w: 250px; }
  .search { width: min(220px, 26vw); }
}

@media (max-width: 900px) {
  /* Cột bên chuyển lên trên, cuộn chung với trang thay vì chiếm ngang */
  .body { flex-direction: column; }
  .side {
    width: auto; max-height: 46vh;
    border-right: 0; border-bottom: 1px solid var(--hairline);
    padding: 12px 12px 14px;
  }
  .cal { min-height: 340px; }
}

@media (max-width: 820px) {
  :root { --gutter: 46px; --head-h: 58px; }
  .tb-brand small { display: none; }
  .tb-title { font-size: 16px; margin: 0 2px; }
  .tb-btn { padding: 0 12px; font-size: 13px; }
  .tb-views button { padding: 0 12px; font-size: 13px; }
  .gh-num { width: 34px; height: 34px; font-size: 19px; }
  .topbar { padding: 0 8px; gap: 5px; }
  .search { width: 150px; }
}

@media (max-width: 620px) {
  /* Trên điện thoại thanh trên cần 511px cho đủ nút — không cách nào
     nhét vừa 360px trên một hàng. Cho nó XUỐNG HAI HÀNG thay vì cắt bớt
     chức năng: ô tìm kiếm chiếm trọn hàng dưới, hàng trên giữ điều
     hướng và bộ chuyển chế độ xem. Ép một hàng thì hoặc tràn ngang,
     hoặc phải bỏ mất một tính năng nhân viên cần. */
  .topbar {
    height: auto; min-height: var(--head-h);
    flex-wrap: wrap; row-gap: 8px;
    padding: 9px 8px;
  }
  .tb-brand, .tb-title, .tb-spacer, #btn-out { display: none; }
  .search { order: 10; width: 100%; }
  .sresults { left: 0; right: 0; width: auto; }
  .tb-nav { width: 32px; height: 32px; font-size: 17px; }
  .tb-btn { padding: 0 12px; font-size: 12.5px; }
  .tb-views { margin-left: auto; }
  .tb-views button { padding: 0 12px; font-size: 12.5px; }
  .mcell { padding: 2px 3px 4px; }
  .mchip time { display: none; }
  .side { max-height: 40vh; }
}

@media (max-width: 380px) {
  .tb-views button { padding: 0 9px; font-size: 12px; }
  .tb-btn { padding: 0 9px; font-size: 12px; }
}