/* =============================================================
   hvls.css - giao diện Trang Dịch Quái
   Viết mới 2026-08-09. Đây là stylesheet DUY NHẤT của trang: không
   còn style.min.css, không font-awesome, không quy tắc đè.

   Mực, son, giấy. Nền là mặt bàn mực; quẻ nằm trên phiến giấy trắng
   vì ảnh quẻ do server sinh vốn có nền trắng. Điểm nhấn duy nhất là
   son dấu.
   ============================================================= */

@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bevietnampro-400-vi.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:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bevietnampro-400-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/bevietnampro-600-vi.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:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/bevietnampro-600-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/lora-600-vi.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:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/lora-600-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


:root {
  --ground:    #EDEBE6;
  --ground-2:  #E4E1DA;
  --surface:   #FBFAF7;
  --paper:     #FFFFFF;
  --ink:       #191B1E;
  --ink-soft:  #4C5157;
  --ink-faint: #6E7681;
  --rule:      #D5D1C8;
  --rule-soft: #E4E1DA;

  --seal:        #C13B26;
  --seal-strong: #A62F1D;   /* nền nút: chữ trắng đạt 5,0:1 */
  --seal-soft:   #F7E8E3;
  --seal-line:   #EBCFC6;
  --seal-on:     #FFFFFF;

  --shadow:
    0 1px 1px rgba(25,27,30,.04),
    0 2px 4px rgba(25,27,30,.04),
    0 12px 32px -16px rgba(25,27,30,.28);

  --r: 13px;
  --r-sm: 9px;
  --tap: 46px;
  --max: 1240px;
  --doc: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:    #14161A;
    --ground-2:  #1A1D21;
    --surface:   #1F2328;
    --ink:       #ECEAE5;
    --ink-soft:  #AFB5BC;
    --ink-faint: #868D95;
    --rule:      #2C3138;
    --rule-soft: #23272C;

    --seal:        #F0674E;
    --seal-strong: #E6573D;
    --seal-soft:   #2B1A16;
    --seal-line:   #45261F;
    --seal-on:     #1A0C08;

    --shadow:
      0 1px 1px rgba(0,0,0,.35),
      0 2px 6px rgba(0,0,0,.30),
      0 16px 38px -18px rgba(0,0,0,.85);
  }
}

/* ---------- nền ---------- */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--seal); text-underline-offset: 2px; }
a:hover { color: var(--seal-strong); }

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

img { max-width: 100%; height: auto; }

.hv-wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px 96px; }

/* ---------- thanh công cụ trên cùng ---------- */

