/* ============================================================================
   TỬ VI AI — hệ thiết kế "Mực & Điện"
   Ý tưởng: lá số tử vi vốn là tài liệu vẽ tay bằng mực tàu trên giấy dó,
   có đóng dấu son. Trang web này là chính tài liệu đó, cắm điện.
   Vì vậy bảng màu lấy từ vật liệu thật: mực, giấy dó, son, vàng nghệ —
   không dùng gradient tím-hồng "vũ trụ" quen thuộc.
   ============================================================================ */

/* ---------------------------------------------------------------- tokens */
:root {
  /* nền mực — đen ám xanh, giống mực tàu thật chứ không phải đen trung tính */
  --muc-900: #090C13;
  --muc-850: #0D1119;
  --muc-800: #121826;
  --muc-700: #19203180;
  --raise:   #192031;
  --line:    #253046;
  --line-soft: #1B2334;

  /* giấy dó — chữ màu kem ấm, không phải trắng tinh (đỡ chói mắt ban đêm) */
  --diep:      #ECE4D6;
  --diep-mid:  #B6BBC9;
  --diep-dim:  #7E869B;

  /* son — màu con dấu, dùng cho hành động chính và cung Mệnh */
  --son:       #E23D28;
  --son-hi:    #FF5B44;
  --son-ink:   rgba(226, 61, 40, .16);

  /* vàng nghệ — điểm nhấn phụ, các mốc quan trọng */
  --nghe:      #F2B33D;
  --nghe-ink:  rgba(242, 179, 61, .14);

  /* ngũ hành: đây là HỆ THÔNG TIN, không phải trang trí.
     Mỗi sao được tô theo loại để nhìn lướt là nắm được cấu trúc cung. */
  --kim:  #DCE3F0;
  --moc:  #57D89A;
  --thuy: #5FA8FF;
  --hoa:  #FF7A66;
  --tho:  #E8AE4A;

  --ok:   #57D89A;
  --warn: #F2B33D;
  --bad:  #FF6B5A;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow: 0 18px 50px -22px rgba(0, 0, 0, .9);
  --shadow-sm: 0 6px 20px -10px rgba(0, 0, 0, .8);

  --ff-display: 'Bricolage Grotesque', 'Be Vietnam Pro', system-ui, sans-serif;
  --ff-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1140px;
  --nav-h: 62px;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--muc-900);
  color: var(--diep);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Vân giấy dó: nhiễu SVG rất nhẹ phủ toàn trang, làm nền bớt "phẳng kỹ thuật số".
   Nhúng thẳng data-URI nên không tốn thêm request nào. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }

/* Bắt buộc: các class dưới đây đặt display, mà author style luôn thắng UA
   stylesheet — không có dòng này thì thuộc tính hidden trên .laso-list
   hoàn toàn vô tác dụng và cả hai chế độ xem cùng hiện. */
[hidden] { display: none !important; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

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

::selection { background: var(--son); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; position: relative; z-index: 1; }
.narrow { max-width: 780px; }

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--muc-900) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav .wrap { display: flex; align-items: center; gap: 20px; }

.brand {
  display: inline-flex; align-items: baseline; gap: 9px;
  font-family: var(--ff-display); font-weight: 800; font-size: 19px;
  letter-spacing: -.04em; text-decoration: none; color: var(--diep);
}
.brand .seal {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--son); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; align-self: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset;
}
.nav-links { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.nav-links a {
  padding: 8px 13px; border-radius: 99px; text-decoration: none;
  color: var(--diep-mid); font-size: 14.5px; font-weight: 500;
  transition: background .18s, color .18s;
}
.nav-links a:hover { background: var(--raise); color: var(--diep); }
.nav-links a.cta {
  background: var(--son); color: #fff; font-weight: 600;
}
.nav-links a.cta:hover { background: var(--son-hi); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border: 0; border-radius: 99px; cursor: pointer;
  font-family: var(--ff-body); font-size: 16px; font-weight: 600;
  text-decoration: none; transition: transform .16s cubic-bezier(.2,.8,.3,1), background .16s, box-shadow .16s;
  line-height: 1;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-son {
  background: var(--son); color: #fff;
  box-shadow: 0 10px 30px -12px var(--son), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.btn-son:hover { background: var(--son-hi); box-shadow: 0 14px 38px -12px var(--son); }
.btn-son:disabled { background: #3A2A2C; color: var(--diep-dim); box-shadow: none; cursor: not-allowed; }

.btn-ghost { background: transparent; color: var(--diep); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--raise); border-color: var(--diep-dim); }

.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--muc-800);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 26px;
}
.card-pad-lg { padding: 34px; }

/* ---------------------------------------------------------------- forms */
.field { margin-bottom: 18px; }
.field > label,
.label {
  display: block; font-size: 12.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--diep-dim); margin-bottom: 8px;
}

.input, select.input, textarea.input {
  width: 100%; padding: 14px 16px;
  background: var(--muc-850);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--diep);
  font-family: var(--ff-body); font-size: 16px; /* 16px: iOS không tự zoom */
  transition: border-color .16s, background .16s;
}
.input::placeholder { color: #5C6478; }
.input:hover { border-color: #33415E; }
.input:focus { outline: none; border-color: var(--son); background: var(--muc-800); box-shadow: 0 0 0 3px var(--son-ink); }

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%237E869B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
textarea.input { resize: vertical; min-height: 96px; line-height: 1.6; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.hint { font-size: 13px; color: var(--diep-dim); line-height: 1.6; margin-top: 7px; }

/* Nút chọn dạng "viên" — dùng cho giới tính, loại lịch */
.pills { display: flex; gap: 8px; }
.pill-opt { flex: 1; position: relative; }
.pill-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pill-opt span {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 10px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--muc-850);
  font-size: 15px; font-weight: 500; cursor: pointer;
  transition: all .16s;
}
.pill-opt span:hover { border-color: #33415E; }
.pill-opt input:checked + span {
  border-color: var(--son); background: var(--son-ink); color: var(--diep);
  font-weight: 600;
}
.pill-opt input:focus-visible + span { outline: 2px solid var(--nghe); outline-offset: 2px; }

/* ---------------------------------------------------------------- hero */
.hero { padding: 56px 0 40px; position: relative; }
.hero-grid {
  display: grid; grid-template-columns: 1.02fr 1fr; gap: 52px; align-items: center;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--nghe); margin-bottom: 20px;
}
.eyebrow::before {
  content: ''; width: 26px; height: 1px; background: var(--nghe); opacity: .6;
}

.hero h1 {
  /* Trần 64px chứ không phải 76px: ở 1440px, cột trái chỉ rộng ~545px và
     dòng "Luận giải bằng AI." bị rớt chữ "AI." xuống một dòng riêng. */
  font-size: clamp(38px, 5.2vw, 64px);
  font-weight: 800;
  letter-spacing: -.045em;
  margin-bottom: 20px;
}
.hero h1 .ink { color: var(--son); }
.hero p.lead {
  font-size: 17.5px; color: var(--diep-mid); max-width: 46ch; margin: 0 0 30px;
}

.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 34px; }
.hero-stats div { display: flex; flex-direction: column; gap: 2px; }
.hero-stats b { font-family: var(--ff-display); font-size: 22px; letter-spacing: -.03em; }
.hero-stats span { font-size: 13px; color: var(--diep-dim); }

/* ---------------------------------------------------------------- LÁ SỐ (chữ ký của trang) */
.laso-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.seg {
  display: inline-flex; background: var(--muc-850); border: 1px solid var(--line);
  border-radius: 99px; padding: 3px;
}
.seg button {
  border: 0; background: transparent; color: var(--diep-dim);
  padding: 8px 16px; border-radius: 99px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500; transition: all .16s;
}
.seg button[aria-pressed="true"] { background: var(--raise); color: var(--diep); font-weight: 600; }

.laso-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }

.laso {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(126px, auto));
  gap: 2px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2px;
  min-width: 680px;
  overflow: hidden;
}

/* Bố cục 12 cung theo đúng lá số truyền thống:
      Tỵ   Ngọ  Mùi  Thân
      Thìn [ thiên bàn ] Dậu
      Mão  [           ] Tuất
      Dần  Sửu  Tý   Hợi                                                   */
.cung[data-chi="5"]  { grid-area: 1 / 1; }
.cung[data-chi="6"]  { grid-area: 1 / 2; }
.cung[data-chi="7"]  { grid-area: 1 / 3; }
.cung[data-chi="8"]  { grid-area: 1 / 4; }
.cung[data-chi="4"]  { grid-area: 2 / 1; }
.cung[data-chi="9"]  { grid-area: 2 / 4; }
.cung[data-chi="3"]  { grid-area: 3 / 1; }
.cung[data-chi="10"] { grid-area: 3 / 4; }
.cung[data-chi="2"]  { grid-area: 4 / 1; }
.cung[data-chi="1"]  { grid-area: 4 / 2; }
.cung[data-chi="0"]  { grid-area: 4 / 3; }
.cung[data-chi="11"] { grid-area: 4 / 4; }
.thien-ban { grid-area: 2 / 2 / 4 / 4; }

.cung {
  position: relative;
  background: var(--muc-850);
  padding: 10px 11px 30px;
  min-width: 0;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: background .18s;
  text-align: left;
  border: 0;
  color: inherit;
  font-family: inherit;
  overflow: hidden;
}
.cung:hover { background: var(--muc-800); }
.cung.is-menh { background: linear-gradient(180deg, var(--son-ink), transparent 62%), var(--muc-850); }
.cung.is-vandang { box-shadow: inset 0 0 0 1.5px var(--nghe); }

.cung-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.cung-name {
  font-family: var(--ff-display); font-size: 14.5px; font-weight: 700;
  letter-spacing: -.02em; color: var(--diep);
}
.cung.is-menh .cung-name { color: var(--son-hi); }
.cung-chi {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--diep-dim); text-transform: uppercase; white-space: nowrap;
}

/* Sao — màu theo loại, đây là phần mang thông tin */
.sao-main { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-bottom: 6px; }
.sao {
  font-size: 12.5px; line-height: 1.5; white-space: nowrap;
}
.sao-chinh {
  font-family: var(--ff-display); font-size: 15px; font-weight: 700;
  letter-spacing: -.02em; color: var(--diep);
}
.sao-cat  { color: var(--moc); }
.sao-sat  { color: var(--hoa); }
.sao-phu, .sao-vong { color: var(--diep-dim); font-size: 11.5px; }
.sao-hoa {
  color: #0A0D14; background: var(--nghe);
  padding: 1px 6px; border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.mieu {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  vertical-align: super; opacity: .75; margin-left: 1px;
}
.mieu-M { color: var(--nghe); }
.mieu-V { color: var(--moc); }
.mieu-Đ { color: var(--thuy); }
.mieu-B { color: var(--diep-dim); }
.mieu-H { color: var(--hoa); }

.sao-rest { display: flex; flex-wrap: wrap; gap: 2px 7px; margin-top: auto; }

.cung-foot {
  position: absolute; left: 11px; right: 11px; bottom: 8px;
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; color: var(--diep-dim);
  border-top: 1px solid var(--line-soft); padding-top: 6px;
}
.cung-dv { font-weight: 600; letter-spacing: .02em; }
.cung.is-vandang .cung-dv { color: var(--nghe); }

/* Con dấu son đóng lên cung Mệnh — chi tiết bản địa, không phải icon chung chung */
.seal-menh {
  position: absolute; right: 6px; bottom: 30px;
  width: 62px; height: 62px; border-radius: 12px;
  border: 3px solid var(--son);
  color: var(--son);
  display: grid; place-items: center;
  font-family: var(--ff-display); font-size: 17px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1;
  transform: rotate(-11deg);
  opacity: .17;
  pointer-events: none;
  z-index: 0;
}
/* Chữ phải nằm TRÊN con dấu, đúng như mực in trên giấy rồi mới đóng dấu chồng */
.cung-head, .sao-main, .sao-rest, .cung-foot, .kv-tag { position: relative; z-index: 1; }

.seal-than {
  display: inline-block;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--nghe); border: 1px solid var(--nghe);
  padding: 1px 5px; border-radius: 4px;
  vertical-align: 2px; margin-left: 5px;
}

/* Tuần / Triệt — vẽ thành nét gạch chéo qua ô, đúng như cách vẽ tay trên giấy */
.cung.has-tuan::after,
.cung.has-triet::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-repeat: no-repeat;
}
.cung.has-tuan::after {
  background-image: linear-gradient(to bottom right, transparent calc(50% - .8px), rgba(236,228,214,.28) 50%, transparent calc(50% + .8px));
}
.cung.has-triet::after {
  background-image: linear-gradient(to bottom left, transparent calc(50% - 1px), rgba(226,61,40,.42) 50%, transparent calc(50% + 1px));
}
.cung.has-tuan.has-triet::after {
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - .8px), rgba(236,228,214,.28) 50%, transparent calc(50% + .8px)),
    linear-gradient(to bottom left, transparent calc(50% - 1px), rgba(226,61,40,.42) 50%, transparent calc(50% + 1px));
}
.kv-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--son-hi); text-transform: uppercase;
  border: 1px solid rgba(226,61,40,.45); border-radius: 4px;
  padding: 0 5px; white-space: nowrap;
}
.cung-count { margin-left: auto; white-space: nowrap; }

/* Thiên bàn — ô giữa chứa thông tin người xem, giống lá số giấy */
.thien-ban {
  background: var(--muc-800);
  padding: 24px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 3px; text-align: center;
  position: relative;
}
.tb-name {
  font-family: var(--ff-display); font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 800; letter-spacing: -.04em; margin-bottom: 4px;
}
.tb-rows { display: grid; gap: 5px; margin-top: 12px; text-align: left; }
.tb-row {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 12.5px; padding-bottom: 5px;
  border-bottom: 1px dashed var(--line-soft);
}
.tb-row:last-child { border-bottom: 0; }
.tb-row dt { color: var(--diep-dim); white-space: nowrap; }
.tb-row dd { margin: 0; font-weight: 600; text-align: right; }
.tb-row dd.son { color: var(--son-hi); }
.tb-row dd.nghe { color: var(--nghe); }

/* Danh sách 12 cung — chế độ xem thay thế cho màn hình nhỏ */
.laso-list { display: grid; gap: 10px; }
.lc {
  background: var(--muc-850); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 15px 17px; width: 100%; text-align: left;
  cursor: pointer; font-family: inherit; color: inherit; transition: border-color .16s;
}
.lc:hover { border-color: var(--line); }
.lc.is-menh { border-color: var(--son); background: linear-gradient(180deg, var(--son-ink), transparent 60%), var(--muc-850); }
.lc-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.lc-head b { font-family: var(--ff-display); font-size: 16px; letter-spacing: -.02em; }
.lc-head .cung-chi { margin-left: auto; }

/* ---------------------------------------------------------------- bottom sheet chi tiết cung */
.sheet-bg {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(5, 7, 12, .72);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.sheet-bg.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 91; left: 50%; bottom: 0;
  width: min(560px, 100%);
  transform: translate(-50%, 100%);
  background: var(--muc-800);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 10px 24px 30px;
  max-height: 82vh; overflow-y: auto;
  transition: transform .28s cubic-bezier(.2,.9,.3,1);
}
.sheet.open { transform: translate(-50%, 0); }
.sheet-grip {
  width: 42px; height: 4px; border-radius: 99px; background: var(--line);
  margin: 6px auto 18px;
}
.sheet h3 { font-size: 22px; margin-bottom: 4px; }
.sheet .sub { color: var(--diep-dim); font-size: 13.5px; margin-bottom: 20px; }
.sao-group { margin-bottom: 16px; }
.sao-group h4 {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--diep-dim); margin-bottom: 9px; font-family: var(--ff-body); font-weight: 600;
}
.sao-item {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.sao-item:last-child { border: 0; }
.sao-item b { min-width: 96px; font-weight: 600; }
.sao-item span { color: var(--diep-dim); font-size: 13px; }

/* ---------------------------------------------------------------- luận giải */
.tabs {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex-shrink: 0; padding: 9px 17px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--muc-850);
  color: var(--diep-mid); font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: all .16s;
}
.tab:hover { border-color: var(--diep-dim); color: var(--diep); }
.tab[aria-selected="true"] {
  background: var(--son); border-color: var(--son); color: #fff; font-weight: 600;
}

.reading {
  background: var(--muc-800); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 30px; min-height: 260px;
  position: relative;
}
.reading .md { font-size: 16px; line-height: 1.78; }
.md h2 {
  font-size: 21px; margin: 30px 0 12px; letter-spacing: -.03em;
  padding-bottom: 9px; border-bottom: 1px solid var(--line-soft);
}
.md h2:first-child { margin-top: 0; }
.md h3 { font-size: 17px; margin: 22px 0 9px; }
.md p { margin: 0 0 15px; }
.md ul, .md ol { margin: 0 0 15px; padding-left: 22px; }
.md li { margin-bottom: 7px; }
.md li::marker { color: var(--son); }
.md strong { color: #fff; font-weight: 600; }
.md em { color: var(--nghe); font-style: normal; font-weight: 500; }
.md blockquote {
  margin: 0 0 15px; padding: 12px 18px;
  border-left: 3px solid var(--nghe); background: var(--nghe-ink);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--diep-mid);
}
.md code {
  background: var(--muc-850); padding: 2px 7px; border-radius: 5px;
  font-size: 14px; color: var(--nghe);
}
.md hr { border: 0; border-top: 1px solid var(--line-soft); margin: 26px 0; }

/* con trỏ nhấp nháy khi AI đang viết */
.caret {
  display: inline-block; width: 8px; height: 1.05em;
  background: var(--son); vertical-align: text-bottom; margin-left: 2px;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.reading-empty { text-align: center; padding: 46px 20px; color: var(--diep-dim); }
.reading-empty .big { font-size: 42px; margin-bottom: 14px; }

.sources { margin-top: 22px; }
.sources summary {
  cursor: pointer; font-size: 13.5px; color: var(--diep-dim);
  padding: 11px 0; border-top: 1px solid var(--line-soft); list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.sources summary::-webkit-details-marker { display: none; }
.sources summary::before { content: '▸'; transition: transform .2s; }
.sources[open] summary::before { transform: rotate(90deg); }
.src {
  background: var(--muc-850); border-radius: var(--r-sm);
  padding: 12px 15px; margin-bottom: 9px; font-size: 13.5px;
  border-left: 2px solid var(--line);
}
.src b { display: block; color: var(--nghe); font-size: 12.5px; margin-bottom: 5px; font-weight: 600; }
.src p { margin: 0; color: var(--diep-mid); line-height: 1.6; }

.ask-row { display: flex; gap: 10px; margin-top: 18px; }
.ask-row .input { flex: 1; }

/* ---------------------------------------------------------------- misc */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 99px;
  background: var(--muc-850); border: 1px solid var(--line);
  font-size: 13px; color: var(--diep-mid);
}
.chip.son { border-color: rgba(226,61,40,.4); color: var(--son-hi); background: var(--son-ink); }
.chip.nghe { border-color: rgba(242,179,61,.4); color: var(--nghe); background: var(--nghe-ink); }

.alert {
  border-radius: var(--r); padding: 14px 18px; font-size: 14.5px; line-height: 1.6;
  border: 1px solid; margin-bottom: 18px;
}
.alert-bad  { background: rgba(255,107,90,.1);  border-color: rgba(255,107,90,.35);  color: #FFC4BC; }
.alert-ok   { background: rgba(87,216,154,.1);  border-color: rgba(87,216,154,.35);  color: #B9F0D3; }
.alert-warn { background: rgba(242,179,61,.1);  border-color: rgba(242,179,61,.35);  color: #FBE0AE; }

.section { padding: 68px 0; }
.section-head { margin-bottom: 34px; max-width: 640px; }
.section-head h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 12px; }
.section-head p { color: var(--diep-mid); font-size: 16.5px; margin: 0; }

.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat {
  background: var(--muc-800); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 26px;
  transition: border-color .2s, transform .2s;
}
.feat:hover { border-color: var(--line); transform: translateY(-3px); }
.feat .ico { font-size: 26px; margin-bottom: 14px; }
.feat h3 { font-size: 18px; margin-bottom: 8px; }
.feat p { color: var(--diep-mid); font-size: 14.5px; margin: 0; line-height: 1.65; }

.foot {
  border-top: 1px solid var(--line-soft); padding: 34px 0 46px;
  color: var(--diep-dim); font-size: 13.5px;
}
.foot a { color: var(--diep-mid); }

.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.28); border-top-color: #fff;
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, var(--raise) 25%, #212B40 50%, var(--raise) 75%);
  background-size: 200% 100%; animation: sk 1.4s ease-in-out infinite;
  border-radius: 7px; height: 13px; margin-bottom: 11px;
}
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------------------------------------------------------------- hoạt cảnh "chấm mực" */
/* Khi lá số hiện ra, từng cung "thấm mực" lần lượt theo đúng thứ tự an cung:
   Mệnh trước, rồi đi nghịch — giống người ta điền tay lên giấy. */
@media (prefers-reduced-motion: no-preference) {
  .ink-in { opacity: 0; animation: inkIn .5s cubic-bezier(.2,.8,.3,1) forwards; }
  @keyframes inkIn {
    from { opacity: 0; transform: translateY(9px) scale(.985); filter: blur(3px); }
    to   { opacity: 1; transform: none; filter: none; }
  }
  .seal-drop { animation: sealDrop .42s cubic-bezier(.3,1.5,.5,1) .9s backwards; }
  @keyframes sealDrop {
    from { opacity: 0; transform: rotate(-8deg) scale(2.1); }
    60%  { opacity: 1; transform: rotate(-8deg) scale(.92); }
    to   { opacity: .92; transform: rotate(-8deg) scale(1); }
  }
  .rise { opacity: 0; transform: translateY(16px); transition: opacity .55s, transform .55s; }
  .rise.seen { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero { padding: 34px 0 26px; }
  .feat-grid { grid-template-columns: 1fr; }
  .section { padding: 46px 0; }
}

@media (max-width: 620px) {
  body { font-size: 15.5px; }
  .wrap { padding-inline: 16px; }
  .card, .card-pad-lg { padding: 20px; border-radius: var(--r-lg); }
  .reading { padding: 20px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .hero-stats { gap: 18px; }
  .nav-links a:not(.cta) { display: none; }
  .laso { min-width: 620px; grid-template-rows: repeat(4, minmax(112px, auto)); }
  .sheet { width: 100%; }
  .ask-row { flex-direction: column; }
  .md h2 { font-size: 19px; }
}

@media print {
  body { background: #fff; color: #000; }
  .nav, .tabs, .btn, .laso-tools, .sheet, .sheet-bg { display: none !important; }
  .laso { min-width: 0; }
}