/* Thiên Cơ Các — màn hình Lập lá số
   Kích thước desktop bám theo ảnh thiết kế 1536×1024 (khung ứng dụng rộng 1200px, cột trái 294px). */

/* ---------- Phông chữ ----------
   Tinos (SIL OFL, assets/fonts/LICENSE-Tinos.txt): cùng hình dáng, cùng số đo với Times New Roman của thiết kế
   nhưng nhúng sẵn nên mọi máy (Windows, Mac, Android, Linux) hiển thị giống nhau, đủ dấu tiếng Việt. */
@font-face { font-family: 'Tinos'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/tinos-vietnamese-400-normal.woff2') format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Tinos'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/tinos-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Tinos'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/tinos-vietnamese-400-italic.woff2') format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Tinos'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/tinos-latin-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Tinos'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/tinos-vietnamese-700-normal.woff2') format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Tinos'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/tinos-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Tinos'; font-style: italic; font-weight: 700; font-display: swap; src: url('../assets/fonts/tinos-vietnamese-700-italic.woff2') format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Tinos'; font-style: italic; font-weight: 700; font-display: swap; src: url('../assets/fonts/tinos-latin-700-italic.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- Biến ---------- */
:root {
  --ink: #161710;
  --ink-soft: #5c4934;
  --muted: #705637;
  --paper: #f5ecd7;
  --paper-light: #fffaf0;
  --line: #b89c78;
  --line-soft: #dfceb0;
  --gold: #c5a272;
  --gold-text: #f6d58b;
  --cream: #f4e1b9;
  --red: #9f1008;
  --red-bright: #af1709;
  --green: #19472d;
  --night: #0c0e0c;
  --night-2: #11120f;
  --focus: #b8792c;
  --serif: 'Tinos', 'Times New Roman', Times, 'Liberation Serif', serif;
  --corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23c4a26d' stroke-width='1'%3E%3Cpath d='M1.5 17V1.5H17M4.5 13V4.5H13M4.5 9h4V4.5'/%3E%3C/svg%3E");
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e4324' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 16px/1.3 var(--serif);
  -webkit-text-size-adjust: 100%;
}

img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a, button, input, select, summary { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }

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

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-small { width: 14px; height: 14px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}
.skip-link:focus { top: 12px; }

/* Tranh vẽ trên giấy: ảnh đã được chia theo màu giấy nên nhân (multiply) với nền là hòa vào. */
.paper-art { position: absolute; pointer-events: none; mix-blend-mode: multiply; }

.link-button {
  color: #70502e;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Khung ứng dụng ----------
   Thanh trên và cột trái trải hết màn hình; nội dung vùng giấy giữ độ rộng như thiết kế, căn trái. */
.app-shell {
  --sidebar-width: 294px;
  --content-width: 1000px;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: 80px auto;
  min-height: 100vh;
}

/* ---------- Thanh trên ---------- */
.topbar {
  grid-column: 1 / -1;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  background: linear-gradient(115deg, var(--night-2), #070907);
  color: #f8e8c6;
}


.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(var(--sidebar-width) - 20px);
  flex-shrink: 0;
  color: var(--gold-text);
  font-size: 30px;
  line-height: 1.1;
  white-space: nowrap;
}
.brand-seal { width: 38px; height: 48px; }
.brand-name small {
  display: block;
  margin-top: 5px;
  color: #f7e8c4;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
}

.top-nav {
  display: flex;
  flex: 1;
  max-width: calc(var(--content-width) - 220px);
  align-self: stretch;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.top-nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 5px;
  font-size: 15px;
  white-space: nowrap;
}
.top-nav a:hover { color: var(--gold-text); }
.top-nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  height: 2px;
  background: #b90b08;
}

.account { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-left: 12px; }
.icon-button { display: grid; place-items: center; padding: 4px; color: #d6bd8e; }
.menu-button { display: none; }
.profile { display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.profile-avatar {
  width: 38px;
  height: 38px;
  border: 1px solid #bea577;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
}

/* ---------- Cột trái ---------- */
.sidebar {
  border-right: 1px solid #bda57a;
  background: radial-gradient(ellipse at 30% 50%, #191b17, #0b0d0b 75%);
  color: var(--cream);
}
.sidebar-inner {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #4a4232 transparent;
}
.sidebar-landscape { width: 100%; height: auto; aspect-ratio: 294 / 296; object-fit: cover; }

.sage { padding: 10px 16px 9px; }
.sage-heading { display: flex; align-items: center; gap: 17px; }
.sage-avatar {
  width: 105px;
  height: 113px;
  border: 1px solid #bea577;
  border-radius: 50%;
  object-fit: cover;
}
.sage h2 { margin-bottom: 8px; color: #f7d58c; font-size: 25px; font-weight: 400; line-height: 1.12; }
.sage-heading p { font-size: 14px; }

.sage-quote { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin: 10px 4px 16px 9px; }
.sage-quote blockquote { margin: 0; color: #f8df9c; font-size: 15px; font-style: italic; font-weight: 700; line-height: 1.35; }
.sage-quote img { width: 30px; height: auto; margin-bottom: -4px; }

.sage-note { display: flex; gap: 12px; padding: 12px; border: 1px solid #76613e; border-radius: 8px; }
.sage-note .icon { width: 28px; height: 34px; color: #dab777; }
.sage-note-title { color: #e4c37e; font-size: 12px; text-transform: uppercase; }
.sage-note p + p { margin-top: 6px; font-size: 13px; font-style: italic; line-height: 1.3; }

.side-nav { display: flex; flex-direction: column; border-top: 1px solid #302e23; }
.side-nav a {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 8px 18px 8px 23px;
  border-left: 5px solid transparent;
  color: #f4e0b5;
  font-size: 15px;
}
.side-nav a:hover { background: #ffffff0a; }
.side-nav .icon { width: 19px; height: 19px; }
.side-nav .chevron { width: 14px; height: 14px; margin-left: auto; color: #9e8151; }
.side-nav a[aria-current='page'] { border-left-color: #d6160c; background: linear-gradient(90deg, #9e1b09, #41170f); }

.membership { margin: 12px 14px 18px; padding: 13px 14px; border: 1px solid #75603e; border-radius: 7px; font-size: 12px; }
.membership-row { display: flex; align-items: center; justify-content: space-between; }
.membership-label { text-transform: uppercase; letter-spacing: .5px; }
.membership-tier { font-size: 14px; }
.membership-tier i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #25824b; }
.membership-expiry { margin: 9px 0 12px; color: #b7ad91; line-height: 1.4; }
.membership-expiry .chevron { width: 13px; height: 13px; }
.membership-button {
  display: block;
  width: 100%;
  padding: 9px;
  border-radius: 4px;
  background: #1b4b32;
  color: #fff8df;
  font-size: 15px;
  text-align: center;
}
.membership-button:hover { background: #22593c; }

.drawer-backdrop { display: none; }

/* ---------- Vùng chính ---------- */
main {
  position: relative;
  isolation: isolate;
  min-width: 0;
  background-color: var(--paper);
}
main::before,
main::after,
.paper-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
main::before { z-index: -1; background: url('../assets/paper.svg') 0 0 / 150px; opacity: .85; }
main::after {
  z-index: -2;
  background:
    radial-gradient(ellipse at 60% 8%, #fffaf080, transparent 65%),
    linear-gradient(105deg, #e0c49622, transparent 40%, #ddc08c22);
}

.mobile-banner { display: none; }

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 180px;
  padding: 30px 48px 26px;
  border-bottom: 1px solid #d2bc94;
}
.hero-eyebrow { margin-bottom: 10px; color: #ac1b0d; }
.hero h1 { margin-bottom: 8px; font-size: 50px; font-weight: 500; line-height: 1.05; }
.hero-lead { font-size: 17px; }
.hero-art { right: 12px; top: 9px; width: 211px; height: auto; }

.main-content { max-width: var(--content-width); padding: 21px 29px 16px 35px; }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.73fr) minmax(0, 1fr);
  gap: 23px;
  align-items: stretch;
}

/* ---------- Thẻ giấy ---------- */
.paper-card {
  position: relative;
  isolation: isolate;
  border: 1px solid #bd965d;
  border-radius: 10px;
  /* Nền đục để tranh multiply bên trong thẻ có màu giấy để hòa vào. */
  background: linear-gradient(130deg, #fffcf047, #f4e9d388), var(--paper);
  box-shadow: 0 3px 3px #8b65251f, inset 0 0 0 4px #fff7e44d;
}
.paper-card::before { z-index: -1; border-radius: inherit; background: url('../assets/paper.svg') 0 0 / 150px; opacity: .5; }

.corner { position: absolute; width: 18px; height: 18px; background: var(--corner) no-repeat; opacity: .8; pointer-events: none; }
.corner-tl { top: 6px; left: 6px; }
.corner-tr { top: 6px; right: 6px; transform: scaleX(-1); }
.corner-bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.corner-br { bottom: 6px; right: 6px; transform: scale(-1); }

/* ---------- Biểu mẫu ---------- */
.form-card { padding: 23px 32px 24px; }
.lotus { right: 1px; bottom: 4px; width: 76px; height: auto; z-index: -1; }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.field-label { display: block; padding: 0; font-size: 17px; }

input:not([type='radio'], [type='checkbox']),
select {
  width: 100%;
  height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background-color: #fffaf047;
  box-shadow: inset 0 1px 2px #fff8;
  color: var(--ink);
}
input::placeholder { color: #8c7558; }
input:not([type='radio'], [type='checkbox']):hover,
select:hover { border-color: #9c7e55; }

select {
  appearance: none;
  padding-right: 34px;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

.name-field { position: relative; margin-top: 6px; }
.name-field input { padding-right: 42px; font-size: 17px; }
.name-field .icon { position: absolute; right: 11px; top: 10px; color: #5e4324; }

.split { display: grid; grid-template-columns: 1fr 1.12fr; gap: 20px; margin: 19px 0 20px; }
.split fieldset + fieldset { padding-left: 26px; border-left: 1px solid var(--line-soft); }
.split legend { margin-bottom: 8px; }

.segmented { display: flex; gap: 5px; }
.segmented label { position: relative; flex: 1; font-size: 15px; }
.segmented input,
.hours input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 39px;
  padding: 0 9px;
  border: 1px solid #b69971;
  border-radius: 5px;
  white-space: nowrap;
  cursor: pointer;
}
.segmented span:hover,
.hours span:hover { border-color: #8d6c42; background: #fffaf060; }
.segmented input:checked + span,
.hours input:checked + span {
  border-color: #a92213;
  background: linear-gradient(140deg, var(--red-bright), #8d1009);
  box-shadow: inset 0 1px 4px #b04120;
  color: #fff5db;
}
.calendar-choice input:checked + span {
  border-color: #214426;
  background: linear-gradient(140deg, var(--green), #12351c);
  box-shadow: inset 0 1px 3px #3d6740;
}
.segmented input:focus-visible + span,
.hours input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.date-select { display: grid; grid-template-columns: .9fr 1fr 1.1fr; gap: 16px; margin-top: 7px; }
.date-select select { height: 39px; }
.leap-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--red); font-size: 15px; cursor: pointer; }
.leap-toggle[hidden] { display: none; }
input[type='checkbox'] { width: 16px; height: 16px; margin: 0; accent-color: var(--red); }

.hour-fieldset { margin-top: 17px; }
.hour-fieldset legend { float: left; margin-bottom: 9px; }
.unknown-hour { float: right; margin-top: 3px; }
.hours { clear: both; }
.unknown-hour[aria-pressed='true'] { color: var(--red); font-weight: 700; }

.hours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.hours label { position: relative; min-width: 0; }
.hours span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 57px;
  border: 1px solid #b99d79;
  border-radius: 5px;
  font-size: 17px;
  cursor: pointer;
}
.hours small { color: var(--ink-soft); font-size: 14px; }
.hours input:checked + span small { color: #ffe7b8; }

.location { margin-top: 16px; border: 1px solid #cbb28a; border-radius: 5px; }
.location summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 8px 14px;
  font-size: 14px;
  list-style: none;
  cursor: pointer;
}
.location summary::-webkit-details-marker { display: none; }
.location summary .icon { width: 20px; height: 20px; color: #5e4324; }
.location summary small {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid #e6d1b0;
  border-radius: 4px;
  background: #f7e9cd;
  color: #82623d;
  font-size: 11px;
  white-space: nowrap;
}
.location .chevron { width: 18px; height: 18px; transition: transform .2s; }
.location[open] .chevron { transform: rotate(180deg); }
.location-body { padding: 0 14px 14px; }
.location-body .field-label { margin: 4px 0 6px; font-size: 15px; }
.location-body .check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 15px; cursor: pointer; }
.location-body p { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.4; }

.form-error { margin: 10px 0 0; color: #a4180b; font-size: 14px; }
.form-error:empty { display: none; }

.primary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 5px;
  background: linear-gradient(105deg, #a6170b, #900e08);
  color: #fff3d9;
  font-size: 19px;
}
.primary-button:hover { filter: brightness(1.12); }
.primary-button .icon { width: 24px; height: 24px; }
.form-card .primary-button { margin-top: 16px; }

/* ---------- Xem trước ---------- */
.preview { padding: 24px 27px; overflow: hidden; }
.cloud-top { right: 7px; top: 3px; width: 164px; height: auto; z-index: -1; }
.compass { right: 7px; top: 79px; width: 130px; height: auto; z-index: -1; }
.cloud-bottom { left: 7px; bottom: 8px; width: calc(100% - 14px); height: auto; z-index: -1; }

.preview h2 { margin-bottom: 17px; color: #614b2e; font-size: 14px; font-weight: 400; letter-spacing: .8px; text-transform: uppercase; }
.preview h3 { margin-bottom: 8px; font-size: 16px; font-weight: 500; }

.pillars { margin: 0; padding: 0; list-style: none; }
.pillars li { display: flex; align-items: center; gap: 12px; margin: 10px 0; font-size: 16px; }
.pillars i { width: 12px; height: 12px; border-radius: 50%; background: #92928a; }
/* Màu chấm theo ngũ hành của thiên can. */
.pillars [data-hanh='kim'] i { background: #92928a; }
.pillars [data-hanh='thuy'] i { background: #194e64; }
.pillars [data-hanh='moc'] i { background: #21603d; }
.pillars [data-hanh='hoa'] i { background: #a3321f; }
.pillars [data-hanh='tho'] i { background: #a07020; }

.preview-details {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 9px 10px;
  margin: 0 0 20px;
  padding-top: 18px;
  border-top: 1px solid #c2a77a;
  font-size: 15px;
}
.preview-body > div { margin-bottom: 24px; }
.preview-details dd { margin: 0; overflow-wrap: anywhere; }
.preview-details dd small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }

.chart { display: block; width: 100%; height: auto; }
.chart-frame rect,
.chart-grid,
.chart-center { fill: none; stroke: #c2a576; }
.chart-frame rect:first-child { stroke-width: 1.4; }
.chart-grid,
.chart-center { stroke-width: 1.2; }
.chart-knots { fill: none; stroke: #c9ad80; stroke-width: .8; }

/* ---------- Gợi ý ---------- */
.tip {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: 23px;
  padding: 14px 17px 13px;
  border: 1px solid #d0b17b;
  border-radius: 7px;
  background: #ecdcb52e;
}
.tip-icon { position: static; width: 34px; height: auto; }
.tip-text { flex: 1; }
.tip h3 { margin-bottom: 6px; font-size: 16px; font-weight: 500; }
.tip p { font-size: 13px; font-style: italic; line-height: 1.4; }
.tip-button { display: flex; align-items: center; gap: 8px; color: #a12712; text-decoration: none; white-space: nowrap; }
.tip-button .icon { width: 16px; height: 16px; }
.tip-button:hover { text-decoration: underline; }

/* ---------- Cột phụ ----------
   Dưới 1600px: các thẻ xếp lưới bên dưới nội dung chính. Từ 1600px: thành cột 300px bên phải. */
.rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
  gap: 18px;
  max-width: var(--content-width);
  padding: 8px 29px 28px 35px;
}
[data-membership='member'] .promo[data-for='guest'],
[data-membership='guest'] .promo[data-for='member'] { display: none; }

.rail-card { padding: 20px 22px 22px; }
.rail-title { margin-bottom: 12px; color: #614b2e; font-size: 14px; font-weight: 400; letter-spacing: .8px; text-transform: uppercase; }
.rail-subtitle { margin-bottom: 8px; font-size: 15px; font-weight: 500; }

.today-solar { font-size: 18px; }
.today-lunar { margin-top: 4px; color: #ac1b0d; font-size: 15px; }
.today-canchi {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 5px 10px;
  margin: 14px 0 16px;
  padding: 12px 0;
  border-block: 1px solid var(--line-soft);
  font-size: 15px;
}
.today-canchi dt { color: var(--muted); }
.today-canchi dd { margin: 0; }

.good-hours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.good-hours li { padding: 5px 2px; border: 1px solid #cbb28a; border-radius: 5px; font-size: 15px; text-align: center; }
.good-hours small { display: block; color: var(--ink-soft); font-size: 12px; }
.good-hours .is-now { border-color: #a92213; background: #a3321f14; color: var(--red); }
.good-hours .is-now small { color: var(--red); }

.recent-list { margin: 0; padding: 0; list-style: none; }
.recent-list li { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line-soft); }
.recent-list li:last-child { border-bottom: 0; }
.recent-open { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 0; text-align: left; }
.recent-name { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.recent-meta { color: var(--muted); font-size: 13px; }
.recent-open:hover .recent-name { color: var(--red); }
.recent-remove { width: 32px; height: 32px; flex-shrink: 0; border-radius: 4px; color: var(--muted); font-size: 20px; }
.recent-remove:hover { background: #a3321f14; color: var(--red); }
.recent-empty { color: var(--muted); font-size: 14px; font-style: italic; line-height: 1.45; }

.promo {
  border: 1px solid #75603e;
  border-radius: 10px;
  background: radial-gradient(ellipse at 30% 30%, #191b17, #0b0d0b 80%);
  color: var(--cream);
}
.promo-avatar {
  float: right;
  width: 64px;
  height: 64px;
  margin: 0 0 8px 10px;
  border: 1px solid #bea577;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
}
.promo-title { margin: 4px 0 8px; color: #f7d58c; font-size: 22px; font-weight: 400; line-height: 1.15; }
.promo p { font-size: 14px; font-style: italic; line-height: 1.4; }
.promo-list { clear: both; margin: 12px 0 16px; padding: 0; list-style: none; font-size: 14px; }
.promo-list li { position: relative; padding: 3px 0 3px 18px; }
.promo-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 6px;
  height: 6px;
  background: #dab777;
  transform: rotate(45deg);
}
.promo-button {
  display: block;
  padding: 10px;
  border-radius: 4px;
  background: #1b4b32;
  color: #fff8df;
  font-size: 15px;
  text-align: center;
}
.promo-button:hover { background: #22593c; }

/* ---------- Trang lá số ----------
   Bố cục học từ tuvi.boitinhyeu.vn: lá số vuông bên trái, thẻ chi tiết cung + chủ đề luận giải bên phải;
   rê/chạm một cung → tô tam hợp (vàng), xung chiếu (đỏ), làm mờ cung khác và vẽ mũi tên nối. */
:root {
  --hanh-kim: #6c7177;
  --hanh-moc: #1d7a44;
  --hanh-thuy: #1d5ea6;
  --hanh-hoa: #c0291c;
  --hanh-tho: #9a6a0f;
  --hop: #a4752c;
  --xung: #b0261a;
}

.chart-status { margin-bottom: 16px; color: var(--muted); font-size: 16px; }
.chart-status:empty { display: none; }

.chart-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: 18px;
  padding: 11px 16px;
  border: 1px solid #d0b17b;
  border-radius: 7px;
  background: #ecdcb52e;
}
.chart-summary[hidden] { display: none; }
.chart-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: 15px; }
.chart-facts div { display: flex; gap: 6px; }
.chart-facts dt { color: var(--muted); }
.chart-facts dt::after { content: ':'; }
.chart-facts dd { margin: 0; color: #8d1b0e; font-weight: 600; }
.chart-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }

.chart-layout { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(290px, 1fr); gap: 22px; align-items: start; }
.chart-layout[hidden] { display: none; }

/* Lưới 12 cung: khe 2px để lộ nền vàng thành đường kẻ. */
.board-wrap { position: relative; }
.chart-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border: 3px double #b8955e;
  border-radius: 4px;
  background: #d9c29a;
}
.cung[data-chi='Tỵ'] { grid-area: 1 / 1; }
.cung[data-chi='Ngọ'] { grid-area: 1 / 2; }
.cung[data-chi='Mùi'] { grid-area: 1 / 3; }
.cung[data-chi='Thân'] { grid-area: 1 / 4; }
.cung[data-chi='Thìn'] { grid-area: 2 / 1; }
.cung[data-chi='Dậu'] { grid-area: 2 / 4; }
.cung[data-chi='Mão'] { grid-area: 3 / 1; }
.cung[data-chi='Tuất'] { grid-area: 3 / 4; }
.cung[data-chi='Dần'] { grid-area: 4 / 1; }
.cung[data-chi='Sửu'] { grid-area: 4 / 2; }
.cung[data-chi='Tý'] { grid-area: 4 / 3; }
.cung[data-chi='Hợi'] { grid-area: 4 / 4; }

.cung {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  aspect-ratio: 1;
  padding: 6px 7px 5px;
  background: #faf3e2;
  font-size: 12px;
  line-height: 1.28;
  cursor: pointer;
  transition: opacity .15s, background-color .15s, box-shadow .15s;
  user-select: none;
}
.cung:hover { background: #fffaf0; }
.cung:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cung.is-menh { background: #fbeee4; }
.cung-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; margin-bottom: 3px; }
.cung-chi { flex-shrink: 0; color: var(--muted); font-size: 11px; }
.cung-ten { overflow: hidden; color: #6b4a22; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.is-menh .cung-ten { color: var(--red); }
.than-tag { margin-left: 4px; padding: 0 3px; border: 1px solid var(--red); border-radius: 3px; color: var(--red); font-size: .82em; vertical-align: 1px; }
.cung-marks { margin-bottom: 2px; color: #5b3f8a; font-size: 10px; }
.cung-chinh .sao { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.cung-phu { margin-top: 3px; }
.cung-phu .sao { font-size: 11px; line-height: 1.32; }
.cung-than-sao { margin-top: 3px; padding-top: 3px; border-top: 1px solid #d9c29a; color: #5b3f8a; font-size: 10px; }
.cung-foot { display: flex; justify-content: space-between; margin-top: auto; padding-top: 3px; color: var(--muted); font-size: 10px; }
.cung-daihan { color: #6b4a22; font-weight: 700; }
.vo-chinh-dieu { color: var(--muted); font-style: italic; }

.sao[data-hanh='kim'], .hanh-legend [data-hanh='kim'] { --c: var(--hanh-kim); }
.sao[data-hanh='moc'], .hanh-legend [data-hanh='moc'] { --c: var(--hanh-moc); }
.sao[data-hanh='thuy'], .hanh-legend [data-hanh='thuy'] { --c: var(--hanh-thuy); }
.sao[data-hanh='hoa'], .hanh-legend [data-hanh='hoa'] { --c: var(--hanh-hoa); }
.sao[data-hanh='tho'], .hanh-legend [data-hanh='tho'] { --c: var(--hanh-tho); }
.sao { color: var(--c, var(--ink-soft)); }
.do-sang { margin-left: 2px; color: var(--muted); font-size: .78em; font-weight: 400; text-decoration: none; }
.hoa { margin-left: 3px; padding: 0 3px; border: 1px solid var(--red); border-radius: 3px; color: var(--red); font-size: 9px; font-weight: 600; vertical-align: 1px; }

/* Trạng thái tam hợp / xung chiếu */
.cung.is-dim { opacity: .38; }
.cung.is-selected { box-shadow: inset 0 0 0 1px #8d5b2a; }
.cung.is-active { z-index: 1; background: #fffaf0; box-shadow: inset 0 0 0 2px var(--hop), 0 0 16px #a4752c66; }
.cung.is-tamhop { background: #fbf0d6; box-shadow: inset 0 0 0 2px var(--hop); }
.cung.is-xung { background: #fbe7df; box-shadow: inset 0 0 0 2px var(--xung); }
.cung.is-tamhop::after, .cung.is-xung::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  padding: 0 6px;
  border-radius: 3px 3px 0 0;
  color: #fff8e6;
  font-size: 9px;
  letter-spacing: 1px;
  transform: translateX(-50%);
}
.cung.is-tamhop::after { content: 'HỢP'; background: var(--hop); }
.cung.is-xung::after { content: 'XUNG'; background: var(--xung); }

.board-lines { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.line-hop, .line-xung { fill: none; stroke-width: 1.6; stroke-linecap: round; animation: line-in .25s ease-out; }
.line-hop { stroke: var(--hop); stroke-opacity: .85; }
.line-hop-base { stroke-opacity: .4; stroke-dasharray: none; }
.line-xung { stroke: var(--xung); stroke-opacity: .85; stroke-dasharray: 7 5; }
#arrow-hop path { fill: var(--hop); }
#arrow-xung path { fill: var(--xung); }
@keyframes line-in { from { opacity: 0; } }

.thien-ban {
  grid-area: 2 / 2 / 4 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background: #f6ecd5 url('../assets/img/compass.webp') center / 62% no-repeat;
  background-blend-mode: multiply;
  text-align: center;
}
.thien-ban-eyebrow { color: #8d5b2a; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.thien-ban-name { font-size: 21px; font-weight: 600; line-height: 1.2; }
.thien-ban-info { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 2px 0 0; font-size: 12.5px; text-align: left; }
.thien-ban-info dt { color: var(--muted); }
.thien-ban-info dd { margin: 0; }
.thien-ban-tutru { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 14px; margin: 4px 0 0; padding: 6px 0 0; border-top: 1px solid #c2a77a; list-style: none; font-size: 12.5px; font-weight: 600; }
.thien-ban-tutru small { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
.thien-ban-warning { color: var(--red); font-size: 11px; line-height: 1.35; }

.board-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 10px; }
.board-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 13px; }
.legend-hop { color: #8d5b2a; font-weight: 600; }
.legend-xung { color: var(--xung); font-weight: 600; }
.board-toggles { display: flex; gap: 6px; }
.chip-toggle { padding: 4px 12px; border: 1px solid #b69971; border-radius: 999px; color: #6b4a22; font-size: 13px; }
.chip-toggle:hover { background: #fffaf060; }
.chip-toggle[aria-pressed='true'] { border-color: #8d5b2a; background: #8d5b2a; color: #fff8e6; }
.hanh-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; }
.hanh-legend li { color: var(--c); }
.hanh-legend li::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--c); }

/* Cột phải */
.chart-aside { position: sticky; top: 16px; display: grid; gap: 18px; }
.cung-detail { padding: 18px 20px; }
.cung-detail.is-menh { border-color: var(--red); }
.detail-head { display: flex; justify-content: space-between; gap: 12px; }
.detail-chi { color: var(--muted); font-size: 13px; }
.detail-ten { margin: 2px 0; color: #6b4a22; font-size: 26px; font-weight: 600; letter-spacing: .5px; }
.detail-ten.is-menh { color: var(--red); }
.detail-flags { color: var(--red); font-size: 13px; }
.detail-daihan { flex-shrink: 0; text-align: right; }
.detail-daihan small { display: block; color: var(--muted); font-size: 12px; }
.detail-daihan strong { color: #6b4a22; font-size: 18px; }
.detail-marks { color: #5b3f8a !important; }
.detail-rel { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 4px; font-size: 13px; }
.detail-label { margin: 14px 0 6px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.detail-chinh { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.detail-chinh .sao { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; }
.do-sang-chip { margin-left: auto; padding: 1px 8px; border-radius: 3px; background: #efe2c4; color: #6b4a22; font-size: 11px; font-weight: 400; }
.detail-phu { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 14px; }
.detail-than { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 13px; }
.detail-than dt { color: var(--muted); }
.detail-than dd { margin: 0; color: #5b3f8a; }

.topics { padding: 18px 20px; }
.topics-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.topics h2 { font-size: 19px; font-weight: 500; }
.reading-avatar { width: 56px; height: 56px; flex-shrink: 0; border: 1px solid #bea577; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.ai-quota { color: var(--muted); font-size: 13px; }
.ai-quota:empty { display: none; }
.topic-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.topic {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 10px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #cbb28a;
  border-radius: 7px;
  text-align: left;
}
.topic:hover { border-color: #8d6c42; background: #fffaf060; }
.topic strong { font-size: 16px; font-weight: 600; }
.topic span { grid-column: 1; color: var(--muted); font-size: 13px; line-height: 1.35; }
.topic-status { grid-column: 2; grid-row: 1 / 3; padding: 2px 8px; border: 1px solid #b69971; border-radius: 999px; color: #6b4a22; font-size: 12px; font-style: normal; white-space: nowrap; }
.topic.is-done .topic-status { border-color: #1d7a44; color: #1d7a44; }
.reading-note { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12.5px; font-style: italic; }

/* Nút hỏi Tiên Sinh, nút luận giải cung */
.chat-open {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 7px;
  background: linear-gradient(105deg, #a6170b, #900e08);
  color: #fff3d9;
  text-align: left;
}
.chat-open:hover { filter: brightness(1.12); }
.chat-open img { width: 40px; height: 40px; border: 1px solid #f0cf8a; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.chat-open strong { display: block; font-size: 16px; font-weight: 600; }
.chat-open small { color: #f5dcb4; font-size: 13px; }
.detail-reading { display: inline-block; margin-top: 14px; color: #8d1b0e; font-size: 14px; font-weight: 600; text-decoration: none; }
.detail-reading:hover { text-decoration: underline; }

/* Trò chuyện giải quẻ */
.chat { margin-top: 18px; padding-top: 14px; border-top: 1px solid #d9c29a; }
.chat[hidden] { display: none; }
.chat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.chat-head h3 { color: #6b4a22; font-size: 17px; font-weight: 600; }
.chat-quota { color: var(--muted); font-size: 12.5px; }
.chat-feed { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; min-height: 40px; overflow-y: auto; padding: 2px 2px 6px; }
.bubble { max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: 15.5px; line-height: 1.55; }
.bubble p + p { margin-top: 6px; }
.bubble h3 { margin: 4px 0; font-size: 15.5px; font-weight: 700; }
.bubble ul { margin: 4px 0; padding-left: 18px; }
.bubble-nguoi-hoi { align-self: flex-end; border-bottom-right-radius: 4px; background: #e9d3a6; color: var(--ink); white-space: pre-wrap; }
.bubble-tien-sinh { align-self: flex-start; border: 1px solid #e0cba2; border-bottom-left-radius: 4px; background: #fffaf0; }
.bubble-seen { align-self: flex-end; color: var(--muted); font-size: 11.5px; }
.bubble-note { align-self: center; padding: 4px 12px; border-radius: 999px; background: #f6e2dc; color: var(--red); font-size: 13px; text-align: center; }
.bubble-typing { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hop); animation: dot-bounce 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot-bounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.suggest-chip { padding: 5px 12px; border: 1px solid #c9a96f; border-radius: 999px; color: #6b4a22; font-size: 13.5px; }
.suggest-chip:hover { background: #fbf0d6; }
.chat-form { display: flex; align-items: flex-end; gap: 8px; }
.chat-form textarea {
  flex: 1;
  min-height: 42px;
  max-height: 120px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fffaf0;
  color: var(--ink);
  font: inherit;
  font-size: 15.5px;
  line-height: 1.4;
  resize: none;
}
.chat-send {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--red-bright), #8d1009);
  color: #fff5db;
}
.chat-send .icon { width: 20px; height: 20px; }

/* Khóa chuyên sâu và thanh toán (học từ tuvi) */
.topic.is-locked .topic-status { border-color: #b8862f; background: #f7e9c9; color: #7a5317; }
.paywall { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 460px; margin: 6px auto; text-align: center; }
.paywall-icon { font-size: 34px; line-height: 1; }
.paywall-title { color: #6b4a22; font-size: 19px; font-weight: 700; }
.paywall .primary-button { max-width: none; margin-top: 4px; font-size: 16px; }
.paywall-note { color: var(--muted); font-size: 12.5px; }
.paywall-pay { max-width: 460px; margin: 0 auto; }

.pay { display: flex; flex-direction: column; gap: 12px; }
.pay-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pay-tab { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 1px solid #d9c29a; border-radius: 9px; background: #fffaf0; text-align: left; }
.pay-tab.is-active { border-color: #a4752c; background: #fbf0d6; }
.pay-tab-title { color: #6b4a22; font-size: 14px; font-weight: 700; }
.pay-tab-sub { color: var(--muted); font-size: 12px; }
.pay-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.pay-clock { color: #a4752c; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; font-weight: 700; }
.pay-clock.is-late { color: var(--red); }
.pay-qr { display: flex; justify-content: center; }
.pay-qr img { width: 180px; height: 180px; padding: 8px; border: 1px solid #e0cba2; border-radius: 12px; background: #fff; }
.pay-info { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid #e0cba2; border-radius: 10px; background: #fffaf0; }
.pay-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.pay-label { flex-shrink: 0; color: var(--muted); font-size: 13px; }
.pay-value-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pay-value { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pay-value.is-highlight { color: #8d1b0e; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .5px; }
.pay-copy { flex-shrink: 0; padding: 2px 8px; border-radius: 4px; background: #f3e3c0; color: #6b4a22; font-size: 12px; }
.pay-list-price { color: var(--muted); font-size: 13px; }
.pay-price { color: #1d7a44; font-size: 16px; }
.pay-warning { padding: 9px 12px; border: 1px solid #e3b25a; border-radius: 8px; background: #fdf1d8; color: #7a4d00; font-size: 13px; line-height: 1.45; }
.pay-wait { color: var(--muted); font-size: 12.5px; text-align: center; }
.pay-wait.is-loading { padding: 24px 0; animation: reading-pulse 1.6s ease-in-out infinite; }
.pay-box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; border: 1px solid #e0cba2; border-radius: 10px; background: #fffaf0; text-align: center; }
.pay-box.is-error { border-color: #e2a99d; }
.pay-note { color: var(--muted); font-size: 13px; }
.pay-syntax { color: #8d1b0e; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 26px; font-weight: 700; letter-spacing: 1px; }
.pay-sms-link { margin-top: 6px; font-size: 16px; text-decoration: none; }
.pay-secondary { padding: 5px 14px; border: 1px solid #c9a96f; border-radius: 999px; color: #6b4a22; font-size: 13px; }
.pay-sms-help { padding: 9px 12px; border-radius: 8px; background: #f3ead6; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.pay-faint { opacity: .75; }
.pay-resume { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.pay-cancel { align-self: center; color: var(--muted); font-size: 13px; text-decoration: underline; }
.pay-result { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 0; color: var(--muted); text-align: center; }
.pay-result-icon { font-size: 36px; line-height: 1; opacity: .6; }
.pay-result-icon.is-ok { color: #1d7a44; opacity: 1; }
.pay-result-title { color: var(--ink); font-size: 17px; font-weight: 700; }

.coffee-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; border: 1px dashed #c9a96f; border-radius: 12px; background: #fbf3e0; text-align: center; font-size: 14px; }
.coffee-button { padding: 10px; border-radius: 999px; background: linear-gradient(180deg, #d6aa52, #b8862f); color: #2a1d08; font-size: 15px; font-weight: 700; }
.coffee-button:disabled { opacity: .6; }

/* ---------- Bài viết SEO, trang thông tin, chân trang ---------- */
/* Thang chữ chung cho bài viết và trang thông tin: thân 17.5px; tiêu đề lớn nét thường như hero;
   tiêu đề mục đậm màu nâu; tiêu đề phụ đậm màu mực; nhãn nhỏ màu xám, không nghiêng. */
.seo-article, .info-article { color: var(--ink); font-size: 17.5px; line-height: 1.75; }
.seo-article {
  margin: 14px 29px 0 35px;
  max-width: calc(var(--content-width) - 64px);
  padding: 40px 44px 44px;
  border: 1px solid #d0b17b;
  border-radius: 10px;
  background: linear-gradient(130deg, #fffcf047, #f4e9d388), var(--paper);
  box-shadow: 0 3px 3px #8b65251f, inset 0 0 0 4px #fff7e44d;
}
.seo-head { margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line-soft); }
.seo-head > * { max-width: 780px; }
.seo-head .hero-eyebrow { margin-bottom: 8px; font-size: 15px; }
.seo-head h2 { margin: 0 0 14px; color: var(--ink); font-size: 36px; font-weight: 400; line-height: 1.22; }
.seo-lead { color: var(--ink-soft); font-size: 19px; line-height: 1.65; }
.seo-meta { margin-top: 14px; color: var(--muted); font-size: 14px; }

.seo-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 44px; align-items: start; }
.seo-body { max-width: 740px; }
.seo-body > section + section { margin-top: 42px; padding-top: 34px; border-top: 1px solid var(--line-soft); }
.seo-body h2, .info-article h2 { margin: 0 0 12px; color: #6b4a22; font-size: 25px; font-weight: 700; line-height: 1.3; }
.seo-body h3, .info-article h3 { margin: 26px 0 8px; color: var(--ink); font-size: 19.5px; font-weight: 700; line-height: 1.35; }
.seo-body p + p, .info-article p + p { margin-top: 14px; }
.seo-body ul, .seo-body ol, .info-article ul { margin: 12px 0; padding-left: 24px; }
.seo-body li + li, .info-article li + li { margin-top: 8px; }
.seo-body strong, .info-article strong { color: #3d2a12; }
.seo-article a, .info-article a, .site-footer a { color: #8d1b0e; text-decoration: underline; text-decoration-color: #8d1b0e66; text-underline-offset: 3px; }
.seo-article a:hover, .info-article a:hover { text-decoration-color: currentColor; }
.seo-article a.primary-button, .info-article a.primary-button { color: #fff3d9; text-decoration: none; }

/* Mục lục: dính bên trái khi cuộn (desktop). */
.seo-toc { position: sticky; top: 20px; padding: 16px 18px; border: 1px solid #e0cba2; border-radius: 8px; background: #fffaf0; }
.seo-toc-title { margin-bottom: 8px; color: #6b4a22; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.seo-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: muc; }
.seo-toc li { counter-increment: muc; }
.seo-toc li + li { margin-top: 2px; }
.seo-toc a { display: flex; gap: 8px; padding: 5px 0; color: var(--ink-soft); font-size: 15px; line-height: 1.4; text-decoration: none; }
.seo-toc a::before { content: counter(muc) '.'; min-width: 18px; color: #a4752c; font-weight: 700; }
.seo-toc a:hover { color: #8d1b0e; }

.seo-steps { counter-reset: buoc; list-style: none; padding-left: 0 !important; }
.seo-steps li { position: relative; padding-left: 42px; }
.seo-steps li + li { margin-top: 12px !important; }
.seo-steps li::before {
  counter-increment: buoc;
  content: counter(buoc);
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--red-bright), #8d1009);
  color: #fff5db;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.seo-callout { margin: 20px 0; padding: 16px 20px; border-left: 3px solid #a4752c; border-radius: 0 8px 8px 0; background: #fbf0d6; font-size: 16.5px; line-height: 1.7; }
.seo-table-wrap { margin: 16px 0; overflow-x: auto; border: 1px solid #dcc59b; border-radius: 8px; }
.seo-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.seo-table th, .seo-table td { padding: 9px 14px; border-bottom: 1px solid #e6d3ad; text-align: left; vertical-align: top; }
.seo-table th { background: #f1e2c1; color: #6b4a22; font-size: 14px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.seo-table tbody tr:last-child td { border-bottom: 0; }
.seo-table tbody tr:nth-child(even) td { background: #fffaf0; }
.seo-table td:first-child { color: #8d1b0e; font-weight: 700; white-space: nowrap; }
.seo-cta { margin-top: 22px; }
.seo-cta .primary-button { display: inline-flex; width: auto; padding: 11px 30px; font-size: 18px; }

.seo-faq details { border-bottom: 1px solid var(--line-soft); }
.seo-faq details:first-of-type { border-top: 1px solid var(--line-soft); }
.seo-faq summary { position: relative; padding: 14px 36px 14px 0; color: var(--ink); font-size: 17.5px; font-weight: 700; list-style: none; cursor: pointer; }
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after { content: '+'; position: absolute; right: 6px; top: 10px; color: #a4752c; font-size: 24px; font-weight: 400; }
.seo-faq details[open] summary::after { content: '–'; }
.seo-faq summary:hover { color: #8d1b0e; }
.seo-faq details p { padding: 0 0 16px; color: var(--ink-soft); }

.info-page { max-width: var(--content-width); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; color: var(--muted); font-size: 14px; }
.breadcrumb a { color: #8d1b0e; }
.info-article { max-width: 860px; padding: 34px 44px 38px; border: 1px solid #d0b17b; border-radius: 10px; background: linear-gradient(130deg, #fffcf047, #f4e9d388), var(--paper); box-shadow: 0 3px 3px #8b65251f, inset 0 0 0 4px #fff7e44d; }
.info-article > section + section { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.info-article .seo-meta { margin: 0 0 6px; }
.info-article section:first-of-type { margin-top: 14px; }
.contact-card { padding: 20px 22px; border: 1px solid #e3c88f; border-radius: 10px; background: #fbf0d6; }
.contact-mail { margin: 4px 0 8px; font-size: 24px; font-weight: 700; }
.contact-button { display: inline-flex; width: auto; margin-top: 6px; padding: 10px 26px; }

/* Trang Lá số của tôi */
.my-charts-note { margin: 0 0 12px; color: var(--muted); font-style: italic; }
.my-charts-list { margin: 0 0 22px; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); }
.my-charts-list li { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-soft); }
.my-chart-open { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; padding: 13px 4px; }
.my-chart-name { overflow: hidden; color: var(--ink); font-size: 18px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.my-chart-meta { color: var(--muted); font-size: 14.5px; }
.my-chart-open:hover .my-chart-name { color: var(--red); }
.my-chart-remove { flex-shrink: 0; padding: 6px 12px; border: 1px solid #d9c49c; border-radius: 6px; color: var(--muted); font-size: 14px; }
.my-chart-remove:hover { border-color: var(--red); color: var(--red); }
.my-charts-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.my-charts-actions .contact-button { margin-top: 0; }
.my-charts-login { color: var(--red); font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }

/* Liên kết menu trỏ tới mục trong trang: chừa chỗ cho thanh trên dính khi cuộn tới. */
.seo-body > section, #cong-cu, #birth-form { scroll-margin-top: 20px; }
@media (max-width: 760px) {
  .seo-body > section, #cong-cu, #birth-form { scroll-margin-top: 90px; }
}

.site-footer {
  margin: 34px 0 0;
  padding: 30px 35px 22px;
  border-top: 1px solid #c9b088;
  background: #efe1c2;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
.footer-grid { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 28px; max-width: calc(var(--content-width) + 300px); }
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: #3d2a12; font-size: 21px; }
.footer-logo img { width: 26px; height: auto; }
.footer-mail { margin-top: 10px; }
.site-footer h2 { margin-bottom: 8px; color: #6b4a22; font-size: 14px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.footer-trust, .footer-links { margin: 0; padding: 0; list-style: none; }
.footer-trust li + li, .footer-links li + li { margin-top: 8px; }
.footer-links a { color: var(--ink); text-decoration: none; }
.footer-links a:hover { color: #8d1b0e; text-decoration: underline; }
.footer-note { max-width: calc(var(--content-width) + 300px); margin-top: 22px; padding-top: 14px; border-top: 1px solid #d9c29a; color: var(--muted); font-size: 13px; }

/* Hộp luận giải và bảng trượt chi tiết cung */
dialog.reading-dialog { max-width: 760px; max-height: 88vh; overflow-y: auto; padding: 26px 32px; }
.reading-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.reading-head h2 { margin: 2px 0 0; font-size: 25px; }
.reading-panel { min-height: 100px; }
.reading-panel .primary-button { max-width: 340px; margin-top: 14px; font-size: 17px; }
.reading-empty, .reading-loading { color: var(--muted); font-size: 15px; }
.reading-loading { animation: reading-pulse 1.6s ease-in-out infinite; }
@keyframes reading-pulse { 50% { opacity: .45; } }
.reading-text { font-size: 17px; line-height: 1.68; }
.reading-text h3 { margin: 20px 0 8px; color: #614b2e; font-size: 19px; font-weight: 600; }
.reading-text h3:first-child { margin-top: 0; }
.reading-text p + p { margin-top: 10px; }
.reading-text ul { margin: 8px 0 12px; padding-left: 22px; }
.reading-text li + li { margin-top: 4px; }

dialog.sheet { width: 100%; max-width: 560px; max-height: 80vh; margin: auto auto 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; overflow-y: auto; }
dialog.sheet[open] { animation: sheet-up .2s ease-out; }
.sheet .detail-head { padding-right: 34px; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }

@media (max-width: 1100px) {
  .seo-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .seo-toc { position: static; margin-bottom: 30px; }
  .seo-toc ol { columns: 2; column-gap: 28px; }
  .seo-toc li { break-inside: avoid; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .chart-layout { grid-template-columns: minmax(0, 1fr); }
  .chart-aside { position: static; }
  .cung-detail { display: none; }
  .board-wrap { max-width: 760px; margin: 0 auto; }
}

/* ---------- Đăng nhập ---------- */
.auth-lead { margin-bottom: 18px; color: var(--muted); font-size: 15px; }
.auth-form { display: grid; gap: 14px; }
.auth-field { display: grid; gap: 6px; font-size: 15px; }
.auth-field[hidden] { display: none; }
.auth-form .form-error { margin: 0; }
.auth-switch-row { margin-top: 16px; text-align: center; }
.dialog-logout { display: block; margin-top: 18px; color: var(--red); }

/* ---------- Hộp thoại ---------- */
dialog {
  width: calc(100% - 32px);
  max-width: 500px;
  padding: 28px;
  border: 1px solid #b69565;
  border-radius: 10px;
  background: #f7efdd url('../assets/paper.svg');
  box-shadow: 0 20px 100px #0005;
  color: #271d10;
}
dialog::backdrop { background: #080c08aa; backdrop-filter: blur(3px); }
dialog h2 { margin: 10px 0 18px; font-size: 29px; font-weight: 500; }
dialog p { line-height: 1.6; }
#dialog-content p + p { margin-top: 10px; }
.dialog-eyebrow { color: #8d5b2a; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.dialog-close { position: absolute; right: 12px; top: 8px; width: 36px; height: 36px; color: #765732; font-size: 28px; }
.dialog-done { margin-top: 24px; font-size: 16px; }

.bottom-nav { display: none; }

/* ---------- Màn hình rộng (≥1600px) ---------- */
@media (min-width: 1600px) {
  .app-shell { --sidebar-width: 310px; --content-width: 1140px; }
  .topbar { padding: 0 32px; }
  .content-row { display: flex; align-items: flex-start; }
  .main-content { flex: 1 1 var(--content-width); min-width: 0; }
  .rail { display: flex; flex: 0 0 300px; flex-direction: column; align-items: stretch; padding: 21px 29px 16px 0; }
  /* Bài viết trải tới mép phải cột tiện ích. */
  .seo-article { max-width: calc(var(--content-width) + 265px); }
  .seo-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 56px; }
}

/* ---------- Desktop hẹp (981–1159px) ---------- */
@media (max-width: 1159px) {
  .app-shell { --sidebar-width: 245px; }
  .topbar { gap: 10px; padding: 0 18px; }
  .brand { font-size: 26px; }
  .top-nav { gap: 6px; }
  .top-nav a { font-size: 14px; }
  .profile-name { display: none; }
  .sage-heading { gap: 10px; }
  .sage h2 { font-size: 22px; }
  .sage-quote { margin-left: 4px; }
  .sage-quote blockquote { font-size: 14px; }
  .sage-quote img { display: none; }
  .sage-avatar { width: 87px; height: 94px; }
  .side-nav a { gap: 12px; padding-left: 18px; font-size: 14px; }
  .hero { padding-left: 30px; }
  .main-content { padding: 20px; }
  .workspace { grid-template-columns: minmax(0, 1fr) 240px; gap: 15px; }
  .form-card { padding: 23px 20px; }
  .preview { padding: 24px 18px; }
  .split { gap: 12px; }
  .split fieldset + fieldset { padding-left: 12px; }
  .segmented span { padding: 0 6px; }
  .location summary { gap: 8px; font-size: 13px; }
}

/* ---------- Máy tính bảng (761–980px): xem trước nằm dưới biểu mẫu ---------- */
@media (max-width: 980px) {
  .top-nav a:nth-last-child(-n + 2) { display: none; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .preview-body { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; }
  .preview-body > div { margin-bottom: 0; }
  .preview-details { margin: 30px 0 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid #c2a77a; }
  .chart, .compass { display: none; }
  .cloud-bottom { width: 50%; left: auto; right: 7px; opacity: .7; }
  .tip { flex-wrap: wrap; }
}

/* ---------- Điện thoại (≤760px) ---------- */
@media (max-width: 760px) {
  body { padding: 0; background: var(--paper); font-size: 15px; }

  .app-shell {
    display: block;
    min-height: 100vh;
    padding-bottom: calc(65px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    justify-content: space-between;
    height: 74px;
    padding: 0 16px;
  }
  .menu-button { display: grid; width: 44px; height: 44px; margin-left: -8px; }
  .brand { width: auto; gap: 9px; font-size: 25px; }
  .brand-seal { width: 30px; height: 38px; }
  .brand-name small { font-size: 8px; letter-spacing: 2px; }
  .top-nav, .profile { display: none; }
  .account { margin: 0 -8px 0 0; }
  .account .icon-button { width: 44px; height: 44px; }

  .sidebar {
    position: fixed;
    top: 74px;
    bottom: calc(65px + env(safe-area-inset-bottom));
    left: 0;
    z-index: 25;
    width: min(294px, 85vw);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s .25s;
  }
  .sidebar-inner { position: static; max-height: none; overflow: visible; }
  .sidebar.is-open { box-shadow: 20px 0 60px #0009; transform: none; visibility: visible; transition: transform .25s ease; }
  .drawer-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 20; background: #080c08aa; }

  .mobile-banner { display: block; width: 100%; height: auto; aspect-ratio: 284 / 65; object-fit: cover; }
  .hero { height: auto; min-height: 0; padding: 16px 22px 12px; border-bottom: 0; }
  .hero-eyebrow { margin-bottom: 5px; font-size: 13px; }
  .hero h1 { margin: 0; font-size: 30px; }
  .hero-lead, .hero-art { display: none; }

  .main-content { padding: 0 14px 18px; }
  .workspace { display: flex; flex-direction: column; gap: 16px; }
  .form-card { padding: 17px 16px 20px; border-radius: 7px; }
  .corner { display: none; }
  .lotus { width: 56px; opacity: .65; }

  .field-label { font-size: 15px; }
  /* 16px để Safari iOS không tự phóng to khi chạm vào ô nhập. */
  input:not([type='radio'], [type='checkbox']), select, .name-field input { height: 42px; font-size: 16px; }
  .name-field .icon { top: 11px; width: 19px; height: 19px; }
  .split { grid-template-columns: 1fr 1.2fr; gap: 14px; margin: 16px 0; }
  .split fieldset + fieldset { padding-left: 0; border: 0; }
  .split legend { margin-bottom: 7px; }
  .segmented label { font-size: 14px; }
  .segmented span { height: 40px; padding: 0 6px; }
  .date-select { grid-template-columns: 1fr 1fr 1.15fr; gap: 9px; margin-top: 6px; }
  .date-select select { padding: 7px 28px 7px 10px; background-position: right 8px center; }
  .hour-fieldset { margin-top: 16px; }
  .unknown-hour { font-size: 13px; }
  .hours { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hours span { height: 54px; font-size: 16px; }
  .hours small { font-size: 12px; }
  .location summary { gap: 8px; padding: 8px 10px; font-size: 13px; }
  .location summary .icon { width: 18px; height: 18px; }
  .form-card .primary-button { min-height: 48px; font-size: 18px; }

  .preview { padding: 18px 16px 16px; border-radius: 7px; }
  .preview h2 { margin-bottom: 12px; }
  .preview-body { grid-template-columns: 1fr 1.25fr; gap: 14px; }
  .preview-details { grid-template-columns: 1fr; gap: 2px; margin-top: 28px; padding-left: 14px; font-size: 14px; }
  .preview-details dd { margin-bottom: 8px; }
  .preview-details dt { color: var(--muted); font-size: 13px; }
  .cloud-top { width: 120px; opacity: .8; }
  .cloud-bottom { display: none; }

  .tip { flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; margin-top: 16px; padding: 14px; }
  .rail { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0 14px 18px; }
  .rail-card { padding: 18px 16px; }
  .tip-icon { width: 26px; }
  .tip h3 { font-size: 15px; }
  .tip-button { flex-basis: 100%; margin-left: 38px; min-height: 32px; font-size: 14px; }

  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    justify-content: space-around;
    height: calc(65px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: #0b0e0b;
    box-shadow: 0 -1px 0 #b69b6b33;
    color: #dfc79b;
  }
  .bottom-nav a { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 12px; }
  .bottom-nav .icon { width: 22px; height: 22px; }
  .bottom-nav a[aria-current='page'] { color: #e0311f; }

  /* Lá số vừa khít bề ngang điện thoại như tuvi: chữ nhỏ, ô vuông. */
  .chart-page { padding-top: 6px; }
  .chart-summary { padding: 9px 12px; }
  .chart-facts { gap: 2px 14px; font-size: 13px; }
  .chart-actions { font-size: 13px; }
  .chart-board { gap: 1px; padding: 1px; border-width: 2px; }
  .cung { padding: 3px 3px 2px; }
  .cung-head { margin-bottom: 1px; }
  .cung-chi { font-size: 8.5px; }
  .cung-ten { font-size: 8px; letter-spacing: 0; }
  .than-tag { margin-left: 2px; padding: 0 1px; }
  .cung-marks { font-size: 7.5px; }
  .cung-chinh .sao { font-size: 9.5px; line-height: 1.22; }
  .cung-phu { margin-top: 1px; }
  .cung-phu .sao { font-size: 8px; line-height: 1.25; }
  .cung-than-sao { font-size: 7.5px; }
  .cung-foot { padding-top: 1px; font-size: 7.5px; }
  .hoa { margin-left: 1px; padding: 0 1px; font-size: 6.5px; }
  .cung.is-tamhop::after, .cung.is-xung::after { padding: 0 3px; font-size: 6.5px; letter-spacing: 0; }
  .thien-ban { gap: 3px; padding: 6px 4px; }
  .thien-ban-eyebrow { font-size: 7.5px; letter-spacing: 1px; }
  .thien-ban-name { font-size: 13px; }
  .thien-ban-info { gap: 0 6px; font-size: 8.5px; }
  .thien-ban-tutru { gap: 2px 6px; padding-top: 3px; font-size: 8.5px; }
  .thien-ban-tutru small { font-size: 7px; }
  .thien-ban-warning { font-size: 8px; }
  .board-legend { font-size: 12px; }
  .hanh-legend { gap: 4px 14px; font-size: 12px; }
  .topics { padding: 16px 14px; }
  .topic strong { font-size: 15px; }
  dialog.reading-dialog { width: 100%; max-width: none; max-height: 92vh; margin: auto auto 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; }
  .reading-head h2 { font-size: 21px; }
  .reading-text { font-size: 16px; }
  .bubble { max-width: 92%; font-size: 15px; }
  .chat-feed { max-height: 52vh; }
  /* 16px để Safari iOS không tự phóng to khi gõ. */
  .chat-form textarea { font-size: 16px; }

  .seo-article { margin: 16px 14px 0; padding: 26px 18px 30px; }
  .seo-article, .info-article { font-size: 16.5px; line-height: 1.7; }
  .seo-head { margin-bottom: 22px; padding-bottom: 20px; }
  .seo-head h2 { font-size: 27px; }
  .seo-lead { font-size: 17px; }
  .seo-body > section + section { margin-top: 30px; padding-top: 26px; }
  .seo-body h2, .info-article h2 { font-size: 22px; }
  .seo-body h3, .info-article h3 { font-size: 18px; }
  .seo-toc ol { columns: 1; }
  .seo-table { font-size: 15px; }
  .seo-table th, .seo-table td { padding: 8px 10px; }
  .seo-faq summary { font-size: 16.5px; }
  .info-article { padding: 24px 18px 28px; }
  .site-footer { margin-top: 24px; padding: 24px 16px 18px; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 360px) {
  .brand { font-size: 22px; }
  .topbar { padding: 0 12px; }
  .form-card { padding: 15px 12px; }
  .split { gap: 10px; }
  .segmented label { font-size: 13px; }
  .location summary small { display: none; }
  .preview-body { grid-template-columns: 1fr; }
  .preview-details { margin-top: 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid #c2a77a; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; scroll-behavior: auto !important; }
}

/* Ô xác minh chống bot (Cloudflare Turnstile): ẩn, chỉ chiếm chỗ khi Cloudflare cần người dùng bấm. */
.bot-check { display: flex; justify-content: center; }
.bot-check:has(iframe[style*="width"]) { margin: 4px 0 10px; }