.hv-top {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.hv-top-in {
  max-width: var(--max); margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 18px; min-height: 56px;
}
.hv-brand {
  flex: 0 0 auto;
  font-family: Lora, Georgia, serif; font-weight: 600; font-size: 17px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.hv-brand:hover { color: var(--seal); }

.hv-nav {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin-left: auto;
}
.hv-nav::-webkit-scrollbar { display: none; }
.hv-nav a {
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  color: var(--ink-soft); text-decoration: none;
  font-size: 14.5px; font-weight: 600;
  transition: background-color .16s, color .16s;
}
.hv-nav a:hover { color: var(--ink); background: var(--ground-2); }
.hv-nav a[aria-current="page"] { color: var(--seal); background: var(--seal-soft); }

@media (max-width: 719px) {
  .hv-top-in { flex-wrap: wrap; gap: 6px 14px; padding: 8px 16px; }
  .hv-nav { margin-left: 0; width: 100%; padding-bottom: 2px; }
}

/* ---------- đầu trang ---------- */

.hv-crumb { padding: 16px 0 0; font-size: 13px; color: var(--ink-faint); }
.hv-crumb a { color: var(--ink-soft); text-decoration: none; }
.hv-crumb a:hover { color: var(--seal); }

.hv-h1 {
  margin: 18px 0 8px;
  font-family: Lora, Georgia, serif;
  font-weight: 600;
  font-size: clamp(27px, 6vw, 40px);
  line-height: 1.14;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.hv-lede {
  margin: 0 0 22px;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: 15.5px;
}

/* ---------- thẻ chung ---------- */

.hv-the {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 20px 18px;
}
@media (min-width: 720px) { .hv-the { padding: 26px 28px; } }

.hv-the > h2:first-child, .hv-the > h3:first-child { margin-top: 0; }

h2, h3 { font-family: Lora, Georgia, serif; font-weight: 600; line-height: 1.25; }
h2 { margin: 30px 0 10px; font-size: 22px; text-wrap: balance; }
h3 { margin: 22px 0 6px; font-size: 17px; }

/* ---------- bố cục hai cột ----------
   Cột trái là nội dung: quẻ, luận đoán, hướng dẫn.
   Cột phải là ô nhập liệu, luôn nằm đó và dính theo màn hình khi cuộn,
   để gieo lại không phải cuộn ngược lên. */

.hv-cot { display: flex; flex-direction: column; gap: 20px; }

@media (min-width: 1000px) {
  .hv-cot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 384px;
    gap: 26px;
    align-items: start;
  }
  .hv-phai { position: sticky; top: 16px; }
}

.hv-trai { min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* Trên màn hình hẹp: chưa gieo thì ô nhập lên trước hướng dẫn; gieo rồi
   thì quẻ lên trước, ô nhập lùi xuống dưới. */
@media (max-width: 999px) {
  body[data-hv-gieo="0"] .hv-phai { order: -1; }
}

.hv-que { position: sticky; top: 16px; }
}

.hv-que {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 15px;
  color: #191B1E;
}
.hv-que img {
  display: block; width: 100%;
  border: 1px solid #E4E1DA;
  border-radius: var(--r-sm);
}

.hv-que-nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hv-que-nut .chinh {
  flex: 1 1 100%;
  min-height: 48px; padding: 12px 18px;
  color: #FFFFFF; background: #A62F1D;
  border: 0; border-radius: var(--r-sm);
  font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
  transition: background-color .16s;
}
.hv-que-nut .chinh:hover { background: #C13B26; }
.hv-que-nut .phu {
  flex: 1 1 0; min-width: 96px; min-height: 44px; padding: 10px 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #4C5157; background: #F5F3EE;
  border: 1px solid #DEDAD1; border-radius: var(--r-sm);
  font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: color .16s, border-color .16s;
  -webkit-appearance: none; appearance: none;
}
.hv-que-nut .phu:hover { color: #C13B26; border-color: #C13B26; }

/* link sang bài diễn giải quẻ: cây cầu giữa công cụ và kho bài viết */
.hv-que-bai { margin-top: 18px; padding-top: 16px; border-top: 1px solid #E6E2D9; }
.hv-que-bai .nhan {
  margin: 0 0 10px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: #767B82;
}
.hv-que-bai a {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px; margin-bottom: 8px; text-decoration: none;
  background: #FDF4F1; border: 1px solid #EBCFC6; border-radius: var(--r-sm);
  transition: border-color .16s, background-color .16s;
}
.hv-que-bai a:last-child { margin-bottom: 0; }
.hv-que-bai a:hover { border-color: #C13B26; background: #FBEAE4; }
.hv-que-bai .so {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1.5px solid #C13B26; border-radius: 5px;
  color: #C13B26; font-size: 14.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hv-que-bai .tn {
  flex: 1; min-width: 0;
  font-family: Lora, Georgia, serif; font-size: 17px; font-weight: 600;
  line-height: 1.25; color: #191B1E;
}
.hv-que-bai .tn small {
  display: block; margin-top: 2px;
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 400; line-height: 1.4; color: #6E7681;
}

/* ---------- luận đoán ---------- */

.hv-luan {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 20px 18px;
}
@media (min-width: 720px) { .hv-luan { padding: 24px; } }

.hv-luan .o-container { max-width: none; margin: 0; padding: 0; }
.hv-luan h2 { margin-top: 26px; font-size: 20px; }
.hv-luan h2:first-child { margin-top: 0; }
.hv-luan h3 { font-size: 16px; font-family: 'Be Vietnam Pro', system-ui, sans-serif; }
.hv-luan p, .hv-luan li { color: var(--ink-soft); }
.hv-luan b, .hv-luan strong { color: var(--ink); }

/* Hai khối link quẻ do luanque.php in ra bằng inline style màu nâu cũ.
   Bắt theo chuỗi màu để không phải sửa file nội dung luận đoán. */
.hv-luan div[style*="ded9cc"], .hv-luan p[style*="8a6d3b"] {
  background: var(--seal-soft) !important;
  border: 1px solid var(--rule) !important;
  border-left: 3px solid var(--seal) !important;
  border-radius: var(--r-sm);
  color: var(--ink) !important;
}
/* hai khối link quẻ do luanque.php in ra */
.hv-luan .hv-doc-them {
  margin: 10px 0 20px; padding: 12px 15px;
  background: var(--seal-soft);
  border: 1px solid var(--rule); border-left: 3px solid var(--seal);
  border-radius: var(--r-sm);
  font-size: 15px; line-height: 1.6;
}
.hv-luan .hv-doc-them ul { margin: 0; padding-left: 20px; line-height: 1.9; }
.hv-luan .hv-doc-them h3 { margin: 0 0 8px; font-size: 16px; }

/* ---------- khối đóng mở của luận đoán ---------- */

.hv-luan-dau { margin-bottom: 6px; }
.hv-luan-dau h2 { margin-top: 0; }
.hv-luan-nhom { margin: 26px 0 10px; font-size: 19px; }

.hv-mo {
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--ground);
  margin-bottom: 8px;
}
.hv-mo summary {
  padding: 12px 14px 12px 38px;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-weight: 600; font-size: 15.5px; color: var(--ink);
}
.hv-mo summary::-webkit-details-marker { display: none; }
.hv-mo summary::before {
  content: ""; position: absolute; left: 15px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid var(--seal); border-bottom: 2px solid var(--seal);
  transform: rotate(-45deg); transition: transform .18s;
}
.hv-mo[open] summary::before { transform: rotate(45deg); margin-top: -7px; }
.hv-mo summary:hover { color: var(--seal); }
.hv-mo-noi { padding: 0 14px 14px; }
.hv-mo-noi > *:first-child { margin-top: 0; }

/* ---------- khối lập quẻ ---------- */

.hv-lap {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 20px 18px;
}
.hv-lap > h2 { margin-top: 0; font-size: 20px; }
.hv-lap .huong { margin: 0 0 18px; color: var(--ink-soft); font-size: 14px; }

.hv-truong { margin-bottom: 16px; }
.hv-nhan {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint);
}

.hv-lap input[type="text"] {
  width: 100%; min-height: var(--tap); padding: 11px 13px;
  font: inherit; font-size: 16px;   /* dưới 16px iOS tự phóng to trang */
  color: var(--ink); background: var(--ground);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.hv-lap input[type="text"]::placeholder { color: var(--ink-faint); }
.hv-lap input[type="text"]:focus, .hv-lap select:focus {
  outline: none; border-color: var(--seal); box-shadow: 0 0 0 3px var(--seal-soft);
}

.hv-hang { display: flex; flex-wrap: wrap; gap: 8px; }
.hv-hang select { flex: 1 1 0; min-width: 88px; }
.hv-hang.gio select { flex: 0 1 112px; }

.hv-lap select {
  min-height: var(--tap); padding: 10px 32px 10px 12px;
  font: inherit; font-size: 16px; color: var(--ink);
  background-color: var(--ground);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.hv-chon {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 4px;
  font-size: 14.5px; color: var(--ink-soft); cursor: pointer;
}
.hv-chon input { width: 20px; height: 20px; accent-color: var(--seal); cursor: pointer; }

.hv-gieo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 54px;
  margin-top: 18px; padding: 14px 20px;
  color: var(--seal-on); background: var(--seal-strong);
  border: 0; border-radius: var(--r-sm);
  font: inherit; font-size: 16.5px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .16s, transform .08s;
  -webkit-appearance: none; appearance: none;
}
.hv-gieo:hover { background: var(--seal); }
.hv-gieo:active { transform: translateY(1px); }
.hv-gieo[data-cho] { background: var(--ink-faint); cursor: progress; }
.hv-gieo .xoay {
  display: none; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: hv-xoay .8s linear infinite;
}
.hv-gieo[data-cho] .xoay { display: block; }
@keyframes hv-xoay { to { transform: rotate(360deg); } }

/* bảng khai hào của Lục hào */
.hv-hao { width: 100%; border-collapse: collapse; margin-top: 4px; }
.hv-hao th {
  padding: 8px 10px; text-align: left;
  font-size: 12.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 1px solid var(--rule);
}
.hv-hao td { padding: 7px 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.hv-hao tr:last-child td { border-bottom: 0; }
.hv-hao .ten { font-weight: 600; white-space: nowrap; }
.hv-hao select { min-width: 108px; }

/* nút gieo bám đáy khi nút thật đã cuộn khỏi màn hình */
.hv-dinh {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--ground);
  border-top: 1px solid var(--rule);
  transform: translateY(115%);
  transition: transform .22s ease;
}
.hv-dinh[data-hien] { transform: translateY(0); }
.hv-dinh button {
  display: block; width: 100%; max-width: 700px; margin: 0 auto;
  min-height: 50px; padding: 12px 20px;
  color: var(--seal-on); background: var(--seal-strong);
  border: 0; border-radius: var(--r-sm);
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.hv-dinh button:hover { background: var(--seal); }

/* ---------- bài viết ---------- */

.hv-bai { max-width: var(--doc); padding-top: 6px; }
.hv-bai p, .hv-bai li { color: var(--ink-soft); font-size: 15.5px; }
.hv-bai p { margin: 0 0 14px; }
.hv-bai ol, .hv-bai ul { margin: 0 0 16px; padding-left: 1.3em; }
.hv-bai li { margin-bottom: 8px; }
.hv-bai strong { color: var(--ink); font-weight: 600; }
.hv-bai h3 { font-family: 'Be Vietnam Pro', system-ui, sans-serif; font-size: 16.5px; }

.hv-video {
  margin: 0 0 18px; border: 1px solid var(--rule); border-radius: var(--r-sm);
  overflow: hidden; background: var(--ground-2);
}
.hv-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.hv-tra64 {
  display: block; margin: 10px 0 18px; padding: 15px 17px; text-decoration: none;
  background: var(--seal-soft);
  border: 1px solid var(--rule); border-left: 3px solid var(--seal);
  border-radius: var(--r-sm);
  transition: border-color .16s;
}
.hv-tra64:hover { border-color: var(--seal); }
.hv-tra64 .t { display: block; font-family: Lora, Georgia, serif; font-size: 17.5px; font-weight: 600; color: var(--ink); }
.hv-tra64 .d { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }

/* ---------- xem ảnh quẻ phóng to ---------- */

.hv-to {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 56px 12px 12px;
  background: rgba(20,22,26,.93);
  overflow: auto; -webkit-overflow-scrolling: touch;
}
/* ảnh giữ kích thước gốc để đọc được chữ nhỏ; giới hạn bề rộng ở đây
   sẽ làm nút Phóng to thành vô nghĩa trên điện thoại */
.hv-to img { max-width: none; width: auto; border-radius: 6px; background: #fff; }
.hv-to .dong {
  position: fixed; top: 12px; right: 12px;
  min-height: 40px; padding: 9px 18px;
  color: #ECEAE5; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.hv-to .dong:hover { background: rgba(255,255,255,.2); }

/* ---------- chân trang ---------- */

.hv-foot {
  margin-top: 36px; padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint); font-size: 13.5px;
}
.hv-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
.hv-foot a { color: var(--ink-soft); text-decoration: none; }
.hv-foot a:hover { color: var(--seal); }

/* ---------- chuyển động ---------- */

@media (prefers-reduced-motion: reduce) {
  *, .hv-dinh { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .hv-gieo:active { transform: none; }
}