/* ═══════════════════════════════════════════════════
   TỬ VI ĐẨU SỐ – Plugin CSS v4.0 (rebrand 07/07/2026)
   Màu chủ đạo: #7A1F1F (đỏ rượu vang)  |  Màu nhấn: #B58A3C (vàng đồng)
   Nền: #FFFDF8  |  Chữ phụ: #666666
   Phong cách: Premium – 70% truyền thống, 30% hiện đại (theo brief thiết kế)
   ═══════════════════════════════════════════════════ */

/* Google Fonts (Be Vietnam Pro, Cormorant Garamond, Noto Sans Condensed) được
   nạp qua wp_enqueue_style() riêng trong includes/enqueue.php, KHÔNG dùng
   @import ở đây nữa. Lý do: @import chỉ hợp lệ khi là rule đầu tiên của toàn
   bộ stylesheet mà trình duyệt nhận được; nếu site dùng plugin cache/minify
   có tính năng "Combine CSS" (Autoptimize, WP Rocket, LiteSpeed Cache...),
   file này sẽ bị gộp chung với CSS khác và @import không còn nằm đầu file
   nữa → trình duyệt âm thầm bỏ qua, không tải font, fallback về font hệ
   thống — đúng lỗi "giao diện vẫn là font khác" gặp phải. */

:root {
  /* ── MÀU ĐỎ RƯỢU VANG CHỦ ĐẠO — DUY NHẤT 1 TÔNG (#7A1F1F), mọi sắc đỏ
     khác trong plugin (header, footer, button, card) đều pha từ đúng 1
     gốc màu này. Đổi từ #900000 → #7A1F1F theo brief thương hiệu mới
     07/07/2026 (yêu cầu tối đa 4 màu chính: đỏ rượu vang, vàng đồng,
     nền kem #FFFDF8, chữ phụ #666666). ── */
  --tuvi-primary:       #7A1F1F;
  --tuvi-primary-dark:  #5C1717;
  --tuvi-primary-light: #93302F;
  --tuvi-wine:          #7A1F1F;   /* dùng chung gốc với primary, không còn tông nâu riêng */
  --tuvi-wine-deep:     #4A1212;
  --tuvi-black:         #2E0E0E;  /* đen ánh đỏ rất đậm, chỉ dùng ở rìa ngoài header */
  --tuvi-accent:        #B58A3C;
  --tuvi-gold:          #B58A3C;  /* MÀU NHẤN DUY NHẤT dùng cho mọi viền/điểm nhấn — brief 07/07/2026 */
  --tuvi-gold-light:    #C9A566;
  --tuvi-gold-dim:      #93702F;  /* sắc trầm hơn của cùng tông nhấn */
  --tuvi-gold-title:    #F3D67A;  /* vàng kim sáng riêng cho CHỮ tiêu đề trên dải nền đỏ đô — theo yêu cầu 07/07/2026, tương phản tốt hơn --tuvi-gold trên nền tối */
  --tuvi-gold-shimmer:  linear-gradient(110deg, #93702F 20%, #d3bb8a 38%, #ecdfc4 48%, #d3bb8a 58%, #93702F 76%);
  --tuvi-bg:            #FFFDF8;  /* màu nền chính thức theo brief 07/07/2026 */
  --tuvi-card:          #FFFDF8;
  --tuvi-card-glass:    rgba(255,253,248,.62);
  --tuvi-border:        #D8C79B;  /* viền ngoài lá số — theo brief 07/07/2026 */
  --tuvi-border-cell:   #E5D9B8;  /* viền các cung/ô — theo brief 07/07/2026, dùng riêng cho lưới 12 cung */
  --tuvi-text:          #2A1A12;
  --tuvi-text-light:    #4A3428;
  --tuvi-text-muted:    #666666;  /* màu chữ phụ chính thức theo brief 07/07/2026 */
  --tuvi-success:       #1a6b2e;
  --tuvi-radius:        10px;   /* đồng bộ bo góc toàn giao diện: card/input/button đều 10px */
  --tuvi-radius-sm:     10px;
  --tuvi-shadow:        0 2px 18px rgba(96,76,60,.10);
  --tuvi-shadow-lg:     0 8px 40px rgba(74,58,45,.16);
  /* Font DUY NHẤT toàn hệ thống theo brief 07/07/2026 (Be Vietnam Pro) —
     bỏ font serif (Cormorant Garamond) trước đây dùng riêng cho tiêu đề/
     nhãn, để đồng bộ tuyệt đối, tránh cảm giác "nhiều font". */
  --tuvi-font:          'Be Vietnam Pro', 'Inter', 'Segoe UI', Arial, sans-serif;
  --tuvi-font-serif:    'Cormorant Garamond', 'Be Vietnam Pro', 'Inter', 'Segoe UI', Arial, sans-serif;
  --tuvi-font-title:    'Cormorant Garamond', 'Be Vietnam Pro', 'Inter', 'Segoe UI', Arial, sans-serif;  /* Bộ font chính thức 07/07/2026: Tiêu đề = Cormorant Garamond SemiBold (600), Nội dung = Be Vietnam Pro */
  --tuvi-font-title-weight: 600; /* SemiBold — dùng riêng ở mọi nơi set --tuvi-font-title để không lẫn với các mức đậm khác (700 body) */
  --tuvi-font-label:    'Be Vietnam Pro', 'Inter', 'Segoe UI', Arial, sans-serif;
  /* Font RIÊNG cho tên sao trong lá số (Chính Tinh + Phụ Tinh) — thêm
     10/07/2026 theo yêu cầu chủ dự án: Noto Sans Condensed có bề ngang
     glyph hẹp hơn Be Vietnam Pro ~10-15%, cùng họ Noto với "Noto Serif SC"
     (Hán tự) đã dùng sẵn trong lá số → tên sao khít hơn, đỡ bị ellipsis,
     mà vẫn cùng "gu" font với phần chữ Hán trong cùng khối chart. */
  --tuvi-font-star:     'Noto Sans Condensed', 'Be Vietnam Pro', 'Inter', 'Segoe UI', Arial, sans-serif;
  --tuvi-placeholder-color: #8B7C6E;  /* đậm hơn bản cũ (#B5A79A) để dễ đọc hơn */
  --tuvi-transition:    all .28s cubic-bezier(.4,0,.2,1);

  /* ── MÀU NGŨ HÀNH CHO TÊN SAO trên bảng 12 cung — tone "dark pastel"
     chủ dự án cung cấp (đỡ chói mắt hơn màu gốc/nguyên bản), dùng cho
     nền lá số SÁNG (mặc định). Ghi đè riêng cho .tuvi-dark bên dưới. ── */
  --tuvi-nh-kim:  #555555;  /* Kim: xám đậm (nền sáng) */
  --tuvi-nh-moc:  #1E824C;  /* Mộc: xanh lục đậm */
  --tuvi-nh-thuy: #000000;  /* Thủy: đen (theo yêu cầu 09/07/2026) */
  --tuvi-nh-hoa:  #C0392B;  /* Hỏa: đỏ đô */
  --tuvi-nh-tho:  #A0522D;  /* Thổ: nâu sáng */

  /* ── MÀU Ô NHẬP LIỆU — tăng tương phản so với nền tổng thể (#F3EBDD):
     nền ô sáng trắng tinh, viền vàng kim đậm hơn 1 chút để nổi rõ. ── */
  --tuvi-input-bg:        #FFFCF3;  /* kem trắng nhẹ thay vì trắng tinh */
  --tuvi-input-bg-focus:  #FFFEF9;
  --tuvi-input-border:    #93702F;  /* tông vàng đồng đậm (gold-dim), đồng bộ brief 07/07/2026 */
  --tuvi-input-text:      #2a1414;
  /* Chiều cao chuẩn dùng chung cho MỌI ô/nút trên 1 hàng form
     (input, select, nút Nam/Nữ, nút Dương/Âm lịch) để không lệch cao. */
  --tuvi-control-h:       44px;

  /* ── MÀU BÁO LỖI Ô NHẬP — đồng bộ theo màu chủ đạo ── */
  --tuvi-error:           #7A1F1F;
  --tuvi-error-bg:        #f7e9e6;
  --tuvi-error-border:    #93302F;

  /* ── TYPE SCALE CHUẨN — dùng xuyên suốt, không tạo cỡ chữ lẻ tẻ khác ──
     xs=11  sm=12  base=13  md=14  lg=15  xl=16  2xl=18  3xl=20  4xl=24  5xl=28 */
  --tuvi-text-xs:   11px;
  --tuvi-text-sm:   12px;
  --tuvi-text-base: 13px;
  --tuvi-text-md:   14px;
  --tuvi-text-lg:   15px;
  --tuvi-text-xl:   16px;
  --tuvi-text-2xl:  18px;
  --tuvi-text-3xl:  20px;
  --tuvi-text-4xl:  24px;
  --tuvi-text-5xl:  28px;
  --tuvi-leading:   1.65;
}

/* Base reset: đảm bảo mọi phần tử trong plugin kế thừa cùng 1 font-family
   và line-height, tránh trường hợp theme của site đè font khác lên từng
   thẻ con (input, button, select thường không tự kế thừa font cha). */
.tuvi-wrapper,
.tuvi-wrapper input,
.tuvi-wrapper select,
.tuvi-wrapper textarea,
.tuvi-wrapper button {
  font-family: var(--tuvi-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Icon SVG (thay thế emoji): tự co theo font-size của khung chứa,
   màu theo currentColor — kế thừa toàn bộ rule cỡ/màu đã có sẵn ── */
.tuvi-icon-svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.14em;
  flex-shrink: 0;
}

/* ── Glassmorphism: thẻ kính mờ cao cấp dùng chung cho card/modal ── */
.tuvi-glass {
  background: var(--tuvi-card-glass);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(212,175,55,.28);
}

/* ── Ánh kim chạy (shimmer) cho viền/chữ cao cấp ── */
@keyframes tuvi-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.tuvi-shimmer-text {
  background-image: var(--tuvi-gold-shimmer);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tuvi-shimmer 5s linear infinite;
}

/* ── Họa tiết Á Đông dùng chung: bát quái + chòm sao + mây cổ + trống đồng ── */
.tuvi-pattern-bagua::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='rgba(212,175,55,.16)' stroke-width='1'%3E%3Ccircle cx='100' cy='100' r='90'/%3E%3Cline x1='100' y1='10' x2='100' y2='190'/%3E%3Cline x1='10' y1='100' x2='190' y2='100'/%3E%3Cline x1='36' y1='36' x2='164' y2='164'/%3E%3Cline x1='164' y1='36' x2='36' y2='164'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 280px 280px;
  background-repeat: no-repeat;
  background-position: center -40px;
}

.tuvi-pattern-stars::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .8;
  background-image:
    radial-gradient(rgba(212,175,55,.55) 1px, transparent 1.4px),
    radial-gradient(rgba(212,175,55,.35) 1px, transparent 1.4px);
  background-size: 90px 90px, 140px 140px;
  background-position: 0 0, 45px 60px;
}

.tuvi-pattern-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='90' viewBox='0 0 160 90'%3E%3Cg fill='none' stroke='%23e8c060' stroke-width='1.2'%3E%3Cpath d='M10 60c6-14 22-14 28-2 4-10 18-10 22 0 4-12 20-12 24-1 5-9 18-8 21 2'/%3E%3Cpath d='M50 30c5-11 18-11 22-1 3-8 14-8 17 0 3-9 15-9 18-1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 90px;
  background-repeat: repeat;
}

.tuvi-pattern-drum::after {
  content: '';
  position: absolute;
  pointer-events: none;
  width: 240px;
  height: 240px;
  opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23e8c060' stroke-width='1.4'%3E%3Ccircle cx='100' cy='100' r='95'/%3E%3Ccircle cx='100' cy='100' r='74'/%3E%3Ccircle cx='100' cy='100' r='53'/%3E%3Ccircle cx='100' cy='100' r='32'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
}

/* ── WRAPPER ── */
.tuvi-wrapper {
  font-family: var(--tuvi-font);
  background: var(--tuvi-bg);
  color: var(--tuvi-text);
  max-width: 820px;
  margin: 0 auto;
  border-radius: var(--tuvi-radius);
  overflow: hidden;
  box-shadow: var(--tuvi-shadow-lg);
  border: 1px solid var(--tuvi-border);
  position: relative;
}

/* Đã bỏ hoa văn hồi văn dạng ô vuông lặp lại toàn khung (trước đây là
   .tuvi-wrapper::before) — hiệu ứng này lộ thành các ô vuông mờ trên nền
   sáng (đặc biệt sau đoạn giới thiệu), gây rối mắt. Giữ lại watermark
   rồng-mây (::after) vì nó là 1 hình duy nhất, mờ, không tạo cảm giác kẻ ô. */


/* Ấn triện rồng-mây vàng — đặt giữa khung, làm watermark rất mờ để không
   che chữ, gợi cảm giác trang trọng cổ điển. */
.tuvi-wrapper::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(560px, 78%);
  height: min(560px, 78%);
  transform: translate(-50%, -50%);
  background-image: url("../img/watermark-motif.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}

/* Cụm hoa mẫu đơn vàng — điểm nhấn ở 2 góc chéo của khung, nhỏ và mờ nhẹ
   để không cạnh tranh với hồi văn/hoa văn bát quái hiện có. */
.tuvi-wrapper .tuvi-corner-ornament {
  position: absolute;
  width: 120px;
  height: auto;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
.tuvi-wrapper .tuvi-corner-ornament--tr {
  top: 14px;
  right: 14px;
}

.tuvi-wrapper > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════
   HEADER – Bìa huyền bí
   ═══════════════════════════════════ */
.tuvi-header {
  background: linear-gradient(160deg, var(--tuvi-black) 0%, var(--tuvi-wine-deep) 22%, var(--tuvi-primary-dark) 58%, var(--tuvi-primary) 100%);
  box-sizing: border-box;
  padding: 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 22px;
}



.tuvi-header.tuvi-pattern-stars::before { opacity: .5; }

/* Nền ngũ hành + thiên văn mờ — đã bỏ 2 quầng màu cam/xanh lá lạc tông,
   chỉ giữ ánh vàng kim + thêm 1 dải sheen chéo tạo cảm giác lụa cao cấp. */
.tuvi-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,175,55,.16) 0%, transparent 70%),
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 45%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='92' fill='none' stroke='rgba(212,175,55,.4)' stroke-width='1.5'/%3E%3Cpath d='M100,8 A92,92 0 0,1 100,192 A46,46 0 0,1 100,100 A46,46 0 0,0 100,8 Z' fill='rgba(212,175,55,.08)'/%3E%3Ccircle cx='100' cy='54' r='9' fill='rgba(212,175,55,.10)'/%3E%3Ccircle cx='100' cy='146' r='9' fill='rgba(15,10,8,.10)'/%3E%3C/svg%3E");
  background-size: auto, auto, 240px 240px;
  background-position: 0 0, 0 0, center -20px;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Ảnh rồng vàng + hoa văn mây đỏ góc — thay cho họa tiết la bàn cũ,
   phủ toàn bộ banner chính, canh giữa, tự co giãn theo khung PC/mobile */
.tuvi-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("../img/banner-art.png") center/cover no-repeat;
  opacity: .95;
  pointer-events: none;
}

/* 12 con giáp SVG biểu tượng vòng tròn */
.tuvi-zodiac-ring {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  pointer-events: none;
}

.tuvi-zodiac-symbol {
  position: absolute;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tuvi-text-md);
  color: rgba(212,175,55,.55);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
}

/* Ngũ hành dots trang trí — đã loại bỏ khỏi HTML, giữ lại để tương thích nếu theme tuỳ biến gọi tới */
.tuvi-wuxing-dots { display: none; }

/* .tuvi-header-ornament đã được gỡ bỏ khỏi banner chính theo yêu cầu */

.tuvi-title {
  font-family: var(--tuvi-font-title) !important;
  font-weight: var(--tuvi-font-title-weight) !important;
  font-size: clamp(24px, 4.2vw, 38px);
  font-weight: 600;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: 1px;
  text-shadow: 0 2px 12px rgba(0,0,0,.4), 0 0 30px rgba(212,175,55,.3);
  position: relative;
  z-index: 2;
}

.tuvi-title.tuvi-shimmer-text { text-shadow: none; }

/* Đường trang trí vàng */
.tuvi-title-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin: 4px 0 8px;
  position: relative;
  z-index: 2;
}

.tuvi-title-divider::before,
.tuvi-title-divider::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.6));
}

.tuvi-title-divider::after {
  background: linear-gradient(90deg, rgba(212,175,55,.6), transparent);
}

.tuvi-title-divider span {
  width: 7px;
  height: 7px;
  background: var(--tuvi-gold);
  transform: rotate(45deg);
  opacity: .9;
  flex-shrink: 0;
}

.tuvi-subtitle {
  font-family: var(--tuvi-font-label);
  font-size: calc(var(--tuvi-text-md) + 2px);
  color: rgba(255,230,180,.88);
  margin: 0;
  font-weight: 500;
  letter-spacing: .3px;
  position: relative;
  z-index: 2;
  font-style: italic;
}

/* ── Ngũ hành banner dưới header ── */
.tuvi-wuxing-banner {
  display: flex;
  background: linear-gradient(90deg, #0e0708, #1a0d0f, #0e0708);
  border-top: 1px solid rgba(212,175,55,.25);
  border-bottom: 1px solid rgba(212,175,55,.2);
}

.tuvi-wuxing-item {
  flex: 1;
  text-align: center;
  padding: 7px 4px;
  font-size: var(--tuvi-text-xs);
  font-weight: 600;
  letter-spacing: .5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.tuvi-wuxing-item:not(:last-child) {
  border-right: 1px solid rgba(212,175,55,.15);
}

.tuvi-wuxing-item .wx-name { display: none; }

.tuvi-wuxing-item .wx-symbol {
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  font-family: "Noto Serif SC", "Songti SC", "SimSun", "STSong", serif;
  text-shadow: 0 0 10px currentColor;
  opacity: .95;
}

.tuvi-wuxing-item.wx-thuy  { color: #7ab0e8; }
.tuvi-wuxing-item.wx-moc   { color: #7ec87a; }
.tuvi-wuxing-item.wx-hoa   { color: #e87070; }
.tuvi-wuxing-item.wx-tho   { color: #d4a858; }
.tuvi-wuxing-item.wx-kim   { color: #c8c8d8; }


/* ── GIỚI THIỆU HỆ THỐNG ── */
.tuvi-intro {
  padding: 16px 24px 4px;
  text-align: center;
}
.tuvi-intro p {
  font-size: var(--tuvi-text-sm);
  line-height: 1.7;
  color: var(--tuvi-text-muted);
  margin: 0 0 8px;
}
.tuvi-intro p:last-child { margin-bottom: 0; font-style: italic; }

/* ── FORM SECTION ── */
.tuvi-form-section { padding: 26px 22px 0; }

.tuvi-form-card {
  background: var(--tuvi-card); /* nền kem/ngà riêng biệt, tách khỏi nền ngoài */
  border: 1px solid var(--tuvi-border); /* viền vàng rõ ràng, đủ tương phản với nền */
  border-radius: var(--tuvi-radius);
  padding: 28px;
  box-shadow: var(--tuvi-shadow-lg), 0 0 0 1px rgba(201,169,106,.14) inset;
  position: relative;
  transition: var(--tuvi-transition);
}
.tuvi-form-card.tuvi-glass { box-shadow: var(--tuvi-shadow-lg), 0 0 0 1px rgba(212,175,55,.08) inset; }

/* Góc trang trí — hoa văn hồi văn nhỏ thay cho icon */
.tuvi-form-card::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 16px;
  width: 26px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23900000' stroke-width='1.3' opacity='0.16'%3E%3Crect x='2' y='2' width='22' height='22'/%3E%3Crect x='7' y='7' width='12' height='12'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}

.tuvi-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
  row-gap: 30px; /* tăng thêm khoảng cách giữa các nhóm trường để thoáng hơn */
}

.tuvi-field-full { grid-column: 1 / -1; }

.tuvi-dob-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px 22px;
}
@media (max-width: 580px) {
  .tuvi-dob-grid { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
}

/* ── LABELS & INPUTS ── */
.tuvi-label {
  display: block;
  font-family: var(--tuvi-font);
  font-size: calc(var(--tuvi-text-md) - 1px);
  font-weight: 700; /* đậm hơn 1 bậc để tách rõ label/tiêu đề khỏi nội dung ô nhập */
  color: #3A2418;
  margin-bottom: 7px;
  letter-spacing: .2px;
  text-transform: none;
  line-height: 1.3;
}

.tuvi-optional {
  font-weight: 400;
  color: var(--tuvi-text-muted);
  font-size: var(--tuvi-text-sm);
  text-transform: none;
}

.tuvi-input:disabled,
.tuvi-input[disabled] {
  background: rgba(0,0,0,.025);
  color: var(--tuvi-text-muted);
  cursor: not-allowed;
  opacity: .7;
}

#tuvi-cauhoi-wrap {
  margin-top: 14px;
}

.tuvi-cauhoi-note {
  margin: 6px 2px 0;
  font-size: var(--tuvi-text-base);
  color: var(--tuvi-text-light);
  background: rgba(212,175,55,.08);
  border: 1px dashed rgba(212,175,55,.4);
  border-radius: 8px;
  padding: 7px 10px;
  line-height: 1.55;
}

/* Tầng 3 — banner cảnh báo lệch phạm vi câu hỏi riêng vs mục đã chọn.
   Cố ý dùng tông AMBER (khác gold trung tính của .tuvi-cauhoi-note ở
   trên) để phân biệt rõ đây là 1 cảnh báo cần khách chú ý, không phải
   ghi chú thông thường. */
.tuvi-cauhoi-mismatch {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 2px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(217,119,6,.08);
  border: 1.5px solid rgba(217,119,6,.35);
  animation: tuviMismatchIn .25s ease;
}
.tuvi-cauhoi-mismatch-icon {
  font-size: 16px;
  line-height: 1.5;
  color: #b45309;
  flex-shrink: 0;
}
.tuvi-cauhoi-mismatch-text {
  flex: 1 1 auto;
  min-width: 180px;
  font-size: var(--tuvi-text-base);
  color: var(--tuvi-text-light);
  line-height: 1.5;
}
.tuvi-cauhoi-mismatch-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  width: 100%;
}
.tuvi-btn-mismatch-switch,
.tuvi-btn-mismatch-dismiss {
  border-radius: var(--tuvi-radius-sm);
  padding: 8px 14px;
  font-size: var(--tuvi-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: var(--tuvi-transition);
  white-space: nowrap;
}
.tuvi-btn-mismatch-switch {
  border: none;
  color: #fff;
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
}
.tuvi-btn-mismatch-switch:hover { filter: brightness(1.08); }
.tuvi-btn-mismatch-dismiss {
  border: 1px solid rgba(0,0,0,.15);
  background: transparent;
  color: var(--tuvi-text-light);
}
.tuvi-btn-mismatch-dismiss:hover { background: rgba(0,0,0,.04); }
.tuvi-dark .tuvi-cauhoi-mismatch { background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.4); }
.tuvi-dark .tuvi-cauhoi-mismatch-text { color: rgba(255,255,255,.75); }
.tuvi-dark .tuvi-btn-mismatch-dismiss { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.75); }
@keyframes tuviMismatchIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  .tuvi-cauhoi-mismatch { flex-wrap: wrap; }
  .tuvi-btn-mismatch-switch,
  .tuvi-btn-mismatch-dismiss { flex: 1 1 auto; text-align: center; }
}

.tuvi-input,
.tuvi-select {
  width: 100% !important;
  padding: 10px 14px !important;
  min-height: var(--tuvi-control-h) !important;
  height: auto !important;
  box-sizing: border-box !important;
  border: 1.5px solid var(--tuvi-input-border) !important;
  border-radius: var(--tuvi-radius-sm) !important;
  font-size: var(--tuvi-text-md) !important;
  font-family: var(--tuvi-font) !important;
  font-weight: 400 !important;
  color: var(--tuvi-input-text) !important;
  background: var(--tuvi-input-bg) !important;
  background-image: none !important;
  text-transform: none !important;
  transition: var(--tuvi-transition);
  outline: none;
  line-height: 1.45 !important;
  vertical-align: middle !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: inset 0 1px 3px rgba(96,76,52,.07);
}

/* Riêng input[type="text"] (VD: ô "Họ và tên") — theme WordPress thường có
   sẵn rule mặc định cho input[type="text"] với padding/line-height khác,
   selector này đặc hiệu hơn ".tuvi-input" đơn thuần nên có thể thắng và làm
   chữ bị dồn/sát lên mép trên, lệch so với các ô number khác. Khoá cứng lại
   ở đây để input text luôn đồng bộ 100% với mọi ô nhập liệu khác. */
input[type="text"].tuvi-input,
input[type="email"].tuvi-input,
input[type="tel"].tuvi-input {
  padding: 10px 14px !important;
  min-height: var(--tuvi-control-h) !important;
  line-height: 1.45 !important;
  box-sizing: border-box !important;
}

.tuvi-input:focus,
.tuvi-select:focus {
  border-color: var(--tuvi-gold) !important;
  background: var(--tuvi-input-bg-focus) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,.18);
}

/* Khoá cứng màu + kiểu chữ của placeholder — tránh theme WordPress đè
   text-transform:uppercase hoặc màu chữ đậm khiến placeholder trông
   như đã có sẵn dữ liệu thật, gây hiểu nhầm và bỏ sót nhập liệu. */
.tuvi-input::placeholder,
.tuvi-input::-webkit-input-placeholder,
.tuvi-input::-moz-placeholder,
.tuvi-input:-ms-input-placeholder {
  color: var(--tuvi-placeholder-color) !important;
  text-transform: none !important;
  font-size: var(--tuvi-text-md) !important;
  font-family: var(--tuvi-font) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
.tuvi-select {
  text-transform: none !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}


/* ── CHỐT CHẶN CUỐI CÙNG CHỮ HOA ──
   Đã có !important ở trên nhưng nếu theme WordPress dùng chuỗi selector
   dài hơn (vd: body.theme-x .site-content input {text-transform:uppercase
   !important}) thì độ đặc hiệu của theme vẫn có thể thắng dù cùng có
   !important. Khối này dùng 1 chuỗi selector cố tình dài + lặp lại để
   chắc chắn thắng mọi trường hợp, đảm bảo chữ trong ô nhập và placeholder
   luôn hiển thị đúng chữ thường/hoa như đã gõ, không tự động viết hoa. */
html body .tuvi-wrapper .tuvi-form-card .tuvi-input,
html body .tuvi-wrapper .tuvi-form-card .tuvi-select,
html body .tuvi-wrapper .tuvi-extra-wrap .tuvi-input,
html body .tuvi-wrapper .tuvi-extra-wrap .tuvi-select {
  text-transform: none !important;
  font-weight: 400 !important;
}
html body .tuvi-wrapper .tuvi-form-card .tuvi-input::placeholder,
html body .tuvi-wrapper .tuvi-extra-wrap .tuvi-input::placeholder {
  text-transform: none !important;
  -webkit-text-security: none !important;
  font-weight: 400 !important;
  color: var(--tuvi-placeholder-color) !important;
}

/* ── Ô NHẬP LIỆU BÁO LỖI (inline, ngay tại ô) ──
   Thay cho hộp thông báo lỗi tổng ở cuối form: khi ô nào thiếu / sai dữ
   liệu, viền + nền ô đó chuyển sang tông đỏ chủ đạo và hiện dòng chú
   thích lỗi ngay bên dưới, giúp người dùng biết chính xác cần sửa ở đâu. */
.tuvi-input.tuvi-invalid,
.tuvi-select.tuvi-invalid {
  border-color: var(--tuvi-error-border) !important;
  background: var(--tuvi-error-bg) !important;
  box-shadow: 0 0 0 3px rgba(144,0,0,.08);
}
.tuvi-input.tuvi-invalid:focus,
.tuvi-select.tuvi-invalid:focus {
  border-color: var(--tuvi-error) !important;
  background: var(--tuvi-input-bg-focus) !important;
}
.tuvi-field-hint {
  margin: 6px 0 0;
  font-size: var(--tuvi-text-sm);
  color: var(--tuvi-text-muted, #8a8a8a);
  line-height: 1.4;
}
.tuvi-consent-field {
  margin: 14px 0 4px;
  text-align: center;
}
.tuvi-consent-label {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--tuvi-text-sm);
  line-height: 1.5;
  color: var(--tuvi-text, #333);
  text-align: left;
}
.tuvi-disclaimer-row {
  text-align: center;
}
.tuvi-disclaimer {
  margin: 10px 0 0;
  font-size: var(--tuvi-text-sm);
  line-height: 1.5;
  color: var(--tuvi-text-muted, #8a8a8a);
  text-align: center;
}
.tuvi-disclaimer a {
  color: var(--tuvi-primary, #900);
  text-decoration: underline;
}
.tuvi-disclaimer a:hover {
  text-decoration: none;
}
.tuvi-consent-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--tuvi-primary, #900);
}
.tuvi-consent-label a {
  color: var(--tuvi-primary, #900);
  text-decoration: underline;
}
.tuvi-consent-label a:hover {
  text-decoration: none;
}
.tuvi-consent-field.tuvi-field-has-error .tuvi-consent-label {
  color: var(--tuvi-error);
}
.tuvi-consent-field.tuvi-field-has-error input[type="checkbox"] {
  outline: 2px solid var(--tuvi-error);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Kiểu 2 — khung cuộn nhúng của checkbox đồng ý chính sách */
.tuvi-consent-scrollbox-wrap {
  margin-bottom: 10px;
}
.tuvi-consent-scrollbox {
  overflow-y: auto;
  border: 1px solid var(--tuvi-input-border, var(--tuvi-border));
  border-radius: var(--tuvi-radius-sm, 8px);
  background: var(--tuvi-input-bg, #fff);
  padding: 14px 16px;
  font-size: var(--tuvi-text-sm);
  line-height: 1.6;
  color: var(--tuvi-text, #333);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .04);
  /* KHÔNG dùng scroll-behavior:smooth ở đây — với nội dung dài, mỗi tích
     lăn chuột sẽ bị trình duyệt tự chèn animation, cộng dồn lại thành
     cảm giác cuộn ì/chậm. Cuộn tay để tự nhiên, chỉ animate khi bấm nút
     "Cuộn xuống cuối" (xử lý riêng bằng JS, xem tuvi-consent.js). */
}
.tuvi-consent-scrollbox p:first-child { margin-top: 0; }
.tuvi-consent-scrollbox p:last-child { margin-bottom: 0; }
.tuvi-consent-scrollbox:focus {
  outline: none;
  border-color: var(--tuvi-primary, #900);
  box-shadow: 0 0 0 3px rgba(144, 0, 0, .08), inset 0 2px 6px rgba(0, 0, 0, .04);
}
.tuvi-consent-progress-track {
  height: 3px;
  background: var(--tuvi-border, #e5e5e5);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.tuvi-consent-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--tuvi-primary, #900);
  border-radius: 2px;
  transition: width .12s linear;
}
.tuvi-consent-scroll-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.tuvi-consent-scroll-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--tuvi-text-sm);
  color: var(--tuvi-text-muted, #8a8a8a);
  transition: opacity .2s ease;
}
.tuvi-consent-scroll-arrow {
  display: inline-block;
  animation: tuvi-consent-arrow-bounce 1.2s ease-in-out infinite;
}
@keyframes tuvi-consent-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
.tuvi-consent-jump-btn {
  flex-shrink: 0;
  border: 1px solid var(--tuvi-input-border, var(--tuvi-border));
  background: #fff;
  color: var(--tuvi-primary, #900);
  font-size: var(--tuvi-text-sm);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--tuvi-radius-sm, 6px);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.tuvi-consent-jump-btn:hover {
  background: var(--tuvi-primary, #900);
  border-color: var(--tuvi-primary, #900);
  color: #fff;
}
.tuvi-consent-scrollbox-wrap.tuvi-consent-scrolled .tuvi-consent-scroll-hint,
.tuvi-consent-scrollbox-wrap.tuvi-consent-scrolled .tuvi-consent-jump-btn {
  opacity: 0;
  pointer-events: none;
}
.tuvi-consent-label-locked input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .4;
}
.tuvi-consent-label-locked.tuvi-consent-unlocked input[type="checkbox"] {
  opacity: 1;
  cursor: pointer;
}
.tuvi-consent-label-locked.tuvi-consent-unlocked {
  animation: tuvi-consent-unlock-pulse .4s ease;
}
@keyframes tuvi-consent-unlock-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.015); }
  100% { transform: scale(1); }
}
.tuvi-field-error-msg {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: var(--tuvi-text-sm);
  font-weight: 500;
  color: var(--tuvi-error);
  line-height: 1.4;
}
.tuvi-field-error-msg::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tuvi-error);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
.tuvi-field.tuvi-field-has-error .tuvi-label { color: var(--tuvi-error); }

/* ── TIME GROUP ── */
.tuvi-time-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tuvi-time-part { flex: 1; text-align: center; }

.tuvi-time-sep {
  font-weight: 600;
  font-size: var(--tuvi-text-2xl);
  color: var(--tuvi-primary);
}

/* ── GENDER BUTTONS ──
   Đồng bộ font-size, padding, line-height với .tuvi-input/.tuvi-select
   để chiều cao và cỡ chữ của mọi ô/nút chọn trên cùng 1 hàng bằng nhau
   tuyệt đối, không lệch dù là input, select hay button. */
.tuvi-gender-group { display: flex; gap: 10px; }

.tuvi-gender-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  min-height: var(--tuvi-control-h);
  box-sizing: border-box;
  border: 1.5px solid var(--tuvi-input-border) !important;
  border-radius: var(--tuvi-radius-sm);
  cursor: pointer;
  transition: var(--tuvi-transition);
  font-family: var(--tuvi-font);
  font-size: var(--tuvi-text-md) !important;
  font-weight: 500 !important;
  line-height: 1.45;
  background: var(--tuvi-input-bg) !important;
  color: var(--tuvi-text) !important;
}

/* Vá lỗi #5 (LOW): `:has()` không được 1 số trình duyệt/WebView rất cũ hỗ
   trợ (Safari <15.4, WebView Android cũ...). `.tuvi-checked-fallback` là
   class JS tự thêm (xem tuviSyncCheckedClassFallback() trong tuvi.js) làm
   lựa chọn thay thế — trên trình duyệt đã hỗ trợ :has(), 2 điều kiện luôn
   khớp cùng lúc nên không đổi gì; trên trình duyệt cũ, class JS là cách
   duy nhất để vẫn hiện đúng trạng thái "đã chọn". */
.tuvi-gender-btn:has(input:checked),
.tuvi-gender-btn.tuvi-checked-fallback {
  background: var(--tuvi-primary) !important;
  border-color: var(--tuvi-primary-dark) !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(144,0,0,.20);
}

.tuvi-gender-btn input { display: none; }

/* ── TOGGLE GROUP ── */
.tuvi-toggle-group {
  display: flex;
  gap: 8px;
  border: none;
  border-radius: var(--tuvi-radius-sm);
  overflow: visible;
}

.tuvi-toggle-btn {
  flex: 1;
  padding: 10px 14px;
  min-height: var(--tuvi-control-h);
  box-sizing: border-box;
  border: 1.5px solid var(--tuvi-input-border) !important;
  border-radius: var(--tuvi-radius-sm);
  background: var(--tuvi-input-bg) !important;
  cursor: pointer;
  font-size: var(--tuvi-text-md) !important;
  font-family: var(--tuvi-font);
  font-weight: 600 !important;
  line-height: 1.45;
  letter-spacing: .2px;
  color: var(--tuvi-text-light) !important;
  transition: var(--tuvi-transition);
}

/* Khoá cứng màu nền/chữ bằng !important để CSS của theme WordPress
   (thường có selector button chung, độ ưu tiên cao hơn) không đè lên,
   gây tình trạng chữ tối màu chìm vào nền đỏ như trước. */
.tuvi-toggle-btn.active {
  background: var(--tuvi-primary) !important;
  border-color: var(--tuvi-primary-dark) !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(144,0,0,.20);
}

/* ── ĐỔI LỊCH ÂM ⇄ DƯƠNG ──
   Đặt cạnh nhãn "Loại lịch" — ngay từ đầu form, để người dùng quy đổi
   ngày sinh trước khi chọn loại lịch/nhập ngày tháng năm. Khoá cứng
   thành 1 nút pill dạng solid, dùng đúng bảng màu vàng đồng của plugin,
   nổi bật rõ hơn bản pill viền mỏng trước đây để không bị chìm cạnh nhãn. */
.tuvi-doi-lich-link {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 6px 13px !important;
  border: 1.5px solid var(--tuvi-gold) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--tuvi-gold) 0%, var(--tuvi-gold-dim) 100%) !important;
  cursor: pointer;
  font-family: var(--tuvi-font);
  font-size: var(--tuvi-text-sm) !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-decoration: none !important;
  text-transform: none !important;
  box-shadow: 0 2px 6px rgba(212,175,55,.35) !important;
  line-height: 1.3;
  transition: var(--tuvi-transition);
}

.tuvi-doi-lich-link svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.tuvi-doi-lich-link:hover {
  background: linear-gradient(135deg, var(--tuvi-gold-dim) 0%, var(--tuvi-primary-dark) 100%) !important;
  border-color: var(--tuvi-primary-dark) !important;
  color: #fff !important;
  box-shadow: 0 3px 9px rgba(144,0,0,.30) !important;
  transform: translateY(-1px);
}

.tuvi-doi-lich-card {
  background: var(--tuvi-card);
  border: 1.5px solid var(--tuvi-border);
  border-radius: var(--tuvi-radius);
  padding: 16px;
  margin-top: 4px;
}

.tuvi-doi-lich-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.tuvi-doi-lich-title {
  font-weight: 600;
  color: var(--tuvi-primary);
  font-size: var(--tuvi-text-lg);
}

.tuvi-doi-lich-close {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--tuvi-text-muted);
  padding: 2px 6px;
}

/* Vá lỗi #4 (MEDIUM): vùng chạm nút "Đổi lịch Âm ⇄ Dương" (~28px cao) và
   nút đóng × (~24×26px) đều nhỏ hơn chuẩn tối thiểu 44×44px (Apple HIG /
   Material Design) cho thao tác chạm — cả 2 được thiết kế nhỏ gọn vì nằm
   cạnh chữ/tiêu đề, không phải nút chính, nên không thể phóng to trực
   tiếp mà không phá layout.

   Cách vá: dùng kỹ thuật "mở rộng vùng chạm vô hình" — thêm 1 pseudo-
   element ::after trong suốt, định vị tuyệt đối và canh giữa đúng tâm
   nút, rộng/cao tối thiểu 44px. Vùng này không có nội dung/màu nên KHÔNG
   đổi giao diện hiển thị dù chỉ 1px, chỉ mở rộng vùng NHẬN sự kiện chạm
   (click trên pseudo-element vẫn tính là click trên nút cha vì đây là
   generated content bên trong nút).

   Chỉ bật trong `@media (pointer: coarse)` — tức chỉ thiết bị cảm ứng
   (điện thoại/tablet). Trên desktop dùng chuột (`pointer: fine`), con
   trỏ đủ chính xác với kích thước nhỏ hiện tại nên giữ nguyên 100%,
   không mở rộng vùng bấm (tránh vô tình bắt nhầm click ở vùng lân cận
   khi rê chuột qua). */
@media (pointer: coarse) {
  .tuvi-doi-lich-link,
  .tuvi-doi-lich-close {
    position: relative;
  }
  .tuvi-doi-lich-link::after,
  .tuvi-doi-lich-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(44px, 100%);
    height: max(44px, 100%);
    transform: translate(-50%, -50%);
  }
}

.tuvi-doi-lich-desc {
  font-size: var(--tuvi-text-sm);
  color: var(--tuvi-text-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}

.tuvi-doi-lich-src { margin-bottom: 12px; }

/* Nút "Quy đổi" — style riêng, không phụ thuộc .button mặc định của theme
   (vốn có thể lệch margin/cỡ chữ khiến khối bên dưới bị đẩy trôi). */
#tuvi-dl-convert {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  min-height: 38px;
  margin: 2px 0 0;
  padding: 0 14px !important;
  border: 1.5px solid var(--tuvi-gold-dim) !important;
  border-radius: var(--tuvi-radius-sm) !important;
  background: linear-gradient(135deg, var(--tuvi-gold) 0%, var(--tuvi-gold-dim) 100%) !important;
  color: #fff !important;
  font-family: var(--tuvi-font);
  font-size: var(--tuvi-text-base) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(212,175,55,.30) !important;
  transition: var(--tuvi-transition);
}

#tuvi-dl-convert:hover,
#tuvi-dl-convert:focus {
  background: linear-gradient(135deg, var(--tuvi-gold-dim) 0%, var(--tuvi-primary-dark) 100%) !important;
  border-color: var(--tuvi-primary-dark) !important;
  color: #fff !important;
}

.tuvi-doi-lich-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 8px;
  margin-bottom: 8px;
}

.tuvi-doi-lich-nhuan {
  display: block;
  font-size: var(--tuvi-text-sm);
  color: var(--tuvi-text-light);
  margin-bottom: 10px;
}

/* Khối kết quả quy đổi — đặt SÁT ngay dưới nút "Quy đổi" (liền mạch, không
   trôi xuống xa), thu nhỏ lại thành 1 ô riêng có viền nổi rõ để tách bạch
   khỏi phần nhập liệu phía trên, tránh loạn thông tin. */
.tuvi-doi-lich-result {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--tuvi-gold-dim);
  border-radius: var(--tuvi-radius-sm);
  background: var(--tuvi-input-bg);
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 1px 4px rgba(144,0,0,.10);
}

.tuvi-doi-lich-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  flex-wrap: nowrap;
}

.tuvi-doi-lich-result-row + .tuvi-doi-lich-result-row {
  margin-top: 2px;
  border-top: 1px dashed var(--tuvi-border);
  padding-top: 8px;
}

.tuvi-doi-lich-result-label {
  flex: 0 0 62px;
  font-size: var(--tuvi-text-xs);
  color: var(--tuvi-text-muted);
  font-weight: 600;
}

.tuvi-doi-lich-result-value {
  flex: 1 1 auto;
  font-size: var(--tuvi-text-base);
  font-weight: 600;
  color: var(--tuvi-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tuvi-doi-lich-result .tuvi-dl-apply-btn {
  flex: 0 0 auto;
  font-size: var(--tuvi-text-xs) !important;
  padding: 3px 9px !important;
}

.tuvi-doi-lich-err {
  margin-top: 10px;
  font-size: var(--tuvi-text-sm);
  color: var(--tuvi-primary);
}

@media (max-width: 480px) {
  .tuvi-doi-lich-grid { grid-template-columns: 1fr 1fr 1fr; }

  /* Mobile: ô kết quả co gọn hơn nữa, nhãn/giá trị/nút xuống dòng
     rõ ràng theo từng dòng riêng thay vì chen chúc ngang màn hình hẹp. */
  .tuvi-doi-lich-result {
    padding: 8px 10px;
  }

  .tuvi-doi-lich-result-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .tuvi-doi-lich-result-label {
    flex-basis: 100%;
  }

  .tuvi-doi-lich-result-value {
    flex-basis: auto;
    white-space: normal;
  }

  .tuvi-doi-lich-result .tuvi-dl-apply-btn {
    margin-left: auto;
  }
}

/* ── REQUEST BUTTONS — dạng ô icon (icon-tile grid) ── */
.tuvi-request-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 18px;
}

.tuvi-request-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  min-height: 128px;
  padding: 18px 10px 14px;
  border: 1.5px solid rgba(212,175,55,.55) !important;
  border-radius: var(--tuvi-radius-sm);
  cursor: pointer;
  transition: var(--tuvi-transition);
  background: linear-gradient(150deg, var(--tuvi-primary-dark) 0%, var(--tuvi-primary) 100%) !important;
  filter: saturate(.96);
  position: relative;
}

.tuvi-request-btn:hover {
  border-color: rgba(233,201,140,.8) !important;
  filter: saturate(1);
  transform: translateY(-1px);
  box-shadow: var(--tuvi-shadow);
}

/* Icon tròn ở giữa ô — viền vàng kim mảnh + nền kính mờ đậm hơn để icon
   nổi rõ trên nền đỏ đô, đồng bộ độ "sáng" với chấm ★/✦ ở góc thay vì
   chỉ có mỗi chấm góc nổi bật còn icon/viền bị chìm nhạt. */
.tuvi-req-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 23px;
  line-height: 1;
  background: rgba(233,201,140,.30) !important;
  border: 1px solid rgba(233,201,140,.55) !important;
  transition: var(--tuvi-transition);
}
.tuvi-request-btn .tuvi-req-icon {
  background: rgba(233,201,140,.46) !important;
  border-color: rgba(243,214,122,.6) !important;
  color: var(--tuvi-gold-title) !important;
  box-shadow: 0 0 0 3px rgba(233,201,140,.10) !important;
}

.tuvi-req-text {
  font-size: 13.5px;
  font-weight: 600 !important;
  line-height: 1.35;
  color: #ffffff !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Ký hiệu Miễn phí / Trả phí ở góc ô — dùng glyph ✦ / ★ thay cho chấm tròn,
   cùng hệ vàng kim/vàng đồng, không dùng màu xanh trong toàn giao diện. */
.tuvi-req-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: auto;
  height: auto;
  flex-shrink: 0;
  line-height: 1;
  font-size: 18px;
}
.tuvi-req-dot.tuvi-dot-paid::before {
  content: "★";
  color: #F3D27A;
  display: inline-block;
  text-shadow: 0 0 6px rgba(243, 210, 122, .85), 0 0 12px rgba(212, 175, 55, .45);
}
.tuvi-req-dot.tuvi-dot-free::before {
  content: "✦";
  color: #D9C08F;
  display: inline-block;
  text-shadow: 0 0 5px rgba(217, 192, 143, .55);
}

.tuvi-req-badge { display: none; } /* đã thay bằng .tuvi-req-dot, giữ để tương thích ngược */

.tuvi-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Trước đây mỗi ô Miễn phí/Trả phí còn có thêm màu nền + viền riêng
   (xanh nhạt / vàng nhạt) — cộng với icon màu và chấm tròn góc, tạo ra 3
   lớp tín hiệu cho cùng 1 ý nghĩa, khiến lưới 12 ô nhìn "nhấp nháy" màu.
   Giờ chỉ giữ ĐÚNG 1 tín hiệu chính (icon màu + chấm nhỏ), nền/viền lúc
   nghỉ dùng chung 1 màu trung tính đồng bộ với các ô nhập liệu khác. */

.tuvi-request-btn:has(input:checked),
.tuvi-request-btn.tuvi-checked-fallback {
  border-color: var(--tuvi-gold-title) !important;
  background: linear-gradient(150deg, var(--tuvi-primary) 0%, var(--tuvi-primary-dark) 100%) !important;
  filter: saturate(1);
  box-shadow: 0 0 0 3px rgba(212,175,55,.35), var(--tuvi-shadow-lg);
}
.tuvi-request-btn:has(input:checked) .tuvi-req-text,
.tuvi-request-btn.tuvi-checked-fallback .tuvi-req-text { color: #ffffff !important; }
.tuvi-request-btn:has(input:checked) .tuvi-req-icon,
.tuvi-request-btn.tuvi-checked-fallback .tuvi-req-icon {
  background: rgba(233,201,140,.58) !important;
  border-color: rgba(243,214,122,.85) !important;
  color: var(--tuvi-gold-title) !important;
  box-shadow: 0 0 0 4px rgba(233,201,140,.16) !important;
}

.tuvi-request-btn input { display: none; }

/* Legend note — thanh chú giải gọn, 1 khối bo tròn duy nhất chứa 2 mục */
.tuvi-cat-note {
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--tuvi-input-bg);
  border: 1px solid var(--tuvi-input-border);
  border-radius: 999px;
  width: fit-content;
}
.tuvi-badge-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1px;
}
.tuvi-legend-free,
.tuvi-legend-paid {
  color: var(--tuvi-primary-dark);
  background: rgba(255,255,255,.06);
}
.tuvi-legend-dot {
  width: auto;
  height: auto;
  display: inline-block;
  flex-shrink: 0;
  line-height: 1;
  font-size: 12px;
}
.tuvi-dot-free::before { content: "✦"; color: #A88C5A; }
.tuvi-dot-paid::before { content: "★"; color: var(--tuvi-gold); }


.tuvi-hidden { display: none; }

/* ── SUBMIT ── */
.tuvi-submit-area {
  margin-top: 36px;
  text-align: center;
}

/* Trên mobile, nút Xem Lá Số dán cố định ở đáy màn hình để người dùng
   không phải cuộn lên/xuống tìm nút sau khi điền xong form dài. */
@media (max-width: 640px) {
  .tuvi-submit-area {
    position: sticky;
    bottom: 0;
    margin: 24px -22px 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(253,246,236,0) 0%, var(--tuvi-card, #f7f1e6) 22%);
    z-index: 5;
  }
  .tuvi-btn-submit { width: 100%; }
  .tuvi-disclaimer { background: var(--tuvi-card, #f7f1e6); padding-top: 4px; }
}

.tuvi-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 70px;
  padding: 22px 60px;
  background: linear-gradient(135deg, var(--tuvi-primary-dark) 0%, var(--tuvi-primary) 100%) !important;
  color: var(--tuvi-gold-light) !important;
  border: 2px solid var(--tuvi-gold) !important;
  border-radius: var(--tuvi-radius-sm);
  font-size: calc(var(--tuvi-text-xl) + 2px);
  font-family: var(--tuvi-font);
  font-weight: 800 !important;
  cursor: pointer;
  transition: var(--tuvi-transition);
  letter-spacing: 1px;
  box-shadow: 0 10px 28px rgba(101,0,0,.45), 0 0 0 1px rgba(212,175,55,.3);
  position: relative;
  overflow: hidden;
}

.tuvi-btn-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}

.tuvi-btn-submit:hover::before { transform: translateX(100%); }

.tuvi-btn-submit:hover {
  color: #fff !important;
  border-color: rgba(212,175,55,.85) !important;
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 16px 36px rgba(101,0,0,.5), 0 0 0 1px rgba(212,175,55,.4);
}

.tuvi-btn-submit:active { transform: translateY(0); }

.tuvi-disclaimer {
  font-size: var(--tuvi-text-sm);
  color: var(--tuvi-text-muted);
  margin: 12px 0 0;
  line-height: 1.6;
}

/* ── DÒNG CAM KẾT TIN CẬY — phía trên nút xem lá số ── */
.tuvi-trust-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 16px 0 16px !important;
  padding: 14px 16px !important;
  background: rgba(212,175,55,.07);
  border: 1px solid rgba(212,175,55,.25);
  border-radius: var(--tuvi-radius-sm);
  list-style: none !important;
}
.tuvi-trust-badges li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--tuvi-text-sm);
  font-weight: 500;
  color: var(--tuvi-text-light);
  line-height: 1.45;
  text-align: center;
  margin: 0 !important;
  padding: 0 !important;
}
.tuvi-trust-badges .tuvi-trust-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--tuvi-gold);
}
@media (min-width: 640px) {
  .tuvi-trust-badges {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
  }
}

@keyframes tuvi-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.tuvi-wrapper #tuvi-result.tuvi-visible,
.tuvi-wrapper #tuvi-loading.tuvi-visible { animation: tuvi-fade-up .42s cubic-bezier(.4,0,.2,1); }

/* ── LOADING ── */
.tuvi-loading {
  padding: 56px 20px;
  text-align: center;
  background: linear-gradient(180deg, var(--tuvi-bg), #fff);
}

.tuvi-loading-inner { display: inline-block; }

.tuvi-spinner {
  width: 58px;
  height: 58px;
  margin: 0 auto 20px;
  position: relative;
  background: transparent;
}

.tuvi-yinyang {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

.tuvi-yinyang-rotor {
  transform-origin: 50px 50px;
  animation: tuvi-spin 1.6s linear infinite;
}

@keyframes tuvi-spin { to { transform: rotate(360deg); } }

.tuvi-loading-text {
  font-size: var(--tuvi-text-lg);
  color: var(--tuvi-text-light);
  font-weight: 500;
}

.tuvi-loading-dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }

.tuvi-loading-dots span {
  width: 8px;
  height: 8px;
  background: var(--tuvi-primary);
  border-radius: 50%;
  opacity: .3;
  animation: tuvi-pulse 1.4s ease-in-out infinite;
}

.tuvi-loading-dots span:nth-child(2) { animation-delay: .2s; }
.tuvi-loading-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes tuvi-pulse { 0%,80%,100% { opacity:.3; transform:scale(.85); } 40% { opacity:1; transform:scale(1); } }

/* ── THANH TIẾN TRÌNH (5.2) ── */
.tuvi-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.tuvi-progress-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(144,0,0,.08);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.tuvi-progress-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--tuvi-wine), var(--tuvi-primary), var(--tuvi-gold-light));
  background-size: 200% 100%;
  animation: tuvi-shimmer 2.4s linear infinite;
  transition: width .25s ease;
}
.tuvi-progress-pct {
  font-size: var(--tuvi-text-sm);
  font-weight: 600;
  color: var(--tuvi-primary);
  min-width: 36px;
  text-align: right;
}

/* Dòng nhắc "đừng thoát trang" — đặt ngay dưới thanh tiến trình.
   Kích thước nằm GIỮA .tuvi-progress-pct (text-sm) và .tuvi-loading-step
   (text-xs) để phân cấp rõ ràng: dòng chính > % tiến trình > dòng nhắc >
   các bước nhỏ. Dùng chung font-family kế thừa từ .tuvi-wrapper, không
   khai báo riêng, để tự động đồng bộ nếu theme/site đổi font gốc. */
.tuvi-loading-notice {
  font-size: var(--tuvi-text-xs);
  color: var(--tuvi-text-muted);
  font-style: italic;
  font-weight: 400;
  margin: 10px 0 0;
  line-height: 1.5;
}

.tuvi-loading-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}
.tuvi-loading-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--tuvi-text-xs);
  color: var(--tuvi-text-muted);
  transition: var(--tuvi-transition);
}
.tuvi-loading-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d9c9ba;
  transition: var(--tuvi-transition);
  flex-shrink: 0;
}
.tuvi-loading-step.tuvi-step-active {
  color: var(--tuvi-primary);
  font-weight: 600;
}
.tuvi-loading-step.tuvi-step-active .tuvi-loading-step-dot {
  background: var(--tuvi-primary);
  box-shadow: 0 0 0 3px rgba(144,0,0,.14);
  animation: tuvi-blink 1.2s ease-in-out infinite;
}
.tuvi-loading-step.tuvi-step-done {
  color: var(--tuvi-gold-dim);
}
.tuvi-loading-step.tuvi-step-done .tuvi-loading-step-dot {
  background: linear-gradient(135deg, var(--tuvi-gold-dim), var(--tuvi-gold-light));
}

/* ── RESULT ── */
.tuvi-result-section {
  padding: 22px 22px 0;
}

.tuvi-result-header {
  background: linear-gradient(135deg, var(--tuvi-primary-dark), var(--tuvi-primary));
  border-radius: var(--tuvi-radius) var(--tuvi-radius) 0 0;
  padding: 18px 22px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tuvi-result-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(212,175,55,.2) 0%, transparent 70%);
}

.tuvi-result-badge {
  display: inline-block;
  background: rgba(212,175,55,.2);
  border: 1px solid rgba(212,175,55,.45);
  color: var(--tuvi-gold-light);
  font-size: var(--tuvi-text-xs);
  font-weight: 600;
  letter-spacing: 2px;
  padding: 3px 14px;
  border-radius: 20px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.tuvi-result-name {
  font-family: var(--tuvi-font-title) !important;
  font-weight: var(--tuvi-font-title-weight) !important;
  font-size: var(--tuvi-text-4xl);
  font-weight: 600;
  color: #fff;
  margin: 0 0 6px;
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
}

.tuvi-result-meta {
  font-size: var(--tuvi-text-base);
  color: rgba(255,220,180,.8);
}

.tuvi-result-body {
  background: var(--tuvi-card);
  border: 1px solid var(--tuvi-border);
  border-top: none;
  border-radius: 0 0 var(--tuvi-radius) var(--tuvi-radius);
  padding: 28px 28px;
  line-height: 1.78;
  font-size: var(--tuvi-text-lg);
  color: var(--tuvi-text);
}

/* Kết quả rich text */
.tuvi-result-body h1 { font-family: var(--tuvi-font-title) !important;
  font-weight: var(--tuvi-font-title-weight) !important; font-size: 1.5em; color: var(--tuvi-primary); margin: 1.2em 0 .5em; border-bottom: 2px solid rgba(123,30,58,.18); padding-bottom: 6px; }
.tuvi-result-body h2 { font-family: var(--tuvi-font-title) !important;
  font-weight: var(--tuvi-font-title-weight) !important; font-size: 1.25em; color: var(--tuvi-primary-dark); margin: 1.1em 0 .45em; }
.tuvi-result-body h3 { font-family: var(--tuvi-font-title) !important;
  font-weight: var(--tuvi-font-title-weight) !important; font-size: 1.1em; color: var(--tuvi-accent); margin: 1em 0 .4em; }
.tuvi-result-body h4 { font-size: 1em; color: var(--tuvi-text-light); margin: .8em 0 .3em; }
.tuvi-result-body p  { margin: 0 0 .75em; }
.tuvi-result-body ul,.tuvi-result-body ol { padding-left: 1.4em; margin: .5em 0 .8em; }
.tuvi-result-body li { margin-bottom: .35em; }
.tuvi-result-body hr { border: none; border-top: 1px solid var(--tuvi-border); margin: 1.2em 0; }
.tuvi-result-body strong { color: var(--tuvi-primary-dark); }

/* Thẻ trình bày Cung/Sao — thay thế bảng kẻ ô, dùng để hệ thống tự bọc lại
   nếu AI lỡ xuất ra dạng bảng. Không viền lưới cứng, dùng vạch trang trí mềm
   bên trái + chữ, không icon. */
.tuvi-result-body .tuvi-star-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin: 1em 0 1.3em;
}
.tuvi-result-body .tuvi-star-card {
    position: relative;
    background: linear-gradient(135deg, rgba(144,0,0,.035), rgba(212,175,55,.045));
    border: 1px solid rgba(144,0,0,.12);
    border-left: 3px solid var(--tuvi-accent);
    border-radius: 10px;
    padding: 12px 14px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tuvi-result-body .tuvi-star-card-label {
    font-family: var(--tuvi-font-serif, inherit);
    font-weight: 600;
    font-size: .96em;
    color: var(--tuvi-primary-dark);
    letter-spacing: .2px;
}
.tuvi-result-body .tuvi-star-card-label::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    margin-top: 5px;
    background: var(--tuvi-accent);
    border-radius: 2px;
    opacity: .6;
}
.tuvi-result-body .tuvi-star-card-text {
    font-size: .92em;
    color: var(--tuvi-text-light);
    line-height: 1.5;
}
@media (max-width: 480px) {
    .tuvi-result-body .tuvi-star-cards { grid-template-columns: 1fr; }
}

.tuvi-result-footer {
  display: flex;
  gap: 12px;
  padding: 16px 22px 22px;
  justify-content: center;
}

.tuvi-btn-secondary {
  padding: 9px 22px;
  border: 1.5px solid var(--tuvi-primary) !important;
  background: transparent !important;
  color: var(--tuvi-primary) !important;
  border-radius: var(--tuvi-radius-sm);
  font-size: var(--tuvi-text-base);
  font-family: var(--tuvi-font);
  font-weight: 600 !important;
  cursor: pointer;
  transition: var(--tuvi-transition);
}

.tuvi-btn-secondary:hover {
  background: var(--tuvi-primary) !important;
  color: #fff !important;
}

/* ── PAYWALL BLOCK (giới hạn bản miễn phí) ── */
.tuvi-paywall-block {
  position: relative;
  margin-top: 8px;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

/* Teaser: chỉ chứa TÊN các tiểu mục bị khoá (không phải nội dung thật),
   nên có thể làm mờ thật bằng CSS để tạo cảm giác "còn nội dung phía sau"
   mà không có rủi ro bảo mật khi xem qua DevTools. */
.tuvi-paywall-teaser {
  filter: blur(3.5px);
  opacity: .55;
  user-select: none;
  pointer-events: none;
  padding: 4px 4px 0;
}
.tuvi-paywall-teaser p,
.tuvi-paywall-teaser li { margin: 0 0 .4em; font-size: var(--tuvi-text-base); }
.tuvi-paywall-teaser ul { padding-left: 1.2em; margin: 0; }

/* Dải mờ chuyển tiếp êm giữa nội dung và khối CTA mở khoá */
.tuvi-paywall-fade {
  height: 30px;
  background: linear-gradient(to bottom, rgba(253,246,240,0) 0%, var(--tuvi-bg) 100%);
  pointer-events: none;
}
/* Khi có teaser ngay phía trước, kéo dải mờ chồng lên đáy teaser để tạo
   cảm giác chữ tan dần (an toàn vì teaser chỉ là tên tiểu mục, không phải
   nội dung thật) */
/* (2026-07-21, MỚI) Khối "Phác Họa Hôn Phối" — xem includes/shortcode.php +
   tuvi_ajax_phac_hoa_anh_hon_phoi() trong includes/ajax-handler.php. */
.tuvi-sketch-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  text-align: left;
  padding: 0;
  margin: 16px 0;
}
/* Nút "Xem phác họa người bạn đời" — thu gọn lại: chỉ 1 nút nền đỏ đô,
   chữ vàng, không còn khung/nền nhạt bao quanh như trước. Chú thích đặt
   ngay bên cạnh (desktop) hoặc xuống dòng bên dưới (mobile). */
.tuvi-sketch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: var(--tuvi-text-sm, 13px);
  font-family: var(--tuvi-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--tuvi-gold-light);
  background: linear-gradient(135deg, var(--tuvi-primary-dark) 0%, var(--tuvi-primary) 100%);
  background-color: var(--tuvi-primary);
  border: 1.5px solid var(--tuvi-gold);
  border-radius: var(--tuvi-radius-sm, 8px);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(101,0,0,.3), 0 0 0 1px rgba(212,175,55,.25);
  transition: var(--tuvi-transition, all .2s ease);
}
.tuvi-sketch-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.16) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .5s ease;
  /* Ánh sáng bay nhẹ tự động, lặp lại mỗi 3.2s kể cả khi không hover
     (giữ nguyên hiệu ứng lướt nhanh hơn lúc hover ở dưới). */
  animation: tuviSketchShimmer 3.2s ease-in-out infinite;
}
.tuvi-sketch-btn:hover::before { transform: translateX(100%); animation: none; }
@keyframes tuviSketchShimmer {
  0%   { transform: translateX(-100%); }
  35%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
.tuvi-sketch-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(101,0,0,.4), 0 0 0 1px rgba(212,175,55,.35);
}
.tuvi-sketch-btn:active:not(:disabled) { transform: translateY(0) scale(1); }
.tuvi-sketch-btn:disabled {
  opacity: .65;
  cursor: default;
  transform: none !important;
}
.tuvi-sketch-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--tuvi-text-muted, #8a7d68);
  max-width: 260px;
}
.tuvi-sketch-result {
  margin-top: 20px;
}
.tuvi-sketch-result img {
  max-width: 320px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--tuvi-gold);
  box-shadow: 0 8px 22px rgba(101,0,0,.18);
  background: #fff;
}
.tuvi-sketch-note {
  margin: 10px auto 0;
  max-width: 320px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tuvi-text-muted, #8a7d68);
  font-style: italic;
}
/* Nút "Lưu về máy" — nằm ngay dưới ảnh, phong cách nhẹ hơn nút chính
   (outline vàng trên nền sáng) để không cạnh tranh thị giác với CTA đỏ
   phía trên, nhưng vẫn rõ ràng là hành động cùng nhóm cao cấp. */
.tuvi-sketch-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px auto 0;
  padding: 10px 22px;
  font-size: 13px;
  font-family: var(--tuvi-font);
  font-weight: 700;
  color: var(--tuvi-primary);
  background: #fff;
  border: 1.5px solid var(--tuvi-gold);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: var(--tuvi-transition, all .2s ease);
}
.tuvi-sketch-download-btn:hover {
  background: linear-gradient(135deg, var(--tuvi-gold) 0%, var(--tuvi-gold-dim) 100%);
  color: #fff;
  transform: translateY(-1px);
}
@media (max-width: 480px) {
  .tuvi-sketch-section { flex-direction: column; text-align: center; }
  .tuvi-sketch-hint { max-width: 100%; }
  .tuvi-sketch-result img { max-width: 100%; }
  .tuvi-sketch-download-btn { width: 100%; }
}

.tuvi-paywall-teaser + .tuvi-paywall-fade {
  height: 40px;
  margin-top: -40px;
}

.tuvi-paywall-cta {
  position: relative;
  text-align: center;
  padding: 28px 24px 30px;
  background: linear-gradient(180deg, var(--tuvi-bg) 0%, #f0e6d6 100%);
  border-top: 1px solid var(--tuvi-border);
}
/* Khi khối này bị JS di chuyển ra khỏi luồng nội dung luận giải, đặt
   NGAY SAU .tuvi-rating-section (xem showResult() trong assets/js/tuvi.min.js)
   — bo góc + viền đều 4 cạnh và thêm margin-top để đọc như 1 khối riêng
   biệt, thay vì trông như phần tiếp nối cứng của đoạn văn phía trên. */
#tuvi-result > .tuvi-paywall-cta {
  margin-top: 20px;
  border: 1px solid var(--tuvi-border);
  border-radius: 14px;
}

/* Hoa văn hồi văn nhỏ làm điểm nhấn phía trên nút, thay cho icon khoá */
.tuvi-paywall-cta::before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg fill='none' stroke='%23c89a30' stroke-width='1.4'%3E%3Crect x='2' y='2' width='26' height='26'/%3E%3Crect x='8' y='8' width='14' height='14'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .8;
}

.tuvi-paywall-title {
  font-size: var(--tuvi-text-lg);
  font-weight: 600;
  color: var(--tuvi-primary-dark);
  margin: 0 0 14px;
}

.tuvi-paywall-desc {
  font-size: var(--tuvi-text-base);
  color: var(--tuvi-text-muted);
  margin: 0 0 22px;
}

/* ── Khối Premium DUY NHẤT — bố cục dạng card ngang: icon bên trái,
   nội dung ở giữa, CTA nổi bật bên phải (desktop); xếp dọc trên mobile.
   Đây là điểm nhấn chính, không còn khối Premium thứ hai nào khác. ── */
.tuvi-premium-card {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 22px;
  background: linear-gradient(135deg, #fffaf0 0%, #fbf0d8 100%);
  border: 1.5px solid var(--tuvi-gold);
  border-radius: 16px;
  box-shadow: var(--tuvi-shadow-lg, 0 4px 14px rgba(0,0,0,.08));
}

.tuvi-premium-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a0000, var(--tuvi-primary));
  border: 1px solid rgba(243,214,122,.5);
  font-size: 22px;
  line-height: 1;
  color: #F3D27A !important;
  text-shadow: 0 0 6px rgba(243,210,122,.85), 0 0 12px rgba(212,175,55,.5);
  box-shadow: 0 3px 10px rgba(101,0,0,.3);
  animation: tuvi-star-pulse 2.4s ease-in-out infinite;
}

.tuvi-premium-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.tuvi-premium-card-label {
  color: var(--tuvi-primary-dark);
  font-weight: 700;
  font-size: var(--tuvi-text-base);
}

.tuvi-premium-card-desc {
  color: var(--tuvi-text-muted);
  font-size: var(--tuvi-text-sm, 12.5px);
  line-height: 1.4;
}

/* ── CTA Premium — nổi bật nhất toàn khối, đồng bộ phong cách sang trọng
   với nút đỏ "Xem Lá Số Tử Vi" (.tuvi-btn-submit): viền vàng, shadow sâu,
   hiệu ứng ánh sáng lướt qua khi hover, chữ hoa đậm. ── */
.tuvi-upgrade-btn,
.tuvi-premium-card .tuvi-upgrade-btn,
#tuvi-open-payment.tuvi-upgrade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 16px 30px;
  background: linear-gradient(135deg, var(--tuvi-primary-dark) 0%, var(--tuvi-primary) 100%) !important;
  background-color: var(--tuvi-primary) !important;
  color: #fff !important;
  border: 2px solid var(--tuvi-gold) !important;
  border-radius: var(--tuvi-radius-sm, 10px);
  font-size: calc(var(--tuvi-text-md) + 1px);
  font-family: var(--tuvi-font);
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(101,0,0,.4), 0 0 0 1px rgba(212,175,55,.3);
  transition: var(--tuvi-transition);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  opacity: 1 !important;
  filter: none !important;
}

.tuvi-upgrade-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.16) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}

.tuvi-upgrade-btn:hover::before { transform: translateX(100%); }

.tuvi-upgrade-btn-shine {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(110deg, #F3D27A 20%, #fff6da 38%, #ffffff 48%, #fff6da 58%, #F3D27A 76%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tuvi-shimmer 3.2s linear infinite;
}

.tuvi-upgrade-btn-price {
  font-size: 1.15em;
  font-weight: 800;
  text-transform: none;
  margin-left: 2px;
  background-image: inherit;
  background-size: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: inherit;
}

.tuvi-upgrade-btn:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 14px 32px rgba(101,0,0,.5), 0 0 0 1px rgba(212,175,55,.4);
}

.tuvi-upgrade-btn:active { transform: translateY(0) scale(1); }

@media (max-width: 480px) {
  .tuvi-premium-card {
    flex-direction: column;
    text-align: center;
    padding: 20px 18px;
  }
  .tuvi-premium-card-content { align-items: center; text-align: center; }
}

/* NGUYÊN NHÂN LỖI MẤT CHỮ TRÊN MOBILE: khối rule gốc phía trên gộp chung
   3 selector "#tuvi-open-payment.tuvi-upgrade-btn, .tuvi-upgrade-btn, ..."
   trong CÙNG 1 rule. Khi trình duyệt so khớp cascade, nó luôn tính theo
   độ đặc trưng (specificity) CAO NHẤT trong số các selector khớp — mà
   "#tuvi-open-payment.tuvi-upgrade-btn" (có ID) có độ đặc trưng cao hơn
   hẳn so với ".tuvi-upgrade-btn" đơn thuần ở khối @media bên dưới. Kết
   quả: dù đặt sau, khối @media KHÔNG thắng nổi ở các thuộc tính đã khai
   báo tại rule gốc (đặc biệt "white-space: nowrap" + padding/font-size
   gốc), khiến nút vẫn cố hiển thị 1 dòng full kích cỡ desktop trong bề
   rộng mobile hẹp hơn — chữ bị tràn ra ngoài và bị cắt 2 đầu (canh giữa +
   overflow: hidden ở rule gốc). "width: 100%" vẫn ăn được vì rule gốc
   không khai báo width nên không có xung đột.
   CÁCH SỬA: khai báo lại ĐÚNG cùng tổ hợp selector (bao gồm cả biến thể
   có ID) ở đây để độ đặc trưng ngang nhau — khi đó thứ tự SAU trong file
   sẽ quyết định, đảm bảo khối mobile luôn thắng. */
@media (max-width: 480px) {
  .tuvi-upgrade-btn,
  .tuvi-premium-card .tuvi-upgrade-btn,
  #tuvi-open-payment.tuvi-upgrade-btn {
    width: 100%;
    text-align: center;
    padding: 15px 14px;
    white-space: normal;
    line-height: 1.3;
    font-size: var(--tuvi-text-sm, 13px);
    letter-spacing: .1px;
    gap: 4px;
  }
  .tuvi-upgrade-btn-shine {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .tuvi-upgrade-btn-price {
    display: block;
    margin: 0;
    font-size: 1.28em;
    letter-spacing: .2px;
  }
}

/* ── Card gom 2 lựa chọn phụ, THAY THẾ NHAU: "Tiếp Tục Xem Miễn Phí" &
   "Nhận Thêm Lượt Xem Miễn Phí" ── Đồng bộ hoá theo yêu cầu thiết kế:
   - Cùng cấu trúc mỗi lựa chọn: Tiêu đề → Badge lợi ích → Mô tả (lợi ích,
     không phải hành động) → CTA. Không đảo vị trí CTA/mô tả giữa 2 khối.
   - Cùng kiểu đặt tên tiêu đề (đều là LỢI ÍCH nhận được), cùng cỡ CTA
     (chiều cao/padding/bo góc/font-weight) để 2 lựa chọn có cùng "vai trò"
     thị giác — tránh cảm giác "2 nút chức năng ghép ngẫu nhiên vào 1 card".
   - Có tiêu đề + dẫn nhập chung cho toàn khu vực để khách hiểu ngay đây là
     2 CÁCH THAY THẾ, không phải 2 tính năng độc lập.
   Vẫn giữ trọng lượng thị giác NHẸ HƠN hẳn .tuvi-premium-card ở trên
   (không shadow sâu, không viền dày) để Premium luôn nổi bật nhất khối. */
.tuvi-free-options-card {
  max-width: 560px;
  margin: 20px auto 0;
  padding: 20px 26px;
  background: #FBF7EF;
  border: 1px solid rgba(212,175,55,.5);
  border-radius: 12px;
  text-align: center;
}

/* Khối "intro" (tiêu đề + dẫn nhập) được tách biệt trực quan khỏi các lựa
   chọn cụ thể bên dưới bằng: đường kẻ mảnh dạng gradient vàng kim (giống
   tinh thần .tuvi-modal-header::after) + khoảng đệm riêng, thay vì để cả
   khối trôi liền một mạch xuống các nút CTA. */
.tuvi-free-options-intro {
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(212,175,55,.35);
}

.tuvi-free-options-heading {
  margin: 0 0 4px;
  font-size: var(--tuvi-text-md);
  font-weight: 700;
  color: #5A1E1E;
}

.tuvi-free-options-subheading {
  margin: 0 auto;
  max-width: 400px;
  font-size: var(--tuvi-text-sm, 12.5px);
  font-weight: 500;
  line-height: 1.5;
  color: #6B5A4A;
}

.tuvi-free-options-body {
  padding-top: 2px;
}

/* Đường phân cách dạng "✦ ✦ ✦" thay cho đường kẻ dài, hợp phong cách tử
   vi/huyền học hơn — rút ngắn khoảng cách dọc 15-20% so với trước. */
.tuvi-free-option-divider {
  margin: 14px auto;
  max-width: 70%;
  font-size: 11px;
  letter-spacing: 6px;
  color: rgba(212,175,55,.55);
}

.tuvi-free-option-title {
  margin: 0 0 6px;
  font-size: var(--tuvi-text-md);
  font-weight: 700;
  color: #5A1E1E;
}

/* Badge lợi ích nhỏ, màu vàng kim, đặt ngay dưới tiêu đề của mỗi lựa
   chọn để khách nắm được "phần thưởng cụ thể" trước khi đọc mô tả. */
.tuvi-free-option-badge {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(212,175,55,.15);
  border: 1px solid rgba(212,175,55,.5);
  color: #8a6d1f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
}

.tuvi-free-option-desc {
  max-width: 380px;
  margin: 14px auto 0;
  font-size: var(--tuvi-text-sm, 12.5px);
  font-weight: 500;
  line-height: 1.5;
  color: #6B5A4A;
}

/* Cùng chiều cao / padding / bo góc / font-weight cho cả 2 CTA để chúng
   thể hiện cùng một "vai trò" trong bố cục. */
.tuvi-free-option {
  text-align: center;
}

/* Hàng gọn chứa CTA chính + nút "Kiểm tra ngay" nhỏ đặt ngay bên cạnh —
   dùng chung cho cả "Xem Quảng Cáo" và "Mời Bạn Bè", luôn hiển thị sẵn
   ngay từ đầu (không còn chờ mở tab/xuất hiện sau khi bấm CTA chính). */
.tuvi-free-option-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.tuvi-mini-check-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  background: transparent !important;
  border: none !important;
  color: var(--tuvi-gold-dim) !important;
  font-size: var(--tuvi-text-xs, 11px);
  font-family: var(--tuvi-font);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--tuvi-transition);
}

.tuvi-mini-check-btn::before {
  content: '\21BB';
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.tuvi-mini-check-btn:hover {
  color: var(--tuvi-primary) !important;
  text-decoration-style: solid;
}

.tuvi-mini-check-btn:disabled {
  cursor: default;
  opacity: .6;
  text-decoration: none;
}

#tuvi-app .tuvi-free-option-btn {
  display: inline-block;
  min-width: 170px;
  padding: 11px 30px;
  background: #FBF7EF !important;
  color: var(--tuvi-primary-dark) !important;
  border: 1px solid rgba(212,175,55,.5) !important;
  border-radius: 13px;
  font-size: calc(var(--tuvi-text-md) * 0.9);
  font-family: var(--tuvi-font);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: var(--tuvi-transition);
}

#tuvi-app .tuvi-free-option-btn:hover {
  background: #fff !important;
  border-color: var(--tuvi-gold) !important;
  transform: translateY(-1px);
}

.tuvi-free-option-btn:disabled {
  cursor: default;
  opacity: .75;
  transform: none;
}

/* Ghi chú/hint dùng chung cỡ chữ với mô tả lợi ích để 2 lựa chọn cân đối
   khi đặt cạnh nhau. */
.tuvi-referral-hint {
  max-width: 380px;
  margin: 14px auto 0;
  font-size: var(--tuvi-text-sm, 12.5px);
  font-weight: 500;
  line-height: 1.5;
  color: #6B5A4A;
}

/* Trạng thái đã có thưởng — nhấn đỏ đô + đậm hơn để khách nhận ra đây là
   kết quả cụ thể (không phải câu kỳ vọng chung). */
.tuvi-referral-hint--earned {
  color: #1E7A44;
  font-weight: 600;
}

/* [2026-07-25] Khối "link đã lưu" — hiện lại link Thường/Affiliate khách
   đã từng lấy ngay dưới nút "Mời Bạn Bè", để không phải mở popup + bấm
   lấy lại từ đầu mỗi lần quay lại trang. Chỉ xuất hiện khi có ít nhất 1
   link đã lưu trong localStorage (xem tuviBuildSavedLinksHtml() trong
   assets/js/tuvi.min.js). */
/* [2026-07-25] Scope lại toàn bộ khối "link đã lưu" bằng #tuvi-app + thêm
   !important trên các thuộc tính box-model/typography — cùng chuẩn với
   #tuvi-app .tuvi-free-option-btn ở trên. Bản gốc thiếu tiền tố #tuvi-app
   nên specificity thấp hơn CSS "button/input" chung của một số theme
   (Astra, GeneratePress, Divi...), khiến 2 nút "Sao chép" / "Chia sẻ
   nhanh" bị đè padding/border-radius/font-size → lệch cỡ, méo góc, hoặc
   dính viền/nền mặc định của theme trên mobile. */
#tuvi-app .tuvi-saved-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px auto 0;
  max-width: 380px;
  width: 100%;
  box-sizing: border-box;
}

#tuvi-app .tuvi-saved-link {
  padding: 10px 12px;
  background: #fff !important;
  border: 1px solid rgba(212,175,55,.4) !important;
  border-radius: 10px !important;
  text-align: left;
  box-sizing: border-box;
}

#tuvi-app .tuvi-saved-link-label {
  display: block;
  margin: 0 0 3px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--tuvi-gold-dim) !important;
  font-family: var(--tuvi-font);
}

#tuvi-app .tuvi-saved-link-value {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  color: var(--tuvi-text-light) !important;
  font-family: var(--tuvi-font);
}

#tuvi-app .tuvi-saved-link-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}

#tuvi-app .tuvi-saved-link-btn {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 8px !important;
  margin: 0;
  background: var(--tuvi-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: var(--tuvi-font) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: none !important;
  transition: var(--tuvi-transition);
}

#tuvi-app .tuvi-saved-link-btn:hover {
  background: var(--tuvi-primary-dark) !important;
}

#tuvi-app .tuvi-saved-link-btn--ghost {
  background: #fff !important;
  color: var(--tuvi-primary-dark) !important;
  border: 1px solid rgba(212,175,55,.5) !important;
}

#tuvi-app .tuvi-saved-link-btn--ghost:hover {
  border-color: var(--tuvi-gold) !important;
  background: #FBF7EF !important;
}

/* Dòng chia sẻ phụ (Messenger/Zalo) — chỉ mang tính GỢI Ý thêm kênh gửi,
   không phải hành động chính. Nút chính "Sao Chép Liên Kết" đã đứng ngay
   trên, cùng cỡ với CTA "Xem Tiếp" ở lựa chọn 1. */
.tuvi-referral-share {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
}

.tuvi-referral-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: #fff;
  color: var(--tuvi-primary-dark);
  border: 1px solid var(--tuvi-gold-light);
  border-radius: 11px;
  font-size: calc(var(--tuvi-text-sm, 12.5px) * 1.02);
  font-family: var(--tuvi-font);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--tuvi-transition);
}

.tuvi-referral-share-btn:hover {
  background: var(--tuvi-bg, #fdf6f0);
  border-color: var(--tuvi-gold);
}

/* Bản mobile: rút gọn để đỡ dài/rối trên màn hình hẹp — theo yêu cầu:
   - Bỏ cả 2 badge lợi ích (đã có trong mô tả rồi, không cần lặp lại).
   - Bỏ tiêu đề "Tiếp Tục Xem Miễn Phí" của lựa chọn 1 vì trùng ý với
     tiêu đề chung "Tiếp Tục Khám Phá Lá Số" ngay phía trên.
   "Mời Bạn Bè" giờ mở popup (#tuvi-referral-modal) thay vì hiện
   Messenger/Zalo ngay tại chỗ, nên không còn cần rút gọn hàng share riêng. */
@media (max-width: 480px) {
  .tuvi-free-options-card { padding: 18px 16px; }
  .tuvi-free-option { text-align: center; }
  .tuvi-free-option-btn {
    width: 100%;
    text-align: center !important;
  }
  .tuvi-free-option-row { gap: 8px 10px; }
  .tuvi-mini-check-btn { width: auto; }
  .tuvi-free-option-badge { display: none; }
  .tuvi-free-option-title--continue { display: none; }
  .tuvi-free-options-subheading,
  .tuvi-free-option-desc,
  .tuvi-referral-hint { max-width: none; font-size: 11.5px; }
  #tuvi-app .tuvi-saved-links { max-width: none; }
  #tuvi-app .tuvi-saved-link-value { font-size: 11px; }
  #tuvi-app .tuvi-saved-link { padding: 9px 10px; }
  #tuvi-app .tuvi-saved-link-actions { gap: 6px; }
  #tuvi-app .tuvi-saved-link-btn { padding: 8px 6px !important; font-size: 11px !important; }
}

/* Màn cực hẹp (< 360px, ví dụ Galaxy Fold màn ngoài, iPhone SE cũ) — chữ
   "Chia sẻ nhanh" dễ bị ellipsis vì nút dùng white-space: nowrap. Xuống
   dòng 2 nút để mỗi nút có đủ chỗ hiển thị trọn chữ, thay vì cắt "...". */
@media (max-width: 359px) {
  #tuvi-app .tuvi-saved-link-actions { flex-wrap: wrap; }
  #tuvi-app .tuvi-saved-link-btn { flex: 1 1 100%; white-space: normal; }
}

/* ── Nút debug/test — chỉ admin thấy (kiểm tra quyền ở PHP). Cố tình để
   màu sắc khác hẳn (đỏ-cam cảnh báo) và ghim cố định góc màn hình để
   không lẫn với giao diện bình thường của khách, tránh admin quên đang ở
   chế độ xem thường mà click nhầm. ── */
.tuvi-admin-debug-row {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
}

.tuvi-admin-debug-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #fff3f0;
  color: #b3401f;
  border: 1px dashed #e07a52;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--tuvi-font);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: var(--tuvi-transition);
}

.tuvi-admin-debug-btn:hover {
  background: #ffe4dc;
  transform: translateY(-1px);
}

.tuvi-admin-debug-btn:disabled {
  cursor: default;
  opacity: .7;
  transform: none;
}

@media (max-width: 640px) {
  .tuvi-admin-debug-row { right: 10px; bottom: 10px; }
  .tuvi-admin-debug-btn { font-size: 11.5px; padding: 8px 12px; }
}

/* ── Toast thông báo nhẹ, hiện đầu widget (vd: mở khoá lượt xem miễn phí
   thành công khi khách quay lại trang sau khi xem nội dung tài trợ). ── */
.tuvi-mon-toast {
  margin: 0 0 13px;
  padding: 9px 16px;
  border-radius: 12px;
  font-size: var(--tuvi-text-sm, 13px);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

/* Mặc định (thành công/tích cực) — đổi sang tông XANH thân thiện thay vì
   đỏ đô nghiêm trọng, dùng cho các thông báo tích cực: mở khoá lượt xem,
   nhận thêm lượt giới thiệu, sao chép liên kết thành công... */
.tuvi-mon-toast--success {
  background: #EAF7EE;
  border: 1px solid rgba(45,142,90,.4);
  color: #1E7A44;
}

/* Trung tính — thông tin/nhắc nhở nhẹ, không phải lỗi thật sự (VD: nhắc
   bật popup nếu quảng cáo không tự mở). */
.tuvi-mon-toast--info {
  background: var(--tuvi-bg, #FBF7EF);
  border: 1px solid rgba(212,175,55,.5);
  color: var(--tuvi-primary, #7A1F1F);
}

.tuvi-mon-toast--error {
  background: var(--tuvi-error-bg, #f7e9e6);
  border: 1px solid rgba(178,51,51,.5);
  color: var(--tuvi-primary-dark, #5C1717);
}

/* ── Biến thể "nổi" — dùng khi không có nút cụ thể để neo bên cạnh (VD:
   thông báo mở khoá lượt xem lúc khách VỪA QUAY LẠI trang sau khi xem nội
   dung tài trợ — lúc này trang mới tải lại, khối nút "Xem Quảng Cáo" chưa
   kịp hiển thị). Trước đây các trường hợp này bị chèn lên ĐẦU #tuvi-app rồi
   cuộn trang lên — gây cảm giác "nhảy" lên sát banner đầu trang. Giờ hiện
   dạng thanh nhỏ gọn, cố định gần đáy màn hình, không cuộn trang. ── */
.tuvi-mon-toast--floating {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 10000;
  max-width: min(92vw, 420px);
  margin: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  animation: tuvi-toast-up .25s ease-out;
}

@keyframes tuvi-toast-up {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}


/* ── MODAL THANH TOÁN ── */
.tuvi-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,0,0,.72);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding: 16px;
  overscroll-behavior: contain;
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}

/* Modal desktop: tối đa 480px, tự co theo nội dung */
.tuvi-modal {
  background: #fff;
  border-radius: var(--tuvi-radius);
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(212,175,55,.25);
  position: relative;
  overflow: hidden;
  animation: tuvi-fade-up .3s cubic-bezier(.4,0,.2,1);
  /* Flex column để footer luôn dính đáy dù body content ít hay nhiều */
  display: flex;
  flex-direction: column;
  max-height: 90dvh;
}

.tuvi-modal-header {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--tuvi-black), var(--tuvi-wine) 55%, var(--tuvi-primary-dark));
  padding: 16px 20px;
  position: relative;
}

.tuvi-modal-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.5), transparent);
}

.tuvi-modal-header h3 {
  margin: 0;
  font-family: var(--tuvi-font-title) !important;
  font-weight: var(--tuvi-font-title-weight) !important;
  font-size: var(--tuvi-text-xl);
  color: #fff;
  font-weight: 600;
  letter-spacing: .3px;
}

/* Body có thể scroll nếu nội dung dài (step QR) nhưng KHÔNG ảnh hưởng footer */
.tuvi-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 20px 8px;
}

.tuvi-modal-body p {
  font-size: var(--tuvi-text-md);
  color: var(--tuvi-text-light);
  margin: 0 0 12px;
}

/* ── FOOTER 2 NÚT — luôn cố định ở đáy modal, không bị nội dung đẩy xuống ── */
.tuvi-modal-footer {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--tuvi-border);
  background: var(--tuvi-bg);
}

.tuvi-modal-footer-close {
  flex: 0.8 1 0%;
  min-width: 0;
  padding: 13px 12px;
  font-size: var(--tuvi-text-md);
  border-radius: var(--tuvi-radius-sm);
  border: none;
  background: transparent;
  color: var(--tuvi-text-muted);
  cursor: pointer;
  font-family: var(--tuvi-font);
  font-weight: 500;
  transition: var(--tuvi-transition);
  white-space: nowrap;
  text-decoration: none;
}

.tuvi-modal-footer-close:hover {
  color: var(--tuvi-primary);
}

.tuvi-modal-footer-primary {
  flex: 2.2 1 0%;
  min-width: 0;
  padding: 13px 10px;
  font-size: var(--tuvi-text-md);
  border-radius: var(--tuvi-radius-sm);
  white-space: normal;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Biến thể modal nhỏ gọn hơn (VD: popup "Mời Bạn Bè") — không cần rộng
   480px như modal thanh toán nhiều bước. */
.tuvi-modal--sm {
  max-width: 400px;
}

/* ── POPUP CHỜ / ĐANG KIỂM TRA "XEM QUẢNG CÁO" ── nhẹ nhàng, thân thiện:
   vòng xoay + 2 dòng chữ, không dùng header đỏ đô như các modal khác vì
   đây chỉ là trạng thái chờ tạm thời, không phải 1 bước thao tác. */
.tuvi-ad-wait-overlay { z-index: 10001; }

.tuvi-ad-wait-box {
  padding: 30px 26px 22px;
  text-align: center;
  align-items: center;
}

.tuvi-ad-wait-spinner {
  width: 46px;
  height: 46px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 4px solid rgba(212,175,55,.25);
  border-top-color: var(--tuvi-gold);
  animation: tuvi-spin 1s linear infinite;
}

.tuvi-ad-wait-title {
  align-self: stretch;
  margin: 0 0 8px;
  font-size: var(--tuvi-text-md);
  font-weight: 700;
  color: var(--tuvi-primary-dark);
}

.tuvi-ad-wait-desc {
  align-self: stretch;
  margin: 0 0 18px;
  font-size: var(--tuvi-text-sm, 12.5px);
  line-height: 1.55;
  color: var(--tuvi-text-muted);
}

/* Trạng thái thành công — vòng xoay chuyển thành dấu tích xanh, chữ cũng
   chuyển tông xanh cho cảm giác tích cực/thân thiện thay vì đỏ đô nghiêm
   trọng vốn dùng cho cảnh báo/lỗi. */
.tuvi-ad-wait-box.tuvi-ad-wait--success .tuvi-ad-wait-spinner {
  animation: none;
  border-color: #2D8E5A;
  background: #2D8E5A;
  position: relative;
}
.tuvi-ad-wait-box.tuvi-ad-wait--success .tuvi-ad-wait-spinner::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 8px;
  margin: -6px 0 0 -7px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
}
.tuvi-ad-wait-box.tuvi-ad-wait--success .tuvi-ad-wait-title { color: #1E7A44; }

.tuvi-ad-wait-close {
  padding: 9px 18px;
  font-size: var(--tuvi-text-sm, 12.5px);
}

@media (max-width: 480px) {
  .tuvi-ad-wait-box { padding: 26px 20px 18px; }
}

/* Popup "Chọn Hình Thức Giới Thiệu" — giảm khoảng đệm trên dưới ~15-20%
   so với modal mặc định để bớt cảm giác trống trải. */
.tuvi-modal--referral .tuvi-modal-header {
  padding: 14px 20px;
  text-align: center;
}

.tuvi-modal--referral .tuvi-modal-body {
  padding: 10px 20px 4px;
}

.tuvi-referral-modal-intro {
  text-align: center;
  color: var(--tuvi-text-muted);
  font-size: var(--tuvi-text-sm, 12.5px);
  margin: 0 0 10px !important;
}

.tuvi-referral-modal-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
}

/* Tone chủ đạo đỏ đô đậm + viền vàng kim rõ ràng, có hiệu ứng nổi khối
   (bevel nhẹ + đổ bóng) để 2 lựa chọn không bị nhầm là nút disabled. */
#tuvi-referral-modal .tuvi-referral-modal-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 13px 18px;
  background:
    linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,0) 40%),
    linear-gradient(135deg, var(--tuvi-primary-dark) 0%, var(--tuvi-primary) 100%) !important;
  border: 2px solid var(--tuvi-gold) !important;
  border-radius: var(--tuvi-radius-sm, 10px);
  cursor: pointer;
  box-shadow:
    0 10px 24px rgba(74,18,18,.38),
    0 0 0 1px rgba(212,175,55,.3),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 4px rgba(0,0,0,.18);
  transition: var(--tuvi-transition);
}

#tuvi-referral-modal .tuvi-referral-modal-btn:hover {
  transform: translateY(-1px);
  border-color: var(--tuvi-gold-light);
  box-shadow:
    0 14px 30px rgba(74,18,18,.46),
    0 0 0 1px rgba(212,175,55,.4),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 4px rgba(0,0,0,.18);
}

#tuvi-referral-modal .tuvi-referral-modal-btn:active {
  transform: translateY(0);
  box-shadow:
    0 6px 16px rgba(74,18,18,.36),
    0 0 0 1px rgba(212,175,55,.3),
    inset 0 2px 5px rgba(0,0,0,.25);
}

#tuvi-referral-modal .tuvi-referral-modal-btn-title {
  font-family: var(--tuvi-font-title) !important;
  font-weight: var(--tuvi-font-title-weight) !important;
  font-size: var(--tuvi-text-md);
  text-transform: uppercase !important;
  color: var(--tuvi-gold-title) !important;
  letter-spacing: .2px;
}

#tuvi-referral-modal .tuvi-referral-modal-btn-desc {
  margin-top: 3px;
  font-family: var(--tuvi-font);
  font-size: var(--tuvi-text-xs);
  font-weight: 500;
  line-height: 1.4;
  text-transform: none !important;
  color: rgba(255,253,248,.92) !important;
}

/* ── Khung "Chia sẻ nhanh" — hiện ra trong popup Mời Bạn Bè ngay sau khi
   link đã tạo + copy xong (tuviShowSharePanel() trong tuvi.min.js). Icon
   tròn to + tên bên dưới, đồng bộ tông vàng-đỏ chung của theme thay vì
   để nguyên màu thương hiệu chói (Facebook xanh, TikTok đen...) phá vỡ
   giao diện — dùng nền gradient vàng-đỏ đồng bộ, chỉ đổi nhẹ theo từng
   nền tảng qua 1 lớp overlay màu mờ. ── */
.tuvi-share-panel {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(212,175,55,.25);
  animation: tuvi-share-panel-in .25s ease;
}

@keyframes tuvi-share-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tuvi-share-panel-label {
  margin: 0 0 12px;
  text-align: center;
  font-family: var(--tuvi-font-title);
  font-weight: var(--tuvi-font-title-weight);
  font-size: var(--tuvi-text-sm, 12.5px);
  text-transform: uppercase;
  letter-spacing: .6px;
  /* Modal nền trắng (.tuvi-modal { background:#fff }) — --tuvi-gold-title
     (#F3D67A) chỉ tương phản tốt trên nền đỏ đô, trên nền trắng gần như
     vô hình. Đổi sang --tuvi-gold-dim (tông vàng đậm hơn) để đọc được. */
  color: var(--tuvi-gold-dim) !important;
}

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

.tuvi-share-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  font-family: var(--tuvi-font);
  transition: var(--tuvi-transition);
}

.tuvi-share-icon:hover { transform: translateY(-2px); }
.tuvi-share-icon:active { transform: translateY(0) scale(.96); }

.tuvi-share-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--tuvi-gold);
  box-shadow: 0 6px 16px rgba(101,0,0,.35);
  overflow: hidden;
}

.tuvi-share-icon-circle svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.tuvi-share-icon--facebook  { background: linear-gradient(135deg, #1877F2, #0e5fc4); }
.tuvi-share-icon--messenger { background: linear-gradient(135deg, #00B2FF, #006AFF); }
.tuvi-share-icon--zalo      { background: linear-gradient(135deg, #0068FF, #0050c4); }
.tuvi-share-icon--instagram { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4); }
.tuvi-share-icon--tiktok    { background: linear-gradient(135deg, #111, #333); }
.tuvi-share-icon--copy      { background: linear-gradient(135deg, var(--tuvi-primary-dark), var(--tuvi-primary)); }

.tuvi-share-icon-name {
  font-size: 11.5px;
  font-weight: 600;
  /* Cùng lỗi: màu gần trắng (rgba(255,253,248,.92)) trên nền modal
     trắng (#fff) khiến chữ "Facebook/Messenger/..." vô hình. Đổi sang
     --tuvi-text-light (nâu đậm) để đọc rõ trên nền sáng. */
  color: var(--tuvi-text-light) !important;
  text-transform: none !important;
}

.tuvi-aff-guest-hint {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: var(--tuvi-radius-sm, 10px);
  background: rgba(212,175,55,.1);
  border: 1px solid rgba(212,175,55,.3);
  font-size: 10px;
  line-height: 1.5;
  /* Cùng lỗi màu-trắng-trên-nền-trắng như 2 chỗ trên. */
  color: var(--tuvi-text-light) !important;
  text-align: center;
}

.tuvi-aff-guest-hint a {
  color: var(--tuvi-primary) !important;
  font-weight: 700;
  text-decoration: underline;
}

/* Footer của popup giới thiệu chỉ có 1 nút "Đóng" — căn giữa và giảm độ
   nổi bật để CTA chính (2 nút phía trên) vẫn là trọng tâm. */
.tuvi-modal-footer--center {
  justify-content: center;
  padding: 6px 20px 14px;
}

.tuvi-modal-footer-close--minor {
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: var(--tuvi-text-sm, 13px);
  opacity: .8;
  text-decoration: none;
}

.tuvi-modal-footer-close--minor:hover {
  opacity: 1;
}

/* Bước 2 (QR) chỉ còn 1 nút — đặt bên phải thay vì kéo full-width */
.tuvi-modal-footer-step2 {
  justify-content: flex-end;
}
.tuvi-modal-footer-step2 .tuvi-modal-footer-close {
  flex: 0 0 auto;
  padding: 11px 28px;
  text-align: center;
}

.tuvi-payment-price {
  text-align: center;
  background: linear-gradient(135deg, rgba(144,0,0,.06), rgba(212,175,55,.08));
  border: 1.5px solid var(--tuvi-gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,.08);
  border-radius: var(--tuvi-radius-sm);
  padding: 16px;
  margin: 14px 0 0;
}

.tuvi-payment-price span {
  display: block;
  font-size: var(--tuvi-text-5xl);
  font-weight: 600;
  color: var(--tuvi-primary);
  margin-bottom: 4px;
}

.tuvi-payment-price small {
  font-size: var(--tuvi-text-sm);
  color: var(--tuvi-text-muted);
}

.tuvi-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 4px;
  font-size: var(--tuvi-text-xs);
  color: var(--tuvi-text-muted);
}

.tuvi-trust-row svg { flex-shrink: 0; }

.tuvi-trust-shield-icon {
  flex-shrink: 0;
  width: auto;
  height: 30px;
  object-fit: contain;
  display: block;
}

.tuvi-payment-note {
  font-size: var(--tuvi-text-base);
  color: var(--tuvi-text-muted);
  line-height: 1.5;
  margin-bottom: 10px;
  text-align: center;
}

/* ─────────────────────────────────────────
   MÃ THANH TOÁN (REDEEM CODE) — khối thu gọn nằm dưới .tuvi-trust-row
   trong bước 0 của modal Nâng Cấp. Dùng lại đúng bộ token màu/bo góc/
   khoảng cách của toàn modal (--tuvi-gold, --tuvi-radius-sm, --tuvi-input-*)
   để không tạo ra 1 "mảnh ghép lạc tông" trong giao diện.
───────────────────────────────────────── */
.tuvi-redeem-wrap {
  margin-top: 10px;
  text-align: center;
}

.tuvi-redeem-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 2px;
  color: var(--tuvi-primary);
  font-size: var(--tuvi-text-sm);
  font-weight: 600;
  font-family: var(--tuvi-font);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: var(--tuvi-transition);
}
.tuvi-redeem-toggle:hover,
.tuvi-redeem-toggle:focus-visible { color: var(--tuvi-primary-dark); }
.tuvi-redeem-toggle .tuvi-icon-svg { width: 14px; height: 14px; flex-shrink: 0; }

.tuvi-redeem-box {
  margin-top: 10px;
  padding: 12px;
  background: var(--tuvi-input-bg);
  border: 1px dashed var(--tuvi-input-border);
  border-radius: var(--tuvi-radius-sm);
  text-align: left;
}

.tuvi-redeem-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.tuvi-redeem-input {
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: monospace;
  text-align: center;
}
/* .tuvi-input đã set placeholder màu riêng — placeholder ô này không cần
   in hoa/monospace, chỉ giá trị đã nhập mới cần, nên override riêng. */
.tuvi-redeem-input::placeholder { text-transform: none; letter-spacing: normal; font-family: var(--tuvi-font); }

/* Nút "Kích Hoạt" — tách hẳn khỏi .tuvi-btn-secondary (viền rỗng) để dùng
   ĐÚNG tông nền đỏ đô đặc + viền vàng, đồng bộ với .tuvi-btn-submit (nút
   CTA chính của toàn giao diện) nhưng thu nhỏ lại cho vừa 1 khối phụ, bo
   tròn dạng pill (999px) cho mềm mại, và canh giữa thay vì dạt trái. */
.tuvi-redeem-btn {
  align-self: center;
  min-width: 180px;
  padding: 11px 30px;
  background: linear-gradient(135deg, var(--tuvi-primary-dark) 0%, var(--tuvi-primary) 100%);
  color: var(--tuvi-gold-light);
  border: 1.5px solid var(--tuvi-gold);
  border-radius: 999px;
  font-size: var(--tuvi-text-sm);
  font-family: var(--tuvi-font);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--tuvi-transition);
}
.tuvi-redeem-btn:hover {
  color: #fff;
  border-color: rgba(212,175,55,.85);
  transform: translateY(-1px);
}
.tuvi-redeem-btn:active { transform: translateY(0); }
.tuvi-redeem-btn:disabled {
  opacity: .6;
  cursor: default;
  transform: none;
}

.tuvi-redeem-msg {
  margin: 8px 0 0;
  font-size: var(--tuvi-text-sm);
  line-height: 1.5;
  text-align: center;
  min-height: 0;
}
.tuvi-redeem-msg:empty { margin: 0; }
.tuvi-redeem-msg--error   { color: var(--tuvi-error); font-weight: 500; }
.tuvi-redeem-msg--success { color: var(--tuvi-success); font-weight: 600; }
.tuvi-redeem-msg--loading { color: var(--tuvi-text-muted); }

/* Mobile: input rộng hết cỡ để không bị bóp chữ trên màn hẹp — nút và bố
   cục dọc/canh giữa đã áp dụng chung cho mọi kích thước ở trên rồi. */
@media (max-width: 480px) {
  .tuvi-redeem-btn { width: 100%; }
  .tuvi-redeem-input { text-align: left; padding-left: 12px; }
}

.tuvi-qr-wrap {
  text-align: center;
  margin: 8px 0;
}

.tuvi-qr-wrap img {
  max-width: 148px;
  border: 3px solid var(--tuvi-border);
  border-radius: var(--tuvi-radius-sm);
  padding: 4px;
  background: #fff;
}

.tuvi-bank-info {
  background: #fdf8f8;
  border: 1px solid var(--tuvi-border);
  border-radius: var(--tuvi-radius-sm);
  padding: 10px 14px;
  margin: 8px 0;
}

.tuvi-bank-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: var(--tuvi-text-base);
  border-bottom: 1px solid rgba(144,0,0,.06);
}

.tuvi-bank-row:last-child { border-bottom: none; }

.tuvi-bank-row span { color: var(--tuvi-text-muted); }

.tuvi-bank-row strong { color: var(--tuvi-text); font-weight: 600; }

.tuvi-amount-highlight { color: var(--tuvi-primary) !important; font-size: var(--tuvi-text-lg); }

/* Vá lỗi #3: wrapper giữ value + nút copy đi cùng nhau, để .tuvi-bank-row
   (justify-content:space-between) vẫn chỉ thấy 2 khối (label | value+nút)
   thay vì bị dàn đều 3 phần tử. */
.tuvi-bank-value-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tuvi-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: 1.5px solid var(--tuvi-border);
  border-radius: 7px;
  background: #fff;
  color: var(--tuvi-text-muted);
  cursor: pointer;
  transition: var(--tuvi-transition);
}
.tuvi-copy-btn:hover,
.tuvi-copy-btn:focus-visible {
  border-color: var(--tuvi-gold);
  color: var(--tuvi-primary);
}
.tuvi-copy-btn .tuvi-icon-svg { width: 15px; height: 15px; }
/* Mặc định: icon copy hiện, icon check (thứ 2) ẩn */
.tuvi-copy-btn .tuvi-icon-svg + .tuvi-icon-svg { display: none; }
/* Trạng thái "vừa sao chép xong" — đảo lại: ẩn icon copy, hiện icon check */
.tuvi-copy-btn--done {
  border-color: var(--tuvi-primary);
  color: var(--tuvi-primary);
  background: rgba(144,0,0,.06);
}
.tuvi-copy-btn--done .tuvi-icon-svg:first-child { display: none; }
.tuvi-copy-btn--done .tuvi-icon-svg:last-child { display: inline-flex; }

.tuvi-note-reminder {
  font-size: var(--tuvi-text-sm);
  color: var(--tuvi-accent);
  text-align: center;
  line-height: 1.5;
  margin: 6px 0 8px;
  font-weight: 500;
}

.tuvi-note-highlight {
  color: var(--tuvi-accent) !important;
  font-family: monospace;
  letter-spacing: .5px;
  font-size: var(--tuvi-text-base);
}

.tuvi-payment-warn {
  font-size: var(--tuvi-text-sm);
  color: var(--tuvi-accent);
  text-align: center;
  margin: 10px 0 0;
  font-weight: 500;
}

/* Status kiểm tra thanh toán */
#tuvi-payment-status-wrap {
  margin-top: 8px;
  padding: 10px 14px;
  background: #f8fdf8;
  border: 1px solid #c8e0c8;
  border-radius: var(--tuvi-radius-sm);
}

.tuvi-checking-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--tuvi-text-base);
  color: #2e6b3e;
  font-weight: 500;
}

.tuvi-checking-dot {
  width: 10px;
  height: 10px;
  background: #48aa60;
  border-radius: 50%;
  animation: tuvi-blink 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

.tuvi-check-actions {
  margin-top: 8px;
  text-align: center;
}

.tuvi-check-actions--ad {
  display: none;
}

.tuvi-check-actions--referral {
  margin-top: 10px;
}

.tuvi-check-actions .tuvi-btn-secondary {
  font-size: var(--tuvi-text-sm);
  padding: 6px 16px;
}

.tuvi-check-hint {
  font-size: var(--tuvi-text-xs);
  color: #999;
  margin-top: 4px;
}

@keyframes tuvi-blink { 0%,100% { opacity:.3; } 50% { opacity:1; } }

/* ── ERROR ── */
.tuvi-error {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 24px;
  padding: 14px 16px;
  text-align: left;
  background: #f7f0e6;
  border: 1px solid #e8d9c8;
  border-left: 3px solid var(--tuvi-primary);
  border-radius: var(--tuvi-radius-sm);
}

.tuvi-error-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: var(--tuvi-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  margin-top: 1px;
}

#tuvi-error-msg {
  flex: 1 1 260px;
  min-width: 0;
  font-size: var(--tuvi-text-base);
  color: var(--tuvi-text-light);
  line-height: 1.6;
  margin: 0;
}

/* Nút "Thử lại" — cố định kích thước riêng, KHÔNG để flex tự co giãn theo
   khoảng trống còn lại của hàng (đó là lý do trước đây nó bị bóp nhỏ tới
   mức chữ xuống dòng và trông như 1 con dấu tròn trên màn hình hẹp). Luôn
   đứng thành 1 khối full-width riêng, xuống hàng dưới nội dung — vừa là
   layout an toàn ở mọi kích thước màn hình, vừa nổi bật rõ ràng là hành
   động chính cần bấm khi gặp lỗi. */
#tuvi-retry-btn.tuvi-btn-secondary {
  flex: 1 0 100%;
  width: 100%;
  margin-top: 2px;
  padding: 11px 16px;
  white-space: nowrap;
  background: var(--tuvi-primary) !important;
  color: #fff !important;
  border-radius: var(--tuvi-radius-sm);
}
#tuvi-retry-btn.tuvi-btn-secondary:hover {
  background: var(--tuvi-primary-dark) !important;
}

.tuvi-error-list {
  margin: 0;
  padding-left: 18px;
}

.tuvi-error-list li {
  margin: 2px 0;
}

/* ── FOOTER ── */
.tuvi-footer {
  border-top: 1px solid var(--tuvi-border);
  padding: 14px 20px;
  text-align: center;
  font-size: var(--tuvi-text-sm);
  color: var(--tuvi-text-muted);
  background: linear-gradient(135deg, #f7f1e6, #fdf9f4);
}

.tuvi-footer p { margin: 0; }

/* Khi không bật banner affiliate, tuvi_affiliate_render() trả về chuỗi
   rỗng khiến .tuvi-footer thành 1 khối trống nhưng vẫn giữ border-top +
   padding — tạo ra 1 dải sáng "vô nghĩa" nằm giữa thẻ chính và dòng phiên
   bản, khiến khu vực cuối trang trông rời rạc thành 3 mảnh. Ẩn hẳn khối
   này khi không có nội dung bên trong. */
.tuvi-footer:empty {
  display: none;
}

/* Dòng phiên bản / bản quyền — thông tin cố định của plugin, không phụ
   thuộc affiliate có bật hay không. Dùng chung tông đỏ đô + hiệu ứng mây
   như banner đầu trang (không chữ), để đây là điểm khép lại đồng bộ với
   mở đầu của khối, thay vì 1 dải sáng rời rạc. Chiều cao được thu gọn tối
   đa vì chỉ có đúng 1 dòng chữ ngắn. */
.tuvi-footer-meta {
  position: relative;
  overflow: hidden;
  padding: 8px 20px;
  text-align: center;
  font-size: var(--tuvi-text-xs);
  color: rgba(247, 234, 211, .78);
  letter-spacing: .2px;
  background: linear-gradient(120deg, var(--tuvi-wine-deep) 0%, var(--tuvi-wine) 45%, var(--tuvi-primary-dark) 100%);
}

/* Hiệu ứng mây vàng mờ lặp lại — cùng hình cloud-motif.png dùng ở banner,
   lát mỏng và mờ để tạo chất liệu chứ không cạnh tranh với dòng chữ. */
.tuvi-footer-meta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/cloud-motif.png');
  background-repeat: repeat-x;
  background-size: 160px auto;
  background-position: center;
  opacity: .16;
  pointer-events: none;
}

.tuvi-footer-meta span {
  position: relative;
  z-index: 1;
}

/* Khi .tuvi-footer bị ẩn (không banner), .tuvi-footer-meta trở thành phần
   tử cuối cùng sát rìa bo góc dưới của .tuvi-wrapper — bo lại góc để nó
   liền mạch với khung thẻ chính thay vì có cạnh vuông lộ ra ngoài bo tròn. */
.tuvi-wrapper > .tuvi-footer-meta:last-child {
  border-bottom-left-radius: var(--tuvi-radius);
  border-bottom-right-radius: var(--tuvi-radius);
}

/* Mobile — thu hẹp thêm padding dọc, chữ vẫn đủ dễ đọc */
@media (max-width: 560px) {
  .tuvi-footer-meta {
    padding: 7px 16px;
    font-size: 10.5px;
  }
  .tuvi-footer-meta::before {
    background-size: 120px auto;
  }
}

/* ── HÀNG DISCLAIMER + NÚT "XEM LẠI LUẬN GIẢI" ──
   Đặt nút nhỏ ngay cạnh dòng cam kết cuối form thay vì làm 1 banner nổi
   che nội dung. Trên desktop nằm 2 bên cùng hàng; hết chỗ thì tự xuống
   dòng. Khu vực này nằm trong .tuvi-submit-area, vốn đã dán cố định (sticky)
   ở đáy màn hình trên mobile — nên nút cũng "cố định" theo, không cần
   position:fixed riêng, không đè lên nội dung khác. */
.tuvi-disclaimer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.tuvi-disclaimer-row .tuvi-disclaimer {
  margin: 0;
  flex: 1 1 260px;
  text-align: center;
}

/* Nút nhỏ dạng "Premium Secondary Action" — pill vàng gold ánh kim, cùng
   tông với ký hiệu/chấm trạng thái "Trả phí" của plugin (radial-gradient
   kem sáng → vàng kim → nâu vàng đậm), để người dùng nhận ra ngay đây là
   đặc quyền của tài khoản Premium. Có hiệu ứng ánh sáng quét qua khi rê
   chuột, giống nút CTA chính "Xem Lá Số Tử Vi". */
html body .tuvi-wrapper .tuvi-restore-fab {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: radial-gradient(circle at 32% 28%, #ffedbf 0%, var(--tuvi-gold) 55%, #9c7419 100%) !important;
  color: #6B0000 !important;
  border: 1px solid #b9902a !important;
  border-radius: 999px !important;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(156,116,25,.35) !important;
  transition: var(--tuvi-transition);
}

/* Icon "↻" — đổi từ vàng kim sang nâu đỏ đậm để nổi trên nền vàng
   (trước đây nền kem sáng nên icon dùng màu vàng kim mới tương phản
   được; giờ nền đã là vàng kim nên phải đổi màu icon ngược lại). */
html body .tuvi-wrapper .tuvi-restore-fab .tuvi-restore-fab-icon {
  color: var(--tuvi-primary-dark) !important;
}

html body .tuvi-wrapper .tuvi-restore-fab .tuvi-icon-svg {
  width: 13px;
  height: 13px;
  color: var(--tuvi-primary-dark) !important;
}

/* Dải sáng quét ngang khi hover — cùng công thức với .tuvi-btn-submit::before */
html body .tuvi-wrapper .tuvi-restore-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
html body .tuvi-wrapper .tuvi-restore-fab:hover::before,
html body .tuvi-wrapper .tuvi-restore-fab:focus-visible::before { transform: translateX(100%); }

html body .tuvi-wrapper .tuvi-restore-fab:hover,
html body .tuvi-wrapper .tuvi-restore-fab:focus-visible {
  border-color: #7a5a12 !important;
  box-shadow: 0 3px 12px rgba(156,116,25,.5) !important;
  outline: none;
}

html body .tuvi-wrapper .tuvi-restore-fab:active { transform: translateY(1px); }

/* Trên mobile, khu vực submit đã dán đáy màn hình + nền phủ sẵn (xem
   .tuvi-submit-area trong @media 640px) nên chỉ cần thu nhỏ khoảng cách.
   Nút vẫn giữ nguyên kích thước vừa đủ nội dung — KHÔNG kéo full width —
   để tiếp tục đọc như 1 hành động phụ, không phải CTA chính. */
@media (max-width: 640px) {
  .tuvi-disclaimer-row {
    gap: 8px;
    margin-top: 8px;
  }
  .tuvi-disclaimer-row .tuvi-disclaimer {
    flex-basis: 100%;
  }
}

/* ── PRINT ── */
@media print {
  .tuvi-header, .tuvi-form-section, .tuvi-result-footer,
  .tuvi-footer, .tuvi-footer-meta, .tuvi-wuxing-banner, .tuvi-zodiac-strip,
  .tuvi-restore-fab { display: none !important; }
  .tuvi-result-body { border: none; padding: 0; }
}

/* ── RESPONSIVE ── */
@media (max-width: 560px) {
  .tuvi-form-grid { grid-template-columns: 1fr; gap: 14px; }
  .tuvi-form-section { padding: 14px 14px 0; }
  .tuvi-result-section { padding: 14px 14px 0; }
  .tuvi-result-footer { padding: 12px 14px 18px; }
  .tuvi-modal { margin: 8px; }
  .tuvi-wuxing-item { padding: 6px 2px; }
  .tuvi-wuxing-item .wx-name { display: none; }
  .tuvi-result-body { padding: 18px 16px; }
}

/* ═══════════════════════════════════════════════
   MOBILE APP — tối ưu như ứng dụng điện thoại
   Áp dụng cho màn hình ≤ 480px
   ═══════════════════════════════════════════════ */
@media (max-width: 560px) {
  .tuvi-wrapper {
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
    border-left: none;
    border-right: none;
    margin: 0;
  }

  /* Header: gọn, đủ thoáng */
  .tuvi-header {
    min-height: 150px;
    padding: 18px 16px 16px;
  }
  .tuvi-header::after { background-position: center 40%; }
  .tuvi-title { font-size: 21px; letter-spacing: .5px; }
  .tuvi-title-divider { margin: 4px 0 7px; }

  /* Wuxing banner */
  .tuvi-wuxing-banner { gap: 0; }
  .tuvi-wuxing-item { padding: 6px 2px; flex: 1; }
  .tuvi-wuxing-item .wx-name { display: none; }
  .tuvi-wuxing-item .wx-symbol { font-size: 17px; }

  /* Intro */
  .tuvi-intro { padding: 12px 16px; }
  .tuvi-intro p { font-size: var(--tuvi-text-sm); line-height: 1.7; margin: 0; }

  /* Form section — padding thoáng hơn */
  .tuvi-form-section { padding: 16px 16px 0; }
  .tuvi-form-card {
    padding: 20px 16px 20px;
    border-radius: 12px;
  }
  .tuvi-form-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Label: thoáng hơn, và CỐ TÌNH lớn hơn chữ trong ô nhập (16px) — ô nhập
     không thể giảm xuống dưới 16px vì sẽ làm Safari/iOS tự động zoom to khi
     bấm vào ô, nên muốn tiêu đề trông "to hơn" thì phải tăng tiêu đề lên
     thay vì giảm ô nhập. */
  .tuvi-label {
    font-size: 17px !important;
    margin-bottom: 7px;
  }

  /* Input/Select: touch-friendly, ≥16px ngăn iOS zoom.
     Toàn bộ ô/nút chọn trên mobile dùng chung 1 cỡ chữ (16px) và 1 chiều
     cao tối thiểu (50px) — kể cả nút Nam/Nữ, Dương/Âm lịch — để không có
     hàng nào bị lệch cao/lệch cỡ chữ so với hàng khác. */
  .tuvi-input,
  .tuvi-select,
  .tuvi-gender-btn,
  .tuvi-toggle-btn {
    padding: 13px 14px;
    font-size: 16px !important;
    border-radius: 9px;
    min-height: 50px;
    line-height: 1.4;
  }
  .tuvi-input,
  .tuvi-select {
    font-weight: 400 !important;
  }
  .tuvi-input::placeholder { font-size: 16px !important; color: var(--tuvi-placeholder-color) !important; }
  textarea.tuvi-input {
    font-size: 16px;
    font-weight: 400 !important;
    min-height: 88px;
    padding: 12px 14px;
  }

  /* Gender + toggle buttons */
  .tuvi-gender-group { gap: 10px; }
  .tuvi-toggle-group { gap: 8px; }
  .tuvi-toggle-btn { flex: 1; }

  /* Time input */
  .tuvi-time-group { gap: 8px; }
  .tuvi-time-part { text-align: center; }

  /* Category buttons: lưới ô icon 3 cột, gọn và dễ quét mắt trên mobile
     (trước đây selector sai tên class .tuvi-req-grid nên rule không áp dụng
     được, khiến ô danh mục tràn full-width theo layout desktop) */
  .tuvi-request-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px;
  }
  .tuvi-request-btn {
    padding: 14px 6px 12px;
    border-radius: 10px;
    gap: 8px;
    min-height: 108px;
  }
  .tuvi-req-icon { width: 42px; height: 42px; font-size: 19px; }
  .tuvi-req-text { font-size: 12.5px; line-height: 1.3; }

  /* Cat note */
  .tuvi-cat-note { margin-top: 14px; }
  .tuvi-badge-legend { font-size: 11px; padding: 4px 10px; }

  /* Card cá nhân hóa — mobile: giảm padding, chữ nhỏ lại một chút. */
  .tuvi-extra-wrap { padding: 14px; }
  .tuvi-extra-title { font-size: 14px; }
  .tuvi-extra-desc { font-size: var(--tuvi-text-sm); }
  .tuvi-extra-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Câu hỏi note */
  .tuvi-cauhoi-note { font-size: var(--tuvi-text-sm); padding: 9px 12px; }

  /* Submit area */
  .tuvi-submit-area { margin-top: 22px; padding-bottom: 4px; }
  .tuvi-btn-submit {
    width: 100%;
    padding: 16px 20px;
    font-size: var(--tuvi-text-lg);
    border-radius: 10px;
    justify-content: center;
    letter-spacing: .2px;
  }
  .tuvi-disclaimer {
    font-size: var(--tuvi-text-xs);
    margin-top: 12px;
    padding: 0 4px;
    line-height: 1.6;
  }

  /* Result section */
  .tuvi-result-section { padding: 16px 16px 0; }
  .tuvi-result-header { padding: 20px 18px 16px; }
  .tuvi-result-name { font-size: 19px; }
  .tuvi-result-meta { font-size: var(--tuvi-text-sm); margin-top: 5px; }
  .tuvi-result-badge { font-size: var(--tuvi-text-xs); padding: 3px 14px; margin-bottom: 8px; }
  .tuvi-result-body { padding: 18px 16px 20px; }
  .tuvi-result-body p,
  .tuvi-result-body li { font-size: var(--tuvi-text-md); line-height: 1.75; }
  .tuvi-result-body h2 { font-size: var(--tuvi-text-xl); margin-top: 24px; }
  .tuvi-result-body h3 { font-size: var(--tuvi-text-lg); margin-top: 18px; }
  .tuvi-result-body .tuvi-star-cards { grid-template-columns: 1fr; }

  /* Result footer */
  .tuvi-result-footer {
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 20px;
  }
  .tuvi-btn-secondary {
    width: 100%;
    padding: 13px 16px;
    font-size: var(--tuvi-text-md);
    border-radius: 9px;
  }

  /* Rating card */
  .tuvi-rating-section { margin: 20px 0 10px; }
  .tuvi-rating-card { padding: 20px 16px 18px; border-radius: 12px; }
  .tuvi-rating-title { font-size: var(--tuvi-text-md); margin-bottom: 4px; }
  .tuvi-rating-subtitle { font-size: var(--tuvi-text-sm); }
  .tuvi-btn-rating { width: 100%; padding: 13px; font-size: var(--tuvi-text-md); }

  /* ── MODAL MOBILE: bottom sheet chiếm đúng 1 màn hình, không cần scroll ── */
  .tuvi-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .tuvi-modal {
    margin: 0;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 100%;
    /* Chỉ giới hạn TRẦN chiều cao (không ép height cố định) — modal tự co
       theo nội dung thật (VD: bước Giá bán ngắn) thay vì luôn cao 92dvh và
       để lại khoảng trắng lớn phía trên footer. Step dài (QR) vẫn tự scroll
       nhờ .tuvi-modal-body { flex:1; overflow-y:auto }. */
    max-height: 92dvh;
  }
  .tuvi-modal-header {
    padding: 16px 20px 12px;
  }
  .tuvi-modal-header h3 { font-size: var(--tuvi-text-xl); }

  /* Body compact: reduce padding, không scroll trừ step QR */
  .tuvi-modal-body {
    padding: 14px 18px 8px;
    /* Step-0 không cần scroll — step-2 (QR) có nhiều nội dung hơn thì mới scroll */
  }
  .tuvi-modal-body p { font-size: var(--tuvi-text-base); line-height: 1.6; margin-bottom: 10px; }

  /* Footer: 2 nút đầy đủ chiều rộng, dễ bấm ngón tay */
  .tuvi-modal-footer {
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
    flex-wrap: nowrap;
  }
  .tuvi-modal-footer-close {
    padding: 14px 8px;
    font-size: var(--tuvi-text-base);
    border-radius: 10px;
  }
  .tuvi-modal-footer-primary {
    padding: 14px 8px;
    font-size: var(--tuvi-text-base);
    border-radius: 10px;
  }

  /* Compare table compact hơn trên mobile */
  .tuvi-compare-table > div { font-size: var(--tuvi-text-sm) !important; padding: 8px 6px !important; }
  .tuvi-compare-head { font-size: var(--tuvi-text-sm) !important; padding: 9px 6px !important; }

  /* Payment price compact */
  .tuvi-payment-price { padding: 10px 14px; margin-top: 10px; }
  .tuvi-payment-price span { font-size: var(--tuvi-text-3xl); }
  .tuvi-payment-price small { font-size: var(--tuvi-text-xs); }


  /* Payment step 0 */
  .tuvi-benefit-list { gap: 11px; margin-bottom: 18px; margin-top: 2px; }
  .tuvi-benefit-list li { font-size: var(--tuvi-text-md); gap: 11px; align-items: flex-start; line-height: 1.5; }
  .tuvi-benefit-check { flex-shrink: 0; margin-top: 2px; }
  .tuvi-compare-table { font-size: var(--tuvi-text-sm); }
  .tuvi-compare-table > div { padding: 9px 6px; }
  .tuvi-payment-price { padding: 14px 16px; margin: 14px 0 16px; }
  .tuvi-payment-price span { font-size: 28px; }
  .tuvi-payment-price small { font-size: var(--tuvi-text-sm); display: block; margin-top: 3px; line-height: 1.5; }

  /* Payment step 2: bank info */
  .tuvi-bank-info { padding: 14px; }
  .tuvi-bank-row { padding: 9px 0; font-size: var(--tuvi-text-md); }
  .tuvi-note-box { padding: 14px; }
  .tuvi-note-code { font-size: var(--tuvi-text-xl); letter-spacing: 1px; }
  .tuvi-qr-wrap img { max-width: 180px; }

  /* Paywall CTA */
  .tuvi-paywall-cta { padding: 16px 16px 18px; }
  .tuvi-paywall-cta-btn { width: 100%; padding: 14px; font-size: var(--tuvi-text-md); }

  /* Error */
  .tuvi-error { margin: 12px; padding: 12px 14px; border-radius: 10px; }

  /* Loading */
  .tuvi-loading-inner { padding: 32px 18px; }
  .tuvi-loading-text { font-size: var(--tuvi-text-md); }

  /* Footer */
  .tuvi-footer { padding: 16px; font-size: var(--tuvi-text-sm); }
}

/* ── VÁ LỖI #2 (HIGH): iOS vẫn tự động zoom khi bấm vào ô nhập lúc điện
   thoại đang xoay NGANG màn hình ──
   Khối "@media (max-width: 560px)" ở trên đã ép font-size ô nhập lên 16px
   để chặn iOS Safari tự động zoom (mặc định ô nhập dùng
   var(--tuvi-text-md) = 14px, dưới ngưỡng an toàn 16px của iOS). Nhưng
   điều kiện đó chỉ xét CHIỀU RỘNG màn hình — khi xoay ngang, chiều rộng
   của hầu hết điện thoại (iPhone SE ~568px, iPhone 14 ~844px, đa số
   Android ~700–930px) đều VƯỢT 560px, nên khối trên không áp dụng, ô
   nhập rơi về lại 14px mặc định → Safari lại tự động zoom như cũ.

   Khối dưới đây bắt riêng trường hợp "điện thoại xoay ngang" bằng cách
   dùng max-height (chiều cao lúc xoay ngang luôn thấp, hiếm khi vượt
   560px) + orientation:landscape, kết hợp thêm pointer:coarse để CHỈ
   khớp thiết bị cảm ứng (điện thoại/tablet), không ảnh hưởng cửa sổ
   trình duyệt desktop/laptop dùng chuột dù có bị thu nhỏ chiều cao.
   Chỉ chỉnh font-size (đúng nguyên nhân gây zoom) — không đổi padding/
   layout khác của khối mobile ở trên để tránh hồi quy ngoài phạm vi. */
@media (max-height: 560px) and (orientation: landscape) and (pointer: coarse) {
  .tuvi-input,
  .tuvi-select,
  .tuvi-gender-btn,
  .tuvi-toggle-btn {
    font-size: 16px !important;
  }
  .tuvi-input::placeholder { font-size: 16px !important; }
  textarea.tuvi-input { font-size: 16px !important; }
}

/* ═══════════════════════════════════
   THANH TOÁN — TRƯỚC / TRONG / SAU
   ═══════════════════════════════════ */

/* ── BƯỚC 0: Quyền lợi & So sánh gói (trước thanh toán) ── */
.tuvi-benefit-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.tuvi-benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--tuvi-text-base);
  color: var(--tuvi-text-light);
  line-height: 1.45;
}
.tuvi-benefit-check {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tuvi-gold-dim), var(--tuvi-gold-light));
  color: var(--tuvi-black);
  font-size: var(--tuvi-text-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.tuvi-compare-table {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--tuvi-border);
  border-radius: var(--tuvi-radius-sm);
  overflow: hidden;
  margin: 4px 0 16px;
  font-size: var(--tuvi-text-sm);
}
.tuvi-compare-table > div {
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid var(--tuvi-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tuvi-compare-table > div:nth-child(3n+1):not(.tuvi-compare-head) { justify-content: flex-start; text-align: left; color: var(--tuvi-text); font-weight: 500; line-height: 1.35; }
.tuvi-compare-head {
  font-weight: 600;
  letter-spacing: .3px;
  background: linear-gradient(180deg, #f7f1e6, #f0e6d6);
  color: var(--tuvi-text-light);
  padding-top: 12px;
  padding-bottom: 12px;
}
.tuvi-compare-head.tuvi-compare-paid {
  background: linear-gradient(135deg, var(--tuvi-wine), var(--tuvi-primary-dark));
  color: var(--tuvi-gold-light);
}
/* Cột "Đầy đủ" được tô nền vàng nhạt xuyên suốt để mắt dồn về giá trị nâng cấp */
.tuvi-compare-table > div:nth-child(3n) { background: rgba(212,175,55,.07); }
.tuvi-compare-table .tuvi-yes {
  color: var(--tuvi-success);
  font-weight: 600;
  font-size: var(--tuvi-text-lg);
}
.tuvi-compare-table .tuvi-no {
  color: #c3b5a5;
  font-size: var(--tuvi-text-lg);
  font-weight: 400;
}
.tuvi-compare-table > div:nth-last-child(-n+3) { border-bottom: none; }

.tuvi-modal-step-actions { display: flex; gap: 10px; margin-top: 4px; }
.tuvi-modal-step-actions .tuvi-btn-secondary { flex: 1; }
.tuvi-modal-step-actions .tuvi-btn-submit { flex: 2; }

/* ── BƯỚC 2: Trạng thái xử lý trực quan (trong thanh toán) ── */
.tuvi-progress-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}
.tuvi-progress-step {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f0e4d8;
  color: var(--tuvi-text-muted);
  font-size: var(--tuvi-text-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--tuvi-transition);
}
.tuvi-progress-step.tuvi-step-active {
  background: linear-gradient(135deg, var(--tuvi-wine), var(--tuvi-primary));
  color: #fff;
  box-shadow: 0 0 0 3px rgba(144,0,0,.14);
}
.tuvi-progress-step.tuvi-step-done {
  background: linear-gradient(135deg, var(--tuvi-gold-dim), var(--tuvi-gold-light));
  color: var(--tuvi-black);
}
.tuvi-progress-line { width: 24px; height: 2px; background: #f0e4d8; }
.tuvi-progress-line.tuvi-line-done { background: linear-gradient(90deg, var(--tuvi-gold-dim), var(--tuvi-gold-light)); }

#tuvi-payment-status-wrap {
  margin-top: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f8fdf8, #f3faf4);
  border: 1px solid #c8e0c8;
  border-radius: var(--tuvi-radius-sm);
  transition: var(--tuvi-transition);
}

/* ── BƯỚC 3: Sau thanh toán — xác nhận & kích hoạt ── */
.tuvi-success-wrap { text-align: center; padding: 8px 4px 4px; }

.tuvi-success-badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,142,60,.16), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.tuvi-success-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #48aa60;
  animation: tuvi-success-ring .9s ease-out;
}
.tuvi-success-check {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2e7d32, #48aa60);
  color: #fff;
  font-size: var(--tuvi-text-2xl);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tuvi-pop .35s cubic-bezier(.4,0,.2,1) .15s both;
}
@keyframes tuvi-success-ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes tuvi-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.tuvi-success-title {
  font-size: var(--tuvi-text-xl);
  font-weight: 600;
  color: var(--tuvi-success);
  margin: 0 0 6px;
}
.tuvi-success-desc {
  font-size: var(--tuvi-text-base);
  color: var(--tuvi-text-light);
  margin: 0 0 14px;
  line-height: 1.6;
}
.tuvi-success-activated {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  font-size: var(--tuvi-text-sm);
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--tuvi-gold-title);
  background: linear-gradient(135deg, var(--tuvi-wine) 0%, var(--tuvi-primary) 55%, var(--tuvi-wine-deep) 100%);
  padding: 7px 18px;
  border-radius: 20px;
  margin-bottom: 16px;
  border: 1.5px solid var(--tuvi-gold);
  box-shadow: 0 0 0 1px rgba(181,138,60,.25), 0 4px 16px rgba(122,31,31,.35), inset 0 1px 0 rgba(255,255,255,.08);
  animation: tuviUnlockPop .5s cubic-bezier(.2,1.4,.4,1) both;
}
.tuvi-success-activated-star {
  display: inline-flex;
  align-items: center;
  color: var(--tuvi-gold-light);
  filter: drop-shadow(0 0 3px rgba(243,214,122,.9)) drop-shadow(0 0 7px rgba(181,138,60,.7));
  animation: tuviStarGlow 1.8s ease-in-out infinite;
}
.tuvi-success-activated-star svg { width: 15px; height: 15px; fill: currentColor; }
.tuvi-success-activated-text { position: relative; z-index: 1; }
.tuvi-success-activated-shine {
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: tuviShineSweep 2.6s ease-in-out infinite;
  animation-delay: .4s;
  pointer-events: none;
}
@keyframes tuviShineSweep {
  0%   { left: -60%; }
  35%  { left: 130%; }
  100% { left: 130%; }
}
@keyframes tuviStarGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(243,214,122,.9)) drop-shadow(0 0 7px rgba(181,138,60,.7)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 6px rgba(243,214,122,1)) drop-shadow(0 0 13px rgba(181,138,60,.95)); transform: scale(1.15); }
}
@keyframes tuviUnlockPop {
  0%   { transform: scale(.85); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
.tuvi-success-redirect {
  font-size: var(--tuvi-text-sm);
  color: var(--tuvi-text-muted);
}
.tuvi-success-redirect strong { color: var(--tuvi-primary); }

/* ─────────────────────────────────────────
   AFFILIATE BANNER
───────────────────────────────────────── */
.tuvi-affiliate-slot { display:flex; justify-content:center; margin:18px 0; }
.tuvi-affiliate-banner { display:inline-block; max-width:100%; line-height:0; border-radius:8px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.08); transition:transform .15s ease; }
.tuvi-affiliate-banner:hover { transform:translateY(-2px); }
.tuvi-affiliate-banner img { display:block; max-width:100%; height:auto; }
.tuvi-affiliate-footer .tuvi-affiliate-slot { margin-bottom:14px; }

/* ─────────────────────────────────────────
   RATING WIDGET
───────────────────────────────────────── */
.tuvi-rating-section {
  margin: 28px 0 8px;
  display: none;
}
.tuvi-rating-card {
  background: linear-gradient(135deg, var(--tuvi-bg) 0%, #f6efdd 100%);
  border: 1.5px solid var(--tuvi-border);
  border-radius: 18px;
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(122,31,31,.07);
  position: relative;
  overflow: hidden;
}
.tuvi-dark .tuvi-rating-card {
  background: linear-gradient(135deg, #2a1f0f 0%, #231a10 100%);
  border-color: #7a4f1a;
}
.tuvi-rating-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(181,138,60,.15) 0%, transparent 70%);
  border-radius: 50%;
}
.tuvi-rating-stars-deco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--tuvi-text-2xl);
  color: var(--tuvi-gold);
  margin-bottom: 10px;
  animation: tuvi-star-pulse 2s ease-in-out infinite;
}
@keyframes tuvi-star-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .7; transform: scale(1.08); }
}
.tuvi-rating-title {
  font-size: var(--tuvi-text-xl);
  font-weight: 600;
  color: var(--tuvi-primary-dark);
  margin: 0 0 6px;
  line-height: 1.4;
}
.tuvi-dark .tuvi-rating-title { color: var(--tuvi-gold-title); }
.tuvi-rating-subtitle {
  font-size: var(--tuvi-text-sm);
  color: var(--tuvi-gold-dim);
  margin: 0 0 20px;
  line-height: 1.5;
}
.tuvi-dark .tuvi-rating-subtitle { color: var(--tuvi-gold-light); }

/* ── 5 sao đánh giá (thay cho thanh kéo % trước đây) ────────────────────
   Dùng chung glyph "star" (ngôi sao 5 cánh) với các badge Premium khác
   trong giao diện để đồng bộ hệ hình ảnh. Sao được tô dần theo hover/
   chọn, dùng đúng --tuvi-gold (MÀU NHẤN DUY NHẤT của toàn giao diện)
   thay vì tông cam/hồng lệch tông trước đây. */
.tuvi-rating-stars-input {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
}
/* Reset mạnh + !important trên mọi thuộc tính box/appearance: nhiều theme
   WordPress gán sẵn style mặc định cho <button> (nền tròn xám, border,
   box-shadow, màu chữ đen...) đè lên component này nếu chỉ set thường.
   Ép màu vàng đồng (--tuvi-gold) bằng !important trên "color" (currentColor
   của SVG ăn theo) và tắt hẳn stroke (SVG gốc trong tuvi_icon() có sẵn
   stroke="currentColor" cho icon viền — không phù hợp với sao tô đặc). */
.tuvi-star-btn {
  all: unset;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  line-height: 0 !important;
  color: rgba(181,138,60,.16) !important;
  transition: transform .12s, color .12s, filter .12s;
}
.tuvi-star-btn svg {
  width: 30px !important;
  height: 30px !important;
  fill: currentColor !important;
  stroke: var(--tuvi-gold-dim) !important;
  stroke-width: 1 !important;
  pointer-events: none;
}
.tuvi-star-btn:hover,
.tuvi-star-btn:focus-visible { transform: scale(1.12); }
.tuvi-star-btn.is-active {
  color: var(--tuvi-gold) !important;
  filter: drop-shadow(0 0 5px rgba(212,175,55,.75)) !important;
}
.tuvi-star-btn.is-active svg { stroke: var(--tuvi-gold-dim) !important; }
.tuvi-dark .tuvi-star-btn { color: rgba(201,165,102,.14) !important; }
.tuvi-dark .tuvi-star-btn svg { stroke: #6b501f !important; }
.tuvi-dark .tuvi-star-btn.is-active {
  color: var(--tuvi-gold-light) !important;
  filter: drop-shadow(0 0 5px rgba(201,165,102,.7)) !important;
}
.tuvi-dark .tuvi-star-btn.is-active svg { stroke: #6b501f !important; }
@media (max-width: 480px) {
  .tuvi-star-btn { width: 36px !important; height: 36px !important; }
  .tuvi-star-btn svg { width: 26px !important; height: 26px !important; }
}

/* Ô góp ý "Chúng tôi sẽ cải thiện sau góp ý của bạn" — ghi thẳng vào
   admin (cột rating_note, bảng wp_tuvi_history) cùng lượt đánh giá.
   Cân giữa theo đúng bố cục toàn khối .tuvi-rating-card (tiêu đề, sao,
   nút đều center) thay vì lệch trái một mình. */
/* Clearfix: nhiều theme gán "label { float: left; width: ...% }" mặc định
   (kiểu form ngang "nhãn - ô nhập"). Nếu label bên dưới bị float mà
   .tuvi-rating-note-wrap không tự chứa (contain) float đó, chiều cao của
   wrap sẽ không tính luôn phần label, khiến textarea (không float) chảy
   đè lên ngay từ đỉnh wrap — chồng lên đúng đoạn label bị xuống dòng. */
.tuvi-rating-note-wrap {
  margin: 4px 0 20px;
  text-align: center;
  overflow: hidden; /* chứa float của label nếu theme áp float lên nó */
}
.tuvi-rating-note-label {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: auto !important;
  max-width: none !important;
  position: static !important;
  text-align: center !important;
  font-size: var(--tuvi-text-sm);
  font-weight: 600;
  color: var(--tuvi-primary-dark);
  margin: 0 0 8px !important;
  padding: 0 !important;
}
.tuvi-dark .tuvi-rating-note-label { color: var(--tuvi-gold-light); }

/* Reset mạnh + !important: nhiều theme WordPress gán sẵn text-transform/
   font-weight/font-size riêng cho <textarea> và ::placeholder (kiểu form
   mặc định của theme, thường IN HOA + đậm) — nếu không ép ở đây, ô góp ý
   sẽ tự động thừa hưởng style đó thay vì kiểu chữ thường/mảnh mong muốn. */
.tuvi-rating-note {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100%;
  min-height: 64px;
  resize: vertical;
  border: 1.5px solid var(--tuvi-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 auto;
  font-family: inherit !important;
  font-size: var(--tuvi-text-sm) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: center !important;
  color: var(--tuvi-primary-dark) !important;
  background: rgba(255,255,255,.75);
  box-sizing: border-box;
}
.tuvi-rating-note::placeholder {
  font-family: inherit !important;
  font-size: var(--tuvi-text-xs) !important;
  font-weight: 300 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: center !important;
  opacity: 1;
  color: var(--tuvi-text-muted) !important;
}
.tuvi-rating-note:focus {
  outline: none;
  border-color: var(--tuvi-gold);
  box-shadow: 0 0 0 3px rgba(181,138,60,.15);
}
.tuvi-dark .tuvi-rating-note {
  background: rgba(255,255,255,.05);
  border-color: #7a4f1a;
  color: var(--tuvi-gold-light) !important;
}
.tuvi-dark .tuvi-rating-note::placeholder { color: rgba(201,165,102,.65) !important; }

/* Display badge — tách biệt rõ ràng khỏi các sao phía trên bằng margin-top
   thay vì chỉ dựa vào margin-bottom, đảm bảo khoảng cách ổn định ngay cả
   khi nội dung phía trên thay đổi chiều cao. */
.tuvi-rating-display {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.7);
  border: 1.5px solid var(--tuvi-border);
  border-radius: 50px;
  padding: 8px 20px;
  margin-top: 4px;
  margin-bottom: 18px;
  backdrop-filter: blur(4px);
}

@media (max-width: 480px) {
  .tuvi-rating-card { padding: 24px 18px 20px; }
  .tuvi-rating-subtitle { margin-bottom: 20px; }
}
.tuvi-dark .tuvi-rating-display {
  background: rgba(255,255,255,.07);
  border-color: #7a4f1a;
}
.tuvi-rating-emoji { font-size: var(--tuvi-text-4xl); line-height: 1; }
.tuvi-rating-pct {
  font-size: var(--tuvi-text-4xl);
  font-weight: 600;
  color: var(--tuvi-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tuvi-rating-label-txt {
  font-size: var(--tuvi-text-base);
  color: var(--tuvi-primary-dark);
  font-weight: 600;
}
.tuvi-dark .tuvi-rating-label-txt { color: var(--tuvi-gold-light); }

/* Submit button — ĐỒNG BỘ HOÀN TOÀN với ngôn ngữ thiết kế nút CTA chính
   dùng xuyên suốt giao diện (.tuvi-btn-submit "Xem Lá Số Tử Vi",
   .tuvi-upgrade-btn "Nâng Cấp Premium"): cùng bo góc vuông nhẹ
   (--tuvi-radius-sm, KHÔNG còn bo tròn viên thuốc 50px riêng lẻ), cùng
   chữ HOA đậm 800 + letter-spacing, cùng hiệu ứng dải sáng lướt ngang khi
   hover (::before), cùng công thức box-shadow — để 3 nút hành động chính
   của toàn app trông như MỘT hệ thống, không phải 3 kiểu nút khác nhau. */
.tuvi-btn-rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--tuvi-primary-dark) 0%, var(--tuvi-primary) 100%) !important;
  color: var(--tuvi-gold-light) !important;
  border: 2px solid var(--tuvi-gold) !important;
  border-radius: var(--tuvi-radius-sm);
  padding: 16px 32px;
  font-size: var(--tuvi-text-md);
  font-family: var(--tuvi-font);
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .6px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(74,18,18,.4), 0 0 0 1px rgba(212,175,55,.25);
  transition: var(--tuvi-transition);
  position: relative;
  overflow: hidden;
}
.tuvi-btn-rating::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
.tuvi-btn-rating:hover::before { transform: translateX(100%); }
.tuvi-btn-rating:hover {
  color: #fff !important;
  border-color: rgba(212,175,55,.9) !important;
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 14px 32px rgba(74,18,18,.5), 0 0 0 1px rgba(212,175,55,.4);
}
.tuvi-btn-rating:active { transform: translateY(0) scale(1); }
.tuvi-btn-rating:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.tuvi-rating-btn-icon { font-size: var(--tuvi-text-xl); }

/* Thanks message */
.tuvi-rating-thanks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(90deg, #e8f5e9, #f1f8e9);
  border: 1.5px solid #a5d6a7;
  border-radius: 50px;
  padding: 12px 24px;
  font-size: var(--tuvi-text-md);
  font-weight: 600;
  color: var(--tuvi-success);
  margin-top: 4px;
  animation: tuvi-thanks-in .35s ease;
}
.tuvi-dark .tuvi-rating-thanks {
  background: linear-gradient(90deg, #0d2b10, #162d12);
  border-color: #2e5c30;
  color: #81c784;
}
@keyframes tuvi-thanks-in {
  from { opacity: 0; transform: translateY(8px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tuvi-thanks-icon { font-size: var(--tuvi-text-3xl); }

/* Print: hide rating */
@media print {
  .tuvi-rating-section { display: none !important; }
}

/* ─────────────────────────────────────────
   CÁ NHÂN HÓA KẾT QUẢ LUẬN GIẢI — Card Premium hiển thị trực tiếp
   (không phải accordion). Nền kem sáng đồng bộ form, viền vàng kim
   NHẠT hơn viền input để input nổi bật hơn, bo góc giống input.
───────────────────────────────────────── */
.tuvi-extra-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #FFFDF8;
  border: 1px solid rgba(212,175,55,.55);
  border-radius: var(--tuvi-radius);
  padding: 14px 18px;
}
.tuvi-dark .tuvi-extra-wrap {
  background: rgba(212,175,55,.05);
  border-color: rgba(212,175,55,.28);
}

/* Badge đỏ nhỏ "ĐỀ XUẤT" */
.tuvi-extra-badge {
  display: inline-block;
  align-self: flex-start;
  background: #7A0C14;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.tuvi-extra-title {
  font-family: var(--tuvi-font);
  font-size: var(--tuvi-text-xl);
  font-weight: 700;
  color: #3A2418;
  letter-spacing: .2px;
  line-height: 1.3;
  margin: 0 0 6px;
}
.tuvi-dark .tuvi-extra-title { color: var(--tuvi-gold-light); }

.tuvi-extra-desc {
  font-family: var(--tuvi-font);
  font-size: var(--tuvi-text-sm);
  color: var(--tuvi-text-muted);
  margin: 0;
  line-height: 1.5;
}
.tuvi-dark .tuvi-extra-desc { color: var(--tuvi-gold-dim); }

/* Đường phân cách mảnh, vàng kim rất nhạt — tách tiêu đề khỏi phần nhập liệu */
.tuvi-extra-divider {
  width: 100%;
  height: 1px;
  background: rgba(212,175,55,.22);
  margin: 12px 0;
}
.tuvi-dark .tuvi-extra-divider { background: rgba(212,175,55,.16); }

.tuvi-extra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
}
@media (max-width: 580px) {
  .tuvi-extra-grid { grid-template-columns: 1fr; gap: 12px; }
}
.tuvi-extra-field { display: flex; flex-direction: column; gap: 6px; }
.tuvi-extra-field-full { grid-column: 1 / -1; }

/* Label bên trong card — chữ thường, không in hoa, đồng bộ với label chuẩn */
.tuvi-extra-label {
  font-family: var(--tuvi-font);
  font-size: var(--tuvi-text-md);
  font-weight: 400;
  color: var(--tuvi-text-light);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0;
  line-height: 1.3;
}
.tuvi-dark .tuvi-extra-label { color: var(--tuvi-gold-light); }

/* ═══════════════════════════════════════════════════
   GÓI DỊCH VỤ — MIỄN PHÍ vs TRẢ PHÍ (gọn, không chồng lớp)
   ═══════════════════════════════════════════════════ */

/* ── Badge trạng thái hiện tại (trong header, dưới subtitle) ── */
.tuvi-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px auto 0;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(26,107,46,.14);
  border: 1px solid rgba(26,107,46,.4);
  color: #eafff0;
  font-size: var(--tuvi-text-sm);
  font-weight: 600;
  letter-spacing: .2px;
  transition: var(--tuvi-transition);
}
.tuvi-plan-badge[data-plan="paid"] {
  background: rgba(212,175,55,.18);
  border-color: rgba(212,175,55,.55);
  color: #fff6dc;
}
.tuvi-plan-badge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3ddc73;
  box-shadow: 0 0 0 3px rgba(61,220,115,.25);
  flex-shrink: 0;
}
.tuvi-plan-badge[data-plan="paid"] .tuvi-plan-badge-dot {
  background: var(--tuvi-gold-light);
  box-shadow: 0 0 0 3px rgba(212,175,55,.3);
}
.tuvi-plan-badge-text strong { font-weight: 600; }

/* ── Banner nâng cấp gọn — dùng chung cho cả 2 vị trí:
   (1) cạnh khu chọn danh mục xem lá số
   (2) cuối bản luận giải Miễn phí ── */
.tuvi-han-box {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--tuvi-input-bg);
  border: 1.5px solid var(--tuvi-gold);
  border-radius: var(--tuvi-radius);
  box-shadow: var(--tuvi-shadow);
}
.tuvi-han-box-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0 !important;
  margin-bottom: 8px;
  color: var(--tuvi-primary-dark);
  font-weight: 600;
}
.tuvi-han-box-label .tuvi-icon-svg { color: var(--tuvi-gold); }

.tuvi-upgrade-inline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: var(--tuvi-radius);
  background: linear-gradient(135deg, #fffaf0 0%, #fbf0d8 100%);
  border: 1.5px solid var(--tuvi-gold);
  box-shadow: var(--tuvi-shadow-lg), inset 0 0 0 1px rgba(212,175,55,.15);
  position: relative;
  overflow: hidden;
}
.tuvi-upgrade-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--tuvi-primary) 0%, var(--tuvi-primary-dark) 100%);
  box-shadow: 0 0 0 3px rgba(212,175,55,.35);
}
/* Ngôi sao phát sáng — cùng glyph ★ và hiệu ứng glow như .tuvi-dot-paid
   ở góc các ô danh mục Trả phí, để đồng bộ 1 tín hiệu "Trả phí" xuyên
   suốt giao diện thay vì icon vương miện trước đây. */
.tuvi-upgrade-star {
  font-size: 22px;
  color: #F3D27A;
  text-shadow: 0 0 6px rgba(243, 210, 122, .85), 0 0 12px rgba(212, 175, 55, .55);
}
.tuvi-upgrade-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tuvi-upgrade-text strong {
  font-size: var(--tuvi-text-md);
  color: var(--tuvi-primary-dark);
  font-weight: 700;
}
.tuvi-upgrade-text span {
  font-size: var(--tuvi-text-sm);
  color: var(--tuvi-text-light);
  line-height: 1.45;
}
.tuvi-btn-upgrade-inline {
  flex-shrink: 0;
  border: 1px solid rgba(212,175,55,.55) !important;
  border-radius: var(--tuvi-radius-sm) !important;
  padding: 12px 22px !important;
  font-size: var(--tuvi-text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  color: var(--tuvi-gold-light) !important;
  white-space: nowrap;
  background: linear-gradient(135deg, #4a0d12 0%, #7a0c14 55%, #5a0d12 100%) !important;
  box-shadow: 0 4px 14px rgba(58,10,10,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
  cursor: pointer;
  transition: var(--tuvi-transition);
  min-height: 44px;
}
.tuvi-btn-upgrade-inline:hover {
  color: #fff !important;
  border-color: rgba(212,175,55,.85) !important;
  box-shadow: 0 6px 18px rgba(58,10,10,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
  transform: translateY(-1px);
}
.tuvi-btn-upgrade-inline:active { transform: translateY(0); }


/* ── Dark theme ── */
.tuvi-dark .tuvi-upgrade-inline {
  background: linear-gradient(160deg, rgba(212,175,55,.10), rgba(212,175,55,.04));
  border-color: rgba(212,175,55,.3);
}
.tuvi-dark .tuvi-upgrade-text strong { color: #fff; }
.tuvi-dark .tuvi-upgrade-text span { color: rgba(255,255,255,.65); }

/* ── Mobile: banner xếp dọc, nút to full-width dễ bấm ── */
@media (max-width: 640px) {
  .tuvi-upgrade-inline {
    flex-wrap: wrap;
    padding: 14px;
  }
  .tuvi-upgrade-text { flex-basis: 100%; order: 1; }
  .tuvi-upgrade-icon { order: 0; }
  .tuvi-btn-upgrade-inline {
    order: 2;
    flex-basis: 100%;
    width: 100%;
    text-align: center;
    padding: 13px 14px;
    white-space: normal;
    line-height: 1.3;
  }
  .tuvi-plan-badge { font-size: 11.5px; padding: 6px 12px; }
}

/* ══════════════════════════════════════════════════════════
   BƯỚC 2 — LÁ SỐ (BẢNG 12 CUNG) + CHỌN DANH MỤC
   Đồng bộ hoàn toàn với ngôn ngữ thiết kế hiện có: dùng chung
   biến màu --tuvi-*, .tuvi-form-card/.tuvi-glass, bo góc và
   shadow giống các khối card khác trong plugin.
   ══════════════════════════════════════════════════════════ */

/* Fix cứng chống theme lấn cho toàn bộ khối lá số (không chỉ riêng
   grid 12 cung): nhiều theme đặt box-sizing/line-height/max-width
   riêng cho img, button, span... làm lệch layout trên mobile. */
.tuvi-chart-section, .tuvi-chart-section * {
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
}
.tuvi-chart-section { margin-top: 22px; max-width: 100%; overflow-x: hidden; }

.tuvi-chart-card { padding: 22px 20px 26px; }

.tuvi-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tuvi-chart-heading {
  font-family: var(--tuvi-font-title);
  font-weight: var(--tuvi-font-title-weight);
  font-size: var(--tuvi-text-4xl);
  color: var(--tuvi-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
/* Đồng bộ theo "nhãn" đỏ đô + viền vàng đang dùng chung toàn giao diện
   (cùng công thức với .tuvi-btn-upgrade-inline): nền gradient đỏ đô, viền
   vàng kim mỏng, chữ vàng nhạt hoa, bo góc theo --tuvi-radius-sm. Trước đây
   nút này để nền trong suốt + viền nâu nhạt, lệch tông với các nút "nhãn"
   khác trong giao diện — sửa lại 13/07/2026 theo yêu cầu. */
.tuvi-chart-back-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(212,175,55,.55) !important;
  border-radius: var(--tuvi-radius-sm) !important;
  padding: 8px 16px !important;
  font-family: var(--tuvi-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  color: var(--tuvi-gold-light) !important;
  white-space: nowrap;
  background: linear-gradient(135deg, #4a0d12 0%, #7a0c14 55%, #5a0d12 100%) !important;
  box-shadow: 0 4px 14px rgba(58,10,10,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
  cursor: pointer;
  transition: var(--tuvi-transition);
  min-height: 38px;
}
.tuvi-chart-back-btn:hover {
  color: #fff !important;
  border-color: rgba(212,175,55,.85) !important;
  box-shadow: 0 6px 18px rgba(58,10,10,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
  transform: translateY(-1px);
}
.tuvi-chart-back-btn:active { transform: translateY(0); }

/* Mobile: giữ dạng nhãn nhỏ gọn, không full-width (đây là nút phụ đặt
   cạnh tiêu đề "Lá Số Của Bạn" trong .tuvi-chart-head, không phải CTA
   chính) — chỉ giảm nhẹ cỡ chữ/padding để vừa hàng trên màn hình hẹp. */
@media (max-width: 480px) {
  .tuvi-chart-back-btn {
    font-size: 11.5px !important;
    padding: 7px 13px !important;
    min-height: 34px;
  }
}

/* Tóm tắt lá số */
.tuvi-chart-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 14px;
  background: var(--tuvi-input-bg);
  border: 1px solid var(--tuvi-border);
  border-radius: var(--tuvi-radius-sm);
  padding: 12px 14px;
  margin-bottom: 18px;
}
.tuvi-chart-summary-item { display: flex; flex-direction: column; gap: 2px; }
.tuvi-chart-summary-item span {
  font-size: var(--tuvi-text-xs);
  color: var(--tuvi-text-muted);
  font-family: var(--tuvi-font-label);
}
.tuvi-chart-summary-item strong {
  font-size: var(--tuvi-text-base);
  color: var(--tuvi-text);
}

/* ── Khung ZOOM/PAN bọc ngoài lá số (thay cho khung cuộn ngang cũ) ──
   `.tuvi-chart-zoom-viewport` là "cửa sổ" cố định, overflow hidden, chiều
   cao được JS tính đúng bằng tỉ lệ fit-to-width để KHÔNG cắt mất nội dung
   trên/dưới. `.tuvi-chart-grid-scroll` là lớp bên trong bị transform
   (scale + translate) bởi JS (xem initTuviChartZoomPan trong tuvi.js) —
   mặc định hiển thị vừa khít TOÀN BỘ bảng 12 cung, người dùng chụm/lăn
   chuột để phóng to bất kỳ vùng nào, kéo để di chuyển. Viền/bo góc lá số
   chuyển ra khung ngoài để không bị cắt khi zoom. */
.tuvi-chart-zoom-viewport {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  touch-action: none !important;
  -webkit-user-select: none;
  user-select: none;
  border: 1px solid var(--tuvi-border);
  border-radius: var(--tuvi-radius-sm);
  background: var(--tuvi-input-bg);
  cursor: grab;
}
.tuvi-chart-zoom-viewport:active { cursor: grabbing; }
.tuvi-chart-grid-scroll {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.tuvi-chart-scroll-hint {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--tuvi-text-muted) !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  font-family: var(--tuvi-font) !important;
}

/* Bảng 12 cung — grid 4x4, ô giữa 2x2 gộp làm trung cung.
   ── FIX CỨNG CHỐNG THEME LẤN ──
   Nhiều theme WordPress áp box-sizing/line-height/list-style/margin
   riêng lên div/span/p toàn site, làm vỡ layout lá số trên mobile.
   Ép lại toàn bộ thuộc tính cốt lõi cho mọi phần tử con trong khối
   này bằng !important để lá số luôn hiển thị đúng, bất kể theme. */
.tuvi-chart-grid,
.tuvi-chart-grid * {
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  /* LƯU Ý: margin/padding/list-style CỐ TÌNH KHÔNG có !important — đây
     chỉ là giá trị RESET NỀN (0/none) để dọn sạch mọi thứ theme WordPress
     nhét vào; mọi rule cụ thể PHÍA SAU trong chính file này (padding ô
     cung, margin Chính Tinh, padding badge...) vẫn thắng bình thường
     nhờ đứng sau trong cùng 1 stylesheet, không cần !important. Nếu đặt
     !important ở đây, nó sẽ đè luôn cả padding/margin nội bộ của plugin
     (mọi ô cung sẽ mất hết đệm/khoảng cách) — ĐÃ THỬ VÀ PHẢI ROLLBACK.
     Việc chống theme can thiệp cho margin/padding nằm ở chỗ khác: mọi
     rule set padding/margin thật sự cho từng phần tử trong file đều là
     class selector của plugin (không trùng theme) nên tự nhiên thắng. */
  margin: 0;
  padding: 0;
  list-style: none;
  border-style: none;
  text-decoration: none;
  font-style: normal;
  font-family: var(--tuvi-font) !important;
  /* Giảm nhẹ 1.3 → 1.22 theo phản hồi 07/07/2026: chữ trong các ô cung
     (đặc biệt danh sách phụ tinh nhiều dòng) bị đánh giá "giãn dòng hơi
     cao". Vẫn đủ thoáng để không dính chữ, nhưng gọn hơn. */
  line-height: 1.22;
  word-break: break-word;
  -webkit-tap-highlight-color: transparent;
}
.tuvi-chart-grid {
  display: grid !important;
  position: relative;
  grid-template-columns: repeat(4, minmax(168px, 1fr)) !important;
  grid-template-rows: repeat(4, minmax(116px, auto)) !important;
  /* Đường kẻ ô dùng màu viền cung riêng (--tuvi-border-cell, nhạt hơn
     viền ngoài) theo brief 07/07/2026: viền ngoài lá số #D8C79B đậm hơn
     một chút so với viền từng ô #E5D9B8, tạo phân cấp nhẹ nhàng. */
  gap: 1px !important;
  background: var(--tuvi-border-cell);
  border: 1px solid var(--tuvi-border);
  border-radius: var(--tuvi-radius-sm);
  overflow: hidden;
  /* Chiều rộng tối thiểu cố định: 4 cột x 168px + khoảng gap/viền
     (ĐIỀU CHỈNH 10/07/2026: nới từ 150px→168px — thêm ~18px/ô, đủ để
     giảm mạnh tần suất tên sao dài phải xuống dòng 2, kết hợp với việc
     bỏ ellipsis ở trên để không còn ca nào bị mất chữ), đảm bảo mỗi ô
     luôn đủ chỗ hiển thị sao/tên cung không bị vỡ chữ. */
  min-width: 700px;
  width: 100%;
}

/* ── Bố cục CỐ ĐỊNH (Fixed Layout, audit UI/UX 07/07/2026, mục XX) ──
   Mỗi ô chia thành 4 vùng theo chiều cao cố định bằng CSS Grid rows
   thay vì để nội dung tự quyết định chiều cao (flex column cũ khiến ô
   nhiều sao bị đặc, ô ít sao bị trống lệch nhau):
   Header (đúng 1 hàng) → Chính tinh (auto, tối thiểu ~40px) →
   Phụ tinh (1fr, co giãn lấp đầy khoảng trống còn lại) →
   Footer (auto, chỉ hiện khi có Trường Sinh/Tiểu Vận).
   Nhờ vậy mọi cung dùng chung 1 khung, thẳng hàng nhau dù nội dung
   nhiều/ít khác nhau. Padding ngang đồng nhất 9px theo mục XIII. */
.tuvi-chart-cell {
  background: var(--tuvi-card);
  min-height: 116px;
  position: relative;
}
/* Khối bọc RIÊNG toàn bộ nội dung có thể bị làm tối/sáng khi hover Tam
   Phương Tứ Chính (xem .tuvi-chart-grid--hover-tpxc bên dưới) — tách
   khỏi 2 nhãn overlay (Tuần/Triệt) + Tiểu Vận vốn là con trực tiếp của
   .tuvi-chart-cell (nằm NGOÀI khối này), để 2 nhãn đó luôn hiện rõ,
   không bị filter dimming của khối inner ảnh hưởng theo (CSS filter áp
   dụng cho cả cây con của phần tử, con không thể "gỡ" lại bằng filter:
   none riêng — nên phải tách hẳn ra khỏi cây bị filter thay vì cố gắng
   ghi đè). */
.tuvi-chart-cell-inner {
  /* Tiểu Vận/Nguyệt Vận giờ nằm trong hàng đáy bình thường (.tuvi-chart-
     cell-bottom) thay vì neo tuyệt đối góc trái/phải — không còn cần
     dải đệm riêng để tránh chồng lấn với nhãn Tuần/Triệt nữa, trả lại
     padding-bottom gọn như trước. */
  padding: 0 9px 6px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 116px;
  position: relative;
  height: 100%;
}
.tuvi-chart-cell--menh {
  /* Cung Mệnh/Thân nổi bật hơn nhẹ — nền sáng hơn 1 chút + viền vàng đồng
     mảnh, KHÔNG dùng glow/shadow mạnh theo brief "nhẹ nhàng, tinh tế". */
  background: linear-gradient(160deg, rgba(181,138,60,.10), var(--tuvi-card) 60%);
  box-shadow: inset 0 0 0 1px var(--tuvi-gold);
}
/* Cung Thân — thêm viền riêng (tông đỏ rượu vang nhạt) để dễ định vị
   ngay khi tải trang, không chỉ trông chờ vào badge nhỏ như trước
   (theo đề xuất audit UX 07/07/2026: "Thiếu Highlight định vị Cung
   Mệnh/Thân"). Nếu 1 cung vừa là Mệnh vừa là Thân, viền Mệnh (vàng)
   ưu tiên hơn nhờ đứng sau trong CSS. */
.tuvi-chart-cell--than {
  background: linear-gradient(160deg, rgba(122,31,31,.07), var(--tuvi-card) 60%);
  box-shadow: inset 0 0 0 1px var(--tuvi-primary-light);
}

/* ── Ảnh con giáp làm nền mờ cho từng cung (theo đúng Chi của cung, VD
   Hợi → Heo) — đặt SAU CÙNG (z-index 0), dưới toàn bộ header/chinh
   tinh/phụ tinh/vòng 12 (đều được nâng lên z-index ≥1 ngay bên dưới).
   Opacity rất thấp để KHÔNG làm giảm độ tương phản/độ đọc được của
   chữ số — chỉ là điểm nhấn trang trí. */
.tuvi-chart-cell-zodiac-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center 60%;
  background-size: 62%;
  opacity: .09;
  z-index: 0;
  pointer-events: none;
}
.tuvi-dark .tuvi-chart-cell-zodiac-bg { opacity: .14; }
.tuvi-chart-cell--menh .tuvi-chart-cell-zodiac-bg,
.tuvi-chart-cell--than .tuvi-chart-cell-zodiac-bg { opacity: .13; }
.tuvi-dark .tuvi-chart-cell--menh .tuvi-chart-cell-zodiac-bg,
.tuvi-dark .tuvi-chart-cell--than .tuvi-chart-cell-zodiac-bg { opacity: .18; }
/* Các lớp nội dung của ô đứng TRÊN ảnh nền con giáp. */
.tuvi-chart-cell-top,
.tuvi-chart-cell-chinh,
.tuvi-chart-cell-body,
.tuvi-chart-cell-bottom,
.tuvi-chart-tieuvan,
.tuvi-chart-overlay {
  position: relative;
  z-index: 1;
}

.tuvi-chart-cell-top {
  /* Audit UI/UX 07/07/2026 mục II/III/XIX: header giờ gộp 3 thông tin
     trên CÙNG 1 hàng — Can Chi (trái) | Tên cung + badge (giữa) | Đại
     Vận (phải) — thay vì Can Chi/Đại Vận nằm ở đáy ô như trước. Nhờ đó
     giải phóng toàn bộ phần thân ô cho các sao. Chiều cao co lại còn
     ~24-26px (mục III), dùng grid 3 cột để tên cung LUÔN canh giữa
     tuyệt đối bất kể Can Chi/Đại Vận dài ngắn khác nhau. Dải nền đỏ đô
     kéo lan hết chiều ngang bằng margin âm như cũ. */
  /* FIX (phản hồi 08/07/2026, ảnh "mất chữ Đại Vận ở ô mép"): trước đây
     dùng CSS Grid 3 cột "auto minmax(0,1fr) auto" — 2 cột Can Chi/Đại
     Vận là "auto" nên LUÔN đòi đủ chiều rộng nội dung của chúng; khi
     tổng 2 cột auto đó không đều nhau (VD "B.Tuất" dài hơn "5") hoặc ô
     quá hẹp, cột giữa (tên cung) bị đẩy lệch tâm thay vì canh đúng
     giữa TOÀN Ô, và trong trường hợp ô quá hẹp, cột "auto" bên phải
     (Đại Vận) có thể bị chính grid bóp nhỏ lại theo tổng băng thông
     chung → chữ số bị cắt mất. Đổi hẳn sang neo Can Chi/Đại Vận bằng
     `position: absolute` ở 2 mép (xem `.tuvi-chart-cell-top .tuvi-
     chart-canchi/.tuvi-chart-daivan` bên dưới), tiêu đề ở giữa dùng
     `text-align: center` trên TOÀN CHIỀU RỘNG ô — nhờ đó tiêu đề LUÔN
     canh đúng giữa ô bất kể 2 bên dài ngắn khác nhau, và Đại Vận không
     còn bị co bóp bởi grid vì đã tách khỏi luồng layout của tiêu đề. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -9px 6px;
  padding: 6px 8px;
  /* FIX (08/07/2026 — đầu chữ tiêu đề cung bị che/mất dấu, VD dấu mũ +
     dấu thanh chồng nhau trên "Ấ"/"Ẩ" hoặc dấu nặng dưới "Ạ"/"Ệ" bị cắt
     do khung quá thấp): tăng min-height 24px → 28px và padding dọc
     5px → 6px để có đủ khoảng trống trên/dưới cho dấu tiếng Việt ở chữ
     HOA (dấu mũ+thanh chồng cao hơn chữ thường đáng kể, VD "Ấ" cao hơn
     "â" khá nhiều). Giữ overflow:hidden để chặn tràn ngang khi tên cung
     dài (đã có ellipsis xử lý), chỉ nới chiều CAO. */
  min-height: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--tuvi-wine-deep) 0%, var(--tuvi-primary) 45%, var(--tuvi-primary-light) 55%, var(--tuvi-wine-deep) 100%);
  /* FIX (phản hồi 07/07/2026): trước đây MỖI ô đều tự bo tròn 2 góc trên
     của riêng header ô đó (var(--tuvi-radius-sm)) — với 12 cung xếp
     cạnh nhau, kết quả là hàng chục góc bo nhỏ lởm chởm khắp lá số,
     phá vỡ cảm giác liền mạch. Toàn bộ lá số CHỈ NÊN bo tròn ở đúng 4
     góc NGOÀI CÙNG — việc này `.tuvi-chart-grid` đã tự lo (border-radius
     + overflow:hidden ở cấp container, xem phía trên) nên header từng ô
     không cần tự bo nữa: bỏ hẳn border-radius ở đây, để grid ngoài cùng
     tự "cắt" đúng 4 góc theo hình chữ nhật bo tròn của nó. */
}
.tuvi-chart-cell-name {
  /* Cột giữa giờ là minmax(0,1fr) — cần min-width:0 để flex/grid item
     này được phép co NHỎ HƠN nội dung của nó (mặc định flex/grid item
     không co dưới kích thước nội dung, sẽ tiếp tục tràn nếu thiếu dòng
     này). */
  min-width: 0;
  /* Bộ font chính thức 07/07/2026: tiêu đề mỗi cung dùng Cormorant
     Garamond SemiBold (cổ điển, sang trọng), khác font nội dung Be
     Vietnam Pro bên dưới. `!important` bắt buộc vì `.tuvi-chart-grid *`
     ở trên đã ép font-family: var(--tuvi-font) !important lên MỌI phần
     tử con — nếu không có !important ở đây, tên cung sẽ bị ép về lại
     font nội dung, mất chủ đích thiết kế 2 font tách biệt. */
  font-family: var(--tuvi-font-title) !important;
  font-weight: var(--tuvi-font-title-weight) !important;
  /* Giảm 13.5px → 11.5px (phản hồi 08/07/2026): thu hẹp tiêu đề cung để
     nhường chỗ cho Đại Vận ở góc phải không bị che/mất, đặc biệt ở các
     ô góc (padding bo tròn ngoài cùng chiếm thêm không gian). */
  font-size: 11.5px;
  letter-spacing: .2px;
  /* FIX (08/07/2026 — mất dấu tên cung, VD "TÀI BẠCH" hiện thành "TAI
     BACH"): trước đây dùng CSS `text-transform: uppercase` để viết hoa
     tên cung. Đây là lỗi kinh điển khi kết hợp text-transform:uppercase
     với Google Fonts (Cormorant Garamond) trên chữ có dấu tiếng Việt:
     Google Fonts CSS2 API chia font thành nhiều @font-face với
     unicode-range khác nhau, và trình duyệt chọn subset để TẢI VỀ dựa
     trên các KÝ TỰ THẬT trong DOM (chữ thường có dấu, VD "Tài Bạch") —
     KHÔNG phải ký tự SAU KHI text-transform biến đổi (chữ hoa có dấu
     "TÀI BẠCH"). Kết quả: subset tải về thiếu glyph chữ HOA có dấu
     tương ứng, trình duyệt vẽ chữ cái nhưng RỚT MẤT dấu. Sửa bằng cách
     viết hoa NGAY TRONG JS (String.toUpperCase(), xem buildChartCellHtml
     trong tuvi.js) trước khi chèn vào DOM, để ký tự thật trong DOM đã
     là chữ hoa có dấu — trình duyệt tải đúng subset chứa glyph cần
     dùng. Bỏ hẳn text-transform ở đây để không áp dụng biến đổi 2 lần. */
  color: var(--tuvi-gold-title);
  text-align: center;
  white-space: nowrap;
  /* Không còn dùng CSS Grid nên bỏ grid-column; chừa khoảng đệm 2 bên
     (padding) đúng bằng chỗ Can Chi/Đại Vận cần, để tiêu đề canh giữa
     TOÀN Ô mà không đè lên 2 badge neo tuyệt đối 2 mép. Giá trị 21px
     thu hẹp hơn mức "auto" trước đây (có lúc >30px với số Đại Vận 3
     chữ số như "105") — vẫn đủ chỗ cho Can Chi 2 ký tự + Đại Vận tối
     đa 3 chữ số ở cỡ chữ 10.5px hiện tại. */
  /* Giảm 21px → 15px: font tiêu đề đã nhỏ lại (11.5px) + Can Chi/Đại Vận
     cũng thu gọn (xem .tuvi-chart-canchi/.tuvi-chart-daivan bên dưới)
     nên cần ít khoảng đệm hơn — nhờ đó Đại Vận ở ô góc phải có thêm chỗ,
     không còn bị cắt/mất chữ số. */
  padding: 0 15px;
  width: 100%;
  /* FIX (phản hồi 08/07/2026): nhãn "Thân" trước đây nằm CÙNG HÀNG,
     ngay cạnh tên cung (flex-direction mặc định: row) — giờ chuyển
     xuống DƯỚI, sát ngay tiêu đề, thay vì chồng ngang bên cạnh chữ.
     Đổi sang cột dọc, khoảng cách rất sát (gap nhỏ) để badge dính liền
     tiêu đề như 1 dòng phụ, không đẩy 2 bên (Can Chi/Đại Vận) ra xa. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.tuvi-chart-cell-name-text {
  /* Chỉ phần CHỮ tên cung được phép co hẹp + ellipsis (badge "Thân" bên
     cạnh luôn giữ nguyên, không bị cắt) — nhờ đó nếu cung nào hiếm khi
     quá dài trong ô rất hẹp, chữ sẽ hiện "…" gọn gàng thay vì tràn đè
     lên viền ô/ô kế bên hoặc dòng bên dưới. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* FIX (08/07/2026, đi kèm min-height: 28px ở .tuvi-chart-cell-top):
     line-height mặc định 1.22 kế thừa từ `.tuvi-chart-grid *` quá sát
     cho chữ HOA có dấu tiếng Việt (dấu mũ+thanh chồng phía trên, dấu
     nặng phía dưới cần nhiều khoảng trống hơn chữ Latin thường) — nới
     riêng line-height ở đây (không ảnh hưởng chỗ khác nhờ đây là class
     riêng) để cả dòng chữ có đủ chỗ hiển thị trọn vẹn dấu. */
  line-height: 1.5;
}
.tuvi-chart-badge {
  /* Pill nhỏ, tinh tế — KHÔNG giống button (bỏ chữ hoa/đậm quá mức,
     giảm kích thước, bỏ shadow) theo brief 07/07/2026. */
  /* Giảm thêm 8px → 7px + padding 6px → 5px (08/07/2026): đồng bộ tỉ lệ
     với header đã thu hẹp, nhường không gian cho Đại Vận ở góc phải. */
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 0 5px;
  line-height: 1.5;
  border-radius: 20px;
  color: #fff;
  white-space: nowrap;
  text-transform: none;
}
.tuvi-chart-badge-menh { background: var(--tuvi-gold-dim); }
.tuvi-chart-badge-than { background: var(--tuvi-primary-light); }

/* FIX (phản hồi 07/07/2026, ảnh đánh dấu lỗi): Can Chi (ô đầu tiên) và Đại
   Vận (ô thứ 4) của HÀNG TRÊN CÙNG nằm đúng tại 2 góc trên cùng của toàn
   bộ lá số — nơi `.tuvi-chart-grid` bo tròn góc ngoài (border-radius) +
   overflow:hidden. Padding ngang mặc định 8px không đủ khoảng cách với
   phần bo cong đó, khiến chữ số Đại Vận (VD "42") bị cắt mất 1 phần ở
   góc trên-phải. Dùng đúng thứ tự DOM (xem vòng lặp buildChartCellHtml
   trong tuvi.js: hàng đầu luôn là 4 ô liên tiếp đầu tiên) để tăng riêng
   khoảng đệm 2 góc này, không ảnh hưởng các ô còn lại. */
.tuvi-chart-cell--goc-tren-trai .tuvi-chart-cell-top .tuvi-chart-canchi { left: 10px; }
.tuvi-chart-cell--goc-tren-phai .tuvi-chart-cell-top .tuvi-chart-cell-topright { right: 10px; }

/* FIX (phản hồi 08/07/2026, ảnh "Tử Tức" mất Đại Vận ở góc dưới): fix
   07/08 ở trên mới chỉ xử lý 2 ô góc TRÊN của lưới (r=0, c=0/3) — 2 ô
   góc DƯỚI (r=3, c=0/3) cũng nằm đúng tại nơi `.tuvi-chart-grid` bo
   tròn + overflow:hidden nhưng bị bỏ sót, nên vẫn bị cắt y hệt lỗi cũ.
   Thêm 2 selector tương ứng (gocGrid 'duoi-trai'/'duoi-phai' được gán
   trong tuvi.js khi r===3) để đồng bộ biên đệm cho cả 4 góc. */
.tuvi-chart-cell--goc-duoi-trai .tuvi-chart-cell-top .tuvi-chart-canchi { left: 10px; }
.tuvi-chart-cell--goc-duoi-phai .tuvi-chart-cell-top .tuvi-chart-cell-topright { right: 10px; }

/* Can Chi (trái) + Đại Vận (phải) trong header — chữ nhỏ, tương phản
   sáng trên nền gradient đỏ đô, không cạnh tranh với tên cung ở giữa. */
.tuvi-chart-cell-top .tuvi-chart-canchi {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  /* Giảm 10.5px → 9px (phản hồi 08/07/2026: thu hẹp Can Chi/Đại Vận
     đồng bộ với tiêu đề cung để tổng thể gọn, đủ chỗ, không đè/mất chữ
     ở góc). */
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
}
.tuvi-chart-cell-top .tuvi-chart-daivan {
  font-size: 9px;
  font-weight: 700;
  color: var(--tuvi-gold-light, #f0d78c);
  white-space: nowrap;
}
/* Nhóm Đại Vận + badge "Thân" — CỐ ĐỊNH ở góc phải header, tách hẳn
   khỏi khối Chính Tinh/Phụ Tinh bên dưới nên KHÔNG BAO GIỜ đè lên tên
   sao dù tên sao dài ngắn thế nào (fix ảnh báo lỗi "Thân" đè "(H)"). */
.tuvi-chart-cell-topright {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  /* Giảm gap 4px → 2px giữa Đại Vận và badge "Thân" để nhóm này gọn lại,
     đỡ chiếm bề ngang — đồng bộ với việc thu hẹp toàn header 08/07/2026. */
  gap: 2px;
  white-space: nowrap;
}
/* Trên nền header đỏ đô, màu badge "Thân" gốc (đỏ trầm) gần trùng nền,
   khó đọc — đổi riêng trong ngữ cảnh header sang nền vàng sáng/chữ đậm
   để tương phản rõ, đồng bộ tông với Đại Vận cạnh bên. */
.tuvi-chart-cell-topright .tuvi-chart-badge-than {
  background: var(--tuvi-gold-light, #f0d78c);
  color: var(--tuvi-wine-deep);
}

.tuvi-chart-cell-stars {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 5px 0;
  flex: 1;
  align-content: flex-start;
}
.tuvi-chart-star {
  font-size: 10.5px;
  line-height: 1.3;
  padding: 1px 5px;
  border-radius: 5px;
  white-space: nowrap;
}
.tuvi-chart-star-chinh {
  background: none;
  color: var(--tuvi-primary);
  font-weight: 700;
}
.tuvi-chart-star-phu {
  background: none;
  color: var(--tuvi-gold-dim);
  font-size: 11px;
  font-weight: 500;
}
.tuvi-chart-star-tap {
  background: none;
  color: var(--tuvi-text-muted);
}
/* Đồng bộ font-size toàn bộ phụ tinh (trừ 14 chính tinh) = kích thước
   của .tuvi-chart-star-cat/-hung (11px, bằng "Địa Không (M)"). Mặc định
   KHÔNG in đậm; chỉ in đậm nhóm sao quan trọng (xem
   .tuvi-chart-star-important + .tuvi-chart-star-vong bên dưới). */
.tuvi-chart-star-important {
  font-weight: 500 !important;
}
.tuvi-chart-cell-vong12 {
  /* Vòng Tràng Sinh — audit 07/07/2026 mục XIV/XIX: đây giờ là NỘI DUNG
     DUY NHẤT còn lại ở footer (Can Chi + Đại Vận đã dời lên header),
     căn giữa gọn trong 1 hàng thấp (16-18px). */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  width: 100%;
}
.tuvi-chart-star-vong {
  /* Vòng Tràng Sinh: đồng bộ font-size VÀ font-weight với các phụ tinh
     khác (11px/500, bằng "Địa Không (M)") — trước đây in đậm 700 khiến
     nhóm sao này trông "to" hơn hẳn phần còn lại dù cùng font-size, vi
     phạm yêu cầu đồng bộ 1 cỡ (kích thước THỊ GIÁC, không chỉ số px). */
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  padding: 1px 6px;
  border-radius: 20px;
  color: var(--tuvi-gold-dim);
  background: rgba(212,175,55,.09);
  border: none;
  white-space: nowrap;
}
.tuvi-chart-cell-bottom {
  /* Footer cố định: 1 hàng ngang duy nhất gồm 3 phần — Chi Tiểu Vận
     (trái) | Vòng Tràng Sinh (giữa) | Nguyệt Hạn tháng (phải) — thay vì
     Tiểu Vận/Nguyệt Hạn neo góc tuyệt đối riêng lẻ trước đây. */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 16px;
  padding-top: 2px;
  font-size: var(--tuvi-text-xs);
  color: var(--tuvi-text-muted);
}
.tuvi-chart-cell-bottom-left,
.tuvi-chart-cell-bottom-right {
  flex: 0 0 auto;
  min-width: 14px;
}
.tuvi-chart-cell-bottom-left:empty,
.tuvi-chart-cell-bottom-right:empty { min-width: 0; }
.tuvi-chart-cell-bottom-left { text-align: left; }
.tuvi-chart-cell-bottom-right { text-align: right; }
.tuvi-chart-cell-vong12 { flex: 1 1 auto; min-width: 0; }
.tuvi-chart-daivan {
  /* Giờ hiển thị trong HEADER — xem `.tuvi-chart-cell-top .tuvi-chart-
     daivan` phía trên; rule này chỉ còn giữ làm fallback nếu bị dùng
     ngoài header. */
  font-size: 11px;
  font-weight: 600;
  color: var(--tuvi-primary);
}
.tuvi-chart-tieuvan {
  /* Cập nhật (theo yêu cầu chủ dự án): bỏ vị trí neo góc tuyệt đối +
     nền/viền — nhãn này giờ là 1 phần tử THƯỜNG nằm bên TRÁI của hàng
     đáy ô (.tuvi-chart-cell-bottom), cùng hàng với Vòng Tràng Sinh
     (giữa) và Nguyệt Hạn (phải). Chỉ giữ màu chữ để phân biệt năm nay
     (đỏ) với các năm khác (đen) — không còn box nền riêng nữa. */
  font-size: 9.5px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.5;
}
.tuvi-chart-tieuvan--namnay {
  color: #c0392b;
}
.tuvi-dark .tuvi-chart-tieuvan {
  color: #e5e5e5;
}
.tuvi-dark .tuvi-chart-tieuvan--namnay {
  color: #ff6b5c;
}
.tuvi-chart-nguyetvan {
  /* Cập nhật (theo yêu cầu chủ dự án): bỏ vị trí neo góc tuyệt đối +
     nền/viền — nhãn này giờ nằm bên PHẢI của hàng đáy ô, cùng hàng với
     Chi Tiểu Vận (trái) và Vòng Tràng Sinh (giữa). */
  font-size: 9.5px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.5;
}
.tuvi-dark .tuvi-chart-nguyetvan {
  color: #e5e5e5;
}

/* ── Chính tinh: luôn trên cùng, nổi bật nhất, căn giữa. ĐIỀU CHỈNH
   07/07/2026 (phiên 63): brief gốc đề nghị 18px nhưng chủ dự án phản
   hồi thực tế trên trình duyệt bị TRÀN VIỀN Ô — giảm về 14px, đủ nổi
   hơn Phụ Tinh (11px) mà không vỡ layout ô 150px. Bỏ `white-space:
   nowrap` (thêm ở phiên 62) vì tên sao dài kèm "(V)" + tên Hóa Lộc/
   Quyền/Khoa/Kỵ xuống dòng riêng (xem tuvi.js, renderTenSaoHtml) cần
   được PHÉP xuống dòng, không ép 1 dòng nữa. ── */
.tuvi-chart-cell-chinh {
  /* Audit 07/07/2026 mục IV/VII: giảm khoảng trắng đầu cung (6px→3px)
     + thêm đường phân cách mảnh dưới khối Chính Tinh để tách bạch với
     Phụ Tinh bên dưới, giúp mắt đọc theo nhóm thay vì lẫn 1 khối. */
  position: relative;
  text-align: center;
  margin: 3px 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--tuvi-border-cell, rgba(0,0,0,.08));
}
.tuvi-chart-star-chinh {
  display: block;
  /* ĐIỀU CHỈNH 10/07/2026: 15px → 14px theo yêu cầu chủ dự án — vẫn nổi
     bật rõ rệt so với phụ tinh (11px) nhưng gọn hơn 1 chút, kết hợp với
     Noto Sans Condensed bên dưới giúp giảm nguy cơ tràn/xuống dòng trên
     ô cung hẹp, đặc biệt ở mobile. */
  font-size: 14px;
  font-weight: 700;
  font-family: var(--tuvi-font-star);
  letter-spacing: -.2px;
  color: var(--tuvi-primary); /* màu dự phòng nếu vì lý do gì đó chưa xác định được ngũ hành */
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: break-word;
  /* Hiệu ứng hover (09/07/2026): đồng bộ công thức với nút "Xem Lá Số"
     (.tuvi-btn-submit) và "Nâng Cấp Premium" (.tuvi-upgrade-btn) — dải
     sáng quét ngang + nhấc nhẹ khi trỏ chuột, để tên Chính Tinh cũng có
     cảm giác "đáng bấm/đáng chú ý" như 2 nút CTA chính. */
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  padding: 0 3px;
  margin: 0 -3px;
  cursor: pointer;
  transition: var(--tuvi-transition);
}
.tuvi-chart-star-chinh::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .5s ease;
  pointer-events: none;
}
.tuvi-chart-star-chinh:hover::before { transform: translateX(100%); }
.tuvi-chart-star-chinh:hover {
  transform: translateY(-1px) scale(1.04);
  text-shadow: 0 0 10px rgba(212,175,55,.35);
}
/* Badge "Thân" đứng CẠNH dòng Chính Tinh đầu tiên (yêu cầu chủ dự án
   08/07/2026 lần 2 — trước đó đặt ở header cạnh Đại Vận, giờ đổi lại
   về đúng cạnh Chính Tinh). Dùng flex thay vì định vị tuyệt đối như
   bản cũ (nguồn gốc lỗi "đè lên (H)") — badge tự đẩy sang phải tên
   sao, TỰ XUỐNG HÀNG nếu tên sao dài + badge không đủ chỗ trên 1
   dòng, không bao giờ chồng đè lên chữ. */
/* ĐỔI 10/07/2026 (theo yêu cầu chủ dự án): thay vì badge "Thân" đứng
   CHUNG hàng flex với tên Chính Tinh (chiếm chỗ ngang, đẩy tên sao co
   lại/xuống hàng khi tên dài), nay ĐẨY HẲN badge ra góc phải-trên của
   khối Chính Tinh (position: absolute, neo theo .tuvi-chart-cell-chinh
   ở trên vốn đã có position: relative) — tên Chính Tinh được canh giữa
   trọn vẹn 100% chiều rộng ô, không còn phải nhường chỗ ngang cho badge
   nữa, y như đề xuất "đẩy sát góc để hiển thị đẹp cho tiêu đề". */
.tuvi-chart-cell-chinh-row {
  display: block;
  text-align: center;
}
.tuvi-chart-cell-chinh-row .tuvi-chart-star-chinh { display: block; width: 100%; }
.tuvi-chart-badge-than--chinh {
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 2;
}
/* Tên Hóa Lộc/Quyền/Khoa/Kỵ — xuống dòng riêng dưới tên sao, nhỏ hơn +
   nhẹ hơn 1 chút để vẫn rõ là thông tin phụ, không cạnh tranh với tên
   Chính Tinh chính. */
.tuvi-chart-star-hoa {
  display: inline-block;
  font-size: 11px !important;
  font-weight: 500 !important;
}
.tuvi-chart-cell-chinh-empty {
  font-size: 10px;
  font-style: italic;
  color: var(--tuvi-text-muted);
}

/* ── Màu chữ tên sao THEO NGŨ HÀNH (thay cho màu cát/hung cũ) — áp cho
   CHÍNH TINH (14 sao, ngũ hành đã chốt chính thức — xem
   OneVongDacTinh::NGU_HANH_CHINH_TINH). Bảng vị trí cát/hung (2 cột trái/
   phải của phụ tinh) VẪN GIỮ NGUYÊN để phân biệt tốt/xấu qua VỊ TRÍ,
   chỉ đổi MÀU CHỮ sang theo ngũ hành cho các phụ tinh ĐÃ XÁC ĐỊNH được
   ngũ hành (xem danh sách NGU_HANH_PHU_TINH trong tuvi.js) — phụ tinh
   chưa rõ ngũ hành thì giữ nguyên màu cát/hung như trước, không đoán mò. */
.tuvi-nguhanh-kim  { color: var(--tuvi-nh-kim)  !important; }
.tuvi-nguhanh-moc  { color: var(--tuvi-nh-moc)  !important; }
.tuvi-nguhanh-thuy { color: var(--tuvi-nh-thuy) !important; }
.tuvi-nguhanh-hoa  { color: var(--tuvi-nh-hoa)  !important; }
.tuvi-nguhanh-tho  { color: var(--tuvi-nh-tho)  !important; }

/* ── Hậu tố trạng thái sáng sao (M/V/Đ/B/H) — tô màu riêng để phân biệt
   nhanh bằng mắt, không cần đọc chữ: Miếu/Vượng nổi bật vàng kim đậm
   (tốt nhất), Đắc xanh lá trầm (khá tốt), Bình hòa trung tính, Hãm đỏ
   nhạt (xấu). Áp dụng cho cả chính tinh và phụ tinh. ── */
.tuvi-tt {
  /* FIX (phiên 65 fix12): trước đây margin-left: 4px CỘNG DỒN với dấu
     &nbsp; đã nối sẵn giữa tên sao và "(...)" trong renderTenSaoHtml()
     (tuvi.js) → khoảng cách bị NHÂN ĐÔI, nhìn tên sao và trạng thái
     sáng sao ("Văn Xương" và "(Đ)") tách xa nhau bất thường. &nbsp; đã
     đủ để tách 2 phần rõ ràng nên bỏ hẳn margin-left ở đây — áp dụng
     chung cho MỌI sao (chính tinh lẫn phụ tinh) vì đều dùng chung class
     này qua renderTenSaoHtml(). */
  font-weight: 700;
  font-size: .92em;
  display: inline-block;
}
/* FIX (07/07/2026, lần 2): bọc riêng "từ cuối của tên sao + (M)/(V)/(Đ)/
   (H)" — bắt buộc KHÔNG NGẮT DÒNG trong chính cụm này, kể cả khi phần
   tử cha đang bật overflow-wrap/word-break: break-word (dùng để tên sao
   dài không tràn viền ô). `white-space: nowrap` đặt ngay trên span này
   có độ ưu tiên cao hơn nên chặn được cả kiểu ngắt "giữa từ" của
   break-word, chứ không chỉ ngắt tại khoảng trắng thường như &nbsp; đơn
   thuần. Xem renderTenSaoHtml() trong tuvi.js. */
.tuvi-star-suffix-group {
  white-space: nowrap;
  /* FIX (phản hồi 07/07/2026, ảnh đánh dấu lỗi): trước dùng display:
     inline-block — tạo 1 "khối nguyên tử" khiến trình duyệt KHÔNG áp
     dụng được text-overflow: ellipsis của thẻ cha khi tràn (chữ bị cắt
     cứng giữa chừng, VD "Linh Tinh (H)" → "Linh T[inh] (", không có dấu
     "…"). Đổi sang display: inline — vẫn giữ nguyên tác dụng chặn ngắt
     dòng giữa "tên&nbsp;(H)" nhờ white-space: nowrap, nhưng vì không
     còn là 1 khối tách biệt nên ellipsis của thẻ cha tính đúng lại,
     hiện "…" gọn gàng thay vì cắt cứng. */
  display: inline;
}
/* CẬP NHẬT (08/07/2026, theo yêu cầu chủ dự án): trước đây mỗi trạng
   thái M/V/Đ/B/H có 1 màu CỐ ĐỊNH riêng (vàng kim/xanh lá/đỏ...), tách
   biệt hẳn với màu Ngũ Hành của chính ngôi sao đứng cạnh nó — gây lệch
   tông khi 1 sao hành Kim (màu bạc/xám ánh kim) lại có nhãn "(H)" tô
   đỏ, trong khi tên sao và nhãn lẽ ra phải ĐỒNG BỘ 1 màu. Nay bỏ hẳn
   màu cố định, để nhãn KẾ THỪA màu từ chính div bọc ngoài của sao đó
   (".tuvi-chart-star" + ".tuvi-nguhanh-*", đã set màu !important theo
   đúng Ngũ Hành ở rule phía trên) — áp dụng đồng nhất cho MỌI sao có
   nhãn M/V/Đ/B/H trên toàn lá số (chính tinh, phụ tinh, cả phần "Hóa
   Lộc/Quyền/Khoa/Kỵ" đính kèm). Sao nào chưa xác định được Ngũ Hành
   (nguHanhClass trả về rỗng) thì nhãn tự nhiên kế thừa màu mặc định
   của khối cát/hung tinh như cũ, không đoán mò. */
.tuvi-tt-m, .tuvi-tt-v, .tuvi-tt-d, .tuvi-tt-b, .tuvi-tt-h { color: inherit; }

/* ── 2 cột: CÁT TINH (TỐT) TRÁI / SÁT-HUNG TINH (XẤU) PHẢI ──
   ĐIỀU CHỈNH 08/07/2026 (theo yêu cầu chủ dự án, rà soát lại toàn bộ
   lịch sử thay đổi trước đó): chốt LẠI cột trái = Cát tinh (sao tốt),
   cột phải = Sát/Hung tinh (sao xấu) — đúng theo thứ tự DOM tự nhiên
   (.tuvi-chart-col-cat render trước .tuvi-chart-col-hung trong HTML),
   KHÔNG dùng CSS `order` để đảo vị trí nữa (khác các phiên 58 và
   10/07/2026 trước đây — cả 2 đã bị thay thế). Đồng thời bỏ hẳn đường
   kẻ phân cách (border-top) từng dùng ở bản xếp chồng dọc, vì 2 nhóm
   giờ đã tách biệt rõ bằng vị trí trái/phải, không cần thêm ranh giới
   kẻ giữa chúng nữa. */
/* Wrapper thân ô (Phụ Tinh) — chiếm hàng 1fr trong grid cố định của
   .tuvi-chart-cell (mục XX), tự co giãn lấp khoảng trống còn lại nên
   Footer luôn nằm sát đáy ô, thẳng hàng giữa các cung nhiều/ít sao. */
.tuvi-chart-cell-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tuvi-chart-cell-cols {
  /* ĐỔI 08/07/2026 (theo yêu cầu chủ dự án — rà soát lại thấy bố cục
     xếp chồng dọc (bản 10/07/2026 cũ) không hợp lý: Cát và Sát dùng
     chung 1 cột full-width, có đường kẻ phân cách ở giữa, không còn
     phân biệt rõ 2 nhóm bằng vị trí. Quay lại bố cục 2 CỘT NẰM NGANG:
     cột trái chứa Cát tinh (sao tốt), cột phải chứa Sát/Hung tinh (sao
     xấu) — đúng thứ tự DOM (.tuvi-chart-col-cat render trước) nên
     không cần CSS `order`. Bỏ hẳn đường kẻ phân cách (border-top) vì
     2 nhóm giờ đã phân biệt rõ bằng vị trí trái/phải, không cần thêm
     ranh giới kẻ nữa. */
  /* FIX (phản hồi 08/07/2026): trước đây Cát/Hung là 2 cột ĐỘC LẬP (mỗi
     cột 1 flex-column riêng, cao thấp lệch nhau tùy số sao) — khiến sao
     "lẻ" bên cột dài hơn bị bó trong đúng nửa chiều rộng dù nửa kia
     đang trống. Nay các sao là GRID ITEM trực tiếp của chính lưới 2 cột
     này (không qua div bọc con nữa); item nào được đánh dấu
     `.tuvi-chart-star--full` (do JS gắn khi hàng đó chỉ có 1 sao) sẽ
     chiếm trọn cả hàng qua grid-column: 1/-1, tận dụng hết bề ngang. */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  flex: 1;
}
.tuvi-chart-col-cat,
.tuvi-chart-col-hung {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tuvi-chart-col-cat  { align-items: flex-start; }
.tuvi-chart-col-hung { align-items: flex-end; margin-left: auto; }

.tuvi-chart-star-cat, .tuvi-chart-star-hung, .tuvi-chart-star-tap {
  display: inline-block;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--tuvi-font) !important;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  /* FIX (08/07/2026 — chữ phụ tinh dài bị cắt cụt ở ô ngoài cùng bên
     phải, VD "Lưu Niên Văn Tinh" mất chữ "Đầu Quả", "Tiểu Ho", "Tuế
     Ph"...): trước đây `white-space: nowrap` ép CẢ CỤM tên sao dài phải
     nằm nguyên 1 dòng, không cho ngắt ở bất kỳ đâu — trong khi
     renderTenSaoHtml() (tuvi.js) đã CHỦ ĐỘNG thiết kế sẵn điểm ngắt an
     toàn: chỉ "từ cuối + (H)" bị khoá cứng trong .tuvi-star-suffix-group
     (class đó tự có white-space: nowrap riêng của nó), còn lại là
     khoảng trắng thường có thể xuống dòng. Do span cha ở đây đè nowrap
     lên TOÀN BỘ nên trình duyệt không còn điểm ngắt nào để dùng, cả cụm
     dài tràn ra ngoài ô — và vì đây là cột phải-cùng của ô NGOÀI-CÙNG-
     BÊN-PHẢI của lá số, phần tràn bị `.tuvi-chart-grid` (overflow:hidden
     để bo góc) cắt mất — MẤT CHỮ thật sự, không phải lỗi hiển thị. Đổi
     sang `white-space: normal` để tên sao dài tự xuống dòng 2 ngay
     trong ô, không còn tràn ra ngoài để bị cắt nữa. */
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  overflow: visible;
  text-overflow: unset;
}
.tuvi-chart-star-cat  { text-align: left; }
.tuvi-chart-star-hung { text-align: right; }
.tuvi-chart-star-tap { text-align: left; }
/* Phiên 63 — theo yêu cầu chủ dự án: bỏ nền xanh/đỏ của phụ tinh Cát/
   Hung (trước dùng #F0FDF4/#FEF2F2 làm "chip" nền màu), chỉ giữ màu
   CHỮ để phân biệt tốt/xấu — nền để trong suốt cho gọn, đỡ rối mắt. */
.tuvi-chart-star-cat  { color: #166534; background: transparent; }
.tuvi-chart-star-hung { color: #991B1B; background: transparent; }
.tuvi-chart-cell-trung { margin-top: 2px; }
.tuvi-chart-star-tap { color: var(--tuvi-text-muted); background: transparent; }

/* ── Sao Lưu (Đại Vận/Tiểu Vận/Nguyệt Vận đang xem hạn): tách biệt khỏi
   sao cố định bằng viền + nền riêng, giữ nguyên màu chữ cát/hung gốc để
   vẫn biết tốt/xấu. ĐIỀU CHỈNH 07/07/2026: bỏ box-shadow glow neon (brief
   thương hiệu mới cấm "viền phát sáng/hiệu ứng phát sáng"), chỉ còn viền
   + nền nhạt màu vàng đồng để vẫn phân biệt được, tinh tế hơn. ── */
.tuvi-chart-star-luu {
  position: relative;
  background: rgba(181, 138, 60, .12) !important;
  border: 1px solid rgba(181, 138, 60, .5);
  font-weight: 500;
}
.tuvi-dark .tuvi-chart-star-luu {
  background: rgba(201, 165, 102, .16) !important;
  border-color: rgba(201, 165, 102, .55);
}

/* ── Hậu tố cấp vận hạn "(ĐV)/(TV)/(NV)" gắn sau tên sao Lưu — chữ nhỏ,
   mờ hơn tên sao chính, chỉ đóng vai trò ghi chú tầng vận hạn. ── */
.tuvi-chart-star-capdo {
  font-size: .82em;
  font-weight: 700;
  opacity: .75;
}
.tuvi-capdo-dv { color: #0077a3; }
.tuvi-capdo-tv { color: #1f7a4c; }
.tuvi-capdo-nv { color: #7b5e00; }

/* ── "Trùng phùng": 1 sao cùng gốc xuất hiện nhiều tầng (cố định + Lưu)
   trong cùng 1 cung — gộp 1 dòng + badge "×N", sát tinh trùng phùng thì
   viền cung nhấp nháy đỏ để cảnh báo ngay (Giải pháp 2 trong tài liệu
   đề xuất). ── */
.tuvi-chart-star-count {
  display: inline-block;
  margin-left: 3px;
  font-size: .82em;
  font-weight: 800;
  color: #fff;
  background: #b3261e;
  border-radius: 8px;
  padding: 0 5px;
  line-height: 1.4;
}
.tuvi-chart-star-trungphung { font-weight: 500; }
.tuvi-chart-cell--canhbao {
  /* ĐIỀU CHỈNH 07/07/2026: bỏ animation nhấp nháy (brief thương hiệu mới
     cấm "hiệu ứng nhấp nháy") — giữ viền đỏ tĩnh 1px để vẫn cảnh báo rõ
     ràng mà không gây cảm giác "app giải trí". */
  box-shadow: inset 0 0 0 1px #d9342b;
}

/* ── Tuần / Triệt: theo phản hồi 08/07/2026 — đổi hẳn sang kiểu GIỐNG
   nhãn "Thân" ở header (nền vàng sáng), nhưng chữ ĐỎ có phát sáng nhẹ
   (text-shadow đỏ mờ) thay vì chữ nâu/xám như bản cũ, để dễ nhận ra
   đây là 1 cách cục CẢNH BÁO (Không Vong) chứ không phải chú thích
   thường. Vị trí neo (trên đường biên chung giữa 2 cung) giữ NGUYÊN
   như cũ — chỉ đổi màu sắc/nền. */
.tuvi-chart-overlay {
  position: absolute;
  font-size: 11px;
  font-weight: 600;
  padding: 0 7px;
  line-height: 1.6;
  border-radius: 20px;
  color: #fff;
  text-shadow: 0 0 4px rgba(163,18,10,.5), 0 0 1px rgba(0,0,0,.35);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--tuvi-gold-light, #f0d78c);
  border: 1px solid rgba(163,18,10,.45);
  z-index: 10;
  pointer-events: none;
}
.tuvi-dark .tuvi-chart-overlay {
  color: #fff;
  text-shadow: 0 0 5px rgba(255,91,80,.6), 0 0 1px rgba(0,0,0,.4);
  border-color: rgba(255,91,80,.5);
}
/* FIX (ưu tiên hiển thị khi hover): cung .tuvi-chart-cell--tpxc-active/
   --tpxc-origin được nâng z-index (2/3) NGAY TRÊN CHÍNH .tuvi-chart-cell
   để sáng lên khi hover Tam Phương Tứ Chính — nhưng vì cung LÂN CẬN
   (không active) vẫn ở z-index mặc định (auto ~ 0), nhãn Tuần/Triệt của
   cung lân cận đó (neo ngay trên đường biên chung, tràn 50% sang cung
   đang active) bị cung active đè lên. Khoá z-index nhãn overlay cao hơn
   hẳn mọi lớp hover (tpxc-active z:2, tpxc-origin z:3, tpxc-lines z:4)
   để LUÔN nổi trên cùng bất kể cung nào đang hover. */
.tuvi-chart-grid--hover-tpxc .tuvi-chart-overlay {
  z-index: 10;
}

/* Ô kề bên PHẢI/TRÁI (2 ô cùng hàng): trước đây đặt ở "top: 50%" (đúng
   giữa chiều cao ô) — nhưng chiều cao ô co giãn theo SỐ SAO (nhiều sao
   thì ô rất cao), nên "giữa ô" rơi trúng ngay hàng sao/dòng chú thích
   Trường Sinh ở đáy tùy từng trường hợp, đè lên chữ (phản hồi 07/07/2026:
   TUẦN đè "Tuyệt", TRIỆT đè "Thiên Hư"). Đổi sang neo NGAY DƯỚI dải
   header — phần duy nhất có chiều cao CỐ ĐỊNH giống nhau ở mọi ô (24px
   + padding) bất kể ô có bao nhiêu sao, nên luôn rơi đúng vào khoảng
   trống giữa header và khối Chính Tinh, không bao giờ đè chữ. Vẫn nằm
   đúng trên đường biên dọc chung giữa 2 ô (right:0/left:0 + translateX)
   nên vẫn "tiếp giáp 2 ô" đúng thuật an sao. */
.tuvi-chart-overlay--phai { top: 34px; right: 0; transform: translateX(50%); }
.tuvi-chart-overlay--trai { top: 34px; left: 0; transform: translateX(-50%); }
/* Ô kề PHÍA DƯỚI/TRÊN (2 ô cùng cột): trước đây đặt ở "left: 50%" (đúng
   giữa chiều rộng ô) — nhưng đây CHÍNH XÁC là vị trí nhãn Vòng Trường
   Sinh ở footer (VD "Lâm Quan", "Tràng Sinh"...) LUÔN canh giữa theo
   chiều ngang, nên 2 nhãn ĐÈ THẲNG lên nhau 100% các trường hợp — không
   phải lỗi ngẫu nhiên mà là do cùng neo vào đúng 1 điểm (phản hồi
   07/07/2026: TUẦN đè "Lâm Quan", TRIỆT đè "Tràng Sinh"). Dời nhãn
   TUẦN/TRIỆT sang sát mép PHẢI của đường biên (thay vì giữa) — vẫn nằm
   trên đúng đường biên ngang chung giữa 2 ô cùng cột đó (chỉ dịch theo
   trục X), nhưng không còn trùng vị trí với nhãn Trường Sinh vốn luôn
   canh giữa. */
.tuvi-chart-overlay--duoi { left: auto; right: 8px; bottom: 0; transform: translateY(50%); }
.tuvi-chart-overlay--tren { left: auto; right: 8px; top: 0; transform: translateY(-50%); }

/* Cách cục hiếm gặp: Tuần VÀ Triệt cùng neo vào 1 cung VÀ cùng phía
   (VD cùng "-phai") → trước đây 2 nhãn đè thẳng lên nhau tại đúng 1
   điểm, không đọc được cả 2. Khi trùng phía, tách 2 nhãn ra ĐỨNG CẠNH
   NHAU dọc theo đúng đường biên đó (không đổi phía neo gốc):
   - "-phai"/"-trai" (biên DỌC, chung hàng): tách theo trục dọc, 1 nhãn
     nhích lên trên, 1 nhãn nhích xuống dưới quanh mốc top:34px cũ.
   - "-tren"/"-duoi" (biên NGANG, chung cột): tách theo trục ngang, 1
     nhãn giữ mép phải cũ, 1 nhãn lùi thêm sang trái để không chồng chữ. */
.tuvi-chart-overlay--phai.tuvi-chart-overlay--split-a,
.tuvi-chart-overlay--trai.tuvi-chart-overlay--split-a { top: 22px; }
.tuvi-chart-overlay--phai.tuvi-chart-overlay--split-b,
.tuvi-chart-overlay--trai.tuvi-chart-overlay--split-b { top: 46px; }
.tuvi-chart-overlay--duoi.tuvi-chart-overlay--split-a,
.tuvi-chart-overlay--tren.tuvi-chart-overlay--split-a { right: 8px; }
.tuvi-chart-overlay--duoi.tuvi-chart-overlay--split-b,
.tuvi-chart-overlay--tren.tuvi-chart-overlay--split-b { right: 52px; }

/* ── Trung cung (2x2 giữa): 4 lớp — logo chìm, tiêu đề, thông tin
   đương số/mệnh cục, dấu ấn thương hiệu + 2 đường chéo Mệnh-Di/Tài-Quan ── */
.tuvi-chart-center {
  grid-column: 2 / span 2;
  grid-row: 2 / span 2;
  position: relative;
  overflow: hidden;
  /* Tối hơn bản cũ 1 chút (đặc biệt điểm dừng cuối) để chữ trắng + hoạ
     tiết bát quái không bị "chìm" vào nền đỏ sáng — vẫn giữ sắc đỏ đô
     thương hiệu, chỉ hạ độ sáng của điểm dừng cuối (primary-light →
     primary) để tương phản với chữ tốt hơn. */
  background: linear-gradient(160deg, var(--tuvi-wine-deep) 0%, var(--tuvi-primary-dark) 55%, var(--tuvi-primary) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
/* Lớp phủ tối mỏng phía sau khối chữ (không phủ toàn bộ ô, chỉ ở giữa)
   để phần thông tin luôn đọc rõ bất kể hoạ tiết/gradient bên dưới. */
.tuvi-chart-center::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.28) 0%, rgba(0,0,0,.12) 55%, transparent 80%);
  pointer-events: none;
}
/* Họa tiết vân mây cổ điển mờ (5%) phủ khắp ô trung tâm, tạo chiều sâu
   mà không làm rối thông tin bên trên. */
.tuvi-chart-center::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='2' d='M6 30c8-10 20-10 26 0 6-10 18-10 24 0 6-10 18-10 24 0 6-10 18-10 26 0M6 70c8-10 20-10 26 0 6-10 18-10 24 0 6-10 18-10 24 0 6-10 18-10 26 0M6 100c8-10 20-10 26 0 6-10 18-10 24 0 6-10 18-10 24 0 6-10 18-10 26 0'/%3E%3C/svg%3E");
  background-size: 90px 90px;
  opacity: .05;
  pointer-events: none;
}
.tuvi-chart-center-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 92px;
  color: #fff;
  opacity: .07;
  pointer-events: none;
}
/* Bát quái thật thay cho ký tự ☯ khi có ảnh (xem buildChartCenterHtml
   trong tuvi.js) — object-fit:contain để không méo hình, opacity vẫn
   thấp như watermark cũ, luôn NẰM DƯỚI khối thông tin đương số/mệnh
   cục (z-index 1, xem .tuvi-chart-center-body bên dưới). Ảnh gốc là
   hoạ tiết đơn sắc be/kem nên filter invert+brightness đưa về gần
   trắng để nổi rõ trên nền gradient đỏ đô của trung cung, đồng bộ tông
   với vân mây trắng mờ (::before) đã có sẵn. */
.tuvi-chart-center-watermark--bagua {
  /* FIX (lệch tâm): .tuvi-chart-center-watermark (dùng chung cho cả
     span ☯ cũ lẫn khối này) đặt "inset:0" (= left/top/right/bottom:0).
     Khi đồng thời có "width/height:78%" tường minh như dưới đây, phần
     tử bị "over-constrained" — trình duyệt ưu tiên left/top:0 + width/
     height khai báo, bỏ qua right/bottom, khiến ảnh dính vào góc
     TRÊN-TRÁI thay vì nằm giữa. Ghi đè hẳn left/top/right/bottom bằng
     50% + transform để luôn neo ĐÚNG CHÍNH GIỮA bất kể tỉ lệ khung. */
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  /* Tăng kích thước (78% → 92%) để hoạ tiết lấp gần hết ô trung tâm. */
  width: 92%;
  height: 92%;
  /* ĐỔI SANG MÀU VÀNG KIM (theo yêu cầu chủ dự án 08/07/2026): trước
     đây dùng thẳng <img src="bagua.png"> (ảnh RGB trắng tinh cố định,
     chỉ alpha thay đổi theo độ đậm nét vẽ) nên hiển thị ra trắng/hồng
     nhạt trên nền đỏ đô — không đổi được màu bằng filter vì filter chỉ
     chỉnh sắc độ chứ không "nhuộm" chính xác 1 tông vàng kim cụ thể.
     Nay đổi phần tử này thành 1 <div> RỖNG, dùng chính bagua.png làm
     MASK (mask-image, đặt inline qua style trong buildChartCenterHtml)
     — vùng nào ảnh gốc đặc (nét vẽ quẻ/Âm Dương) thì hiện màu nền của
     div, vùng trong suốt thì ẩn. Nhờ vậy màu hiển thị ra ĐÚNG 100% là
     var(--tuvi-gold-title) (vàng kim sáng, cùng tông chữ tiêu đề "Lá Số
     Tử Vi") thay vì phụ thuộc màu gốc file ảnh. */
  background-color: var(--tuvi-gold-title);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  /* !important: bắt buộc phải có — rule gốc .tuvi-chart-center-watermark
     (dùng chung cho span ☯ cũ) cũng set opacity (.07, thấp hơn nhiều)
     với CÙNG specificity (1 class). Không có !important, việc rule nào
     thắng chỉ phụ thuộc thứ tự khai báo trong file — dễ vỡ nếu sau này
     có plugin gộp/minify CSS (Autoptimize, WP Rocket...) sắp xếp lại
     thứ tự rule, hoặc ai đó thêm code mới xen giữa. */
  opacity: .55 !important;
}
.tuvi-dark .tuvi-chart-center-watermark--bagua { opacity: .6 !important; }

/* Trung cung cũng phải tối lại giống các cung sao khác khi đang hover
   Tam Phương Tứ Chính (theo yêu cầu chủ dự án 08/07/2026) — trước đây
   .tuvi-chart-center không nằm trong tập chọn của rule dimming bên
   dưới (chỉ nhắm ".tuvi-chart-cell-inner") nên luôn giữ nguyên độ sáng
   dù đang hover ô nào, gây cảm giác "trung cung đứng ngoài cuộc". */
.tuvi-chart-grid--hover-tpxc .tuvi-chart-center {
  transition: filter .3s ease;
  filter: brightness(.42) saturate(.55);
}

/* ── Lớp phủ thông minh khi hover 1 ô sao (08/07/2026): sáng viền +
   tiêu đề của đúng bộ Tam Phương Tứ Chính (chính cung + 2 Tam Hợp + 1
   Xung Chiếu), các cung còn lại giảm sáng nhẹ để mắt dồn vào đúng 4 ô
   liên quan — xem ganHoverTamPhuongTuChinh() trong tuvi.js.
   CẬP NHẬT (theo yêu cầu chủ dự án): filter làm tối/sáng giờ áp vào
   ".tuvi-chart-cell-inner" (khối riêng bọc nội dung chính) THAY VÌ áp
   thẳng lên ".tuvi-chart-cell" như trước — nhãn TUẦN/TRIỆT (.tuvi-
   chart-overlay) nằm NGOÀI khối inner này nên KHÔNG bị filter kéo tối
   theo, luôn ưu tiên hiển thị rõ ràng bất kể đang hover ô nào. ── */
.tuvi-chart-grid--hover-tpxc .tuvi-chart-cell-inner {
  transition: filter .3s ease;
  filter: brightness(.42) saturate(.55);
}
/* Mức 2: các cung thuộc Tam Phương Tứ Chính — cộng hưởng nhẹ, mềm,
   KHÔNG viền cứng/glow gắt; tăng sáng dần 300ms như "hô hấp" chứ
   không bật tức thì. */
.tuvi-chart-grid--hover-tpxc .tuvi-chart-cell--tpxc-active {
  box-shadow: inset 0 0 0 1px rgba(201,165,102,.55), 0 0 16px rgba(201,165,102,.28);
  transition: box-shadow .3s ease;
  z-index: 2;
}
.tuvi-chart-grid--hover-tpxc .tuvi-chart-cell--tpxc-active .tuvi-chart-cell-inner {
  filter: brightness(1.05);
}
.tuvi-chart-grid--hover-tpxc .tuvi-chart-cell--tpxc-active .tuvi-chart-cell-top {
  filter: brightness(1.15);
}
/* Vòng cộng hưởng mềm lan ra rồi biến mất tại cung nhận năng lượng —
   không nhấp nháy mạnh, lặp chậm liên tục trong lúc hover. */
.tuvi-chart-grid--hover-tpxc .tuvi-chart-cell--tpxc-active::after {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 10px;
  background: radial-gradient(circle, rgba(201,165,102,.22) 0%, rgba(201,165,102,0) 70%);
  opacity: 0;
  pointer-events: none;
  animation: tuvi-aura-resonance 2.6s ease-out infinite;
}
@keyframes tuvi-aura-resonance {
  0%   { opacity: 0; transform: scale(.85); }
  20%  { opacity: .8; }
  60%  { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}
/* Mức 1: cung đang được hover trực tiếp — sáng lên MỀM MẠI từ tâm/
   vùng tiêu đề, tăng dần 300ms, không chói gắt, không viền cứng. */
.tuvi-chart-grid--hover-tpxc .tuvi-chart-cell--tpxc-origin {
  box-shadow: inset 0 0 0 1.5px rgba(224,196,140,.75),
    0 0 26px rgba(201,165,102,.4), 0 0 8px rgba(201,165,102,.5);
  transition: box-shadow .3s ease;
  z-index: 3;
}
.tuvi-chart-grid--hover-tpxc .tuvi-chart-cell--tpxc-origin .tuvi-chart-cell-inner {
  filter: brightness(1.12) saturate(1.05);
}
.tuvi-chart-grid--hover-tpxc .tuvi-chart-cell--tpxc-origin .tuvi-chart-cell-top {
  filter: brightness(1.25);
}

/* ── Dòng Chảy Năng Lượng (Energy Flow) giữa cung hover và Tam Phương
   Tứ Chính — thay thế hoàn toàn kiểu "đường nối sáng cứng/tia laser"
   trước đây. Mỗi liên kết là 1 cặp path cong nhẹ (halo mờ blur + core
   mảnh), tô gradient trong suốt ở 2 đầu — sáng nhất ở giữa, cùng hiệu
   ứng "hô hấp" (breathe) tăng giảm độ sáng nhẹ nhàng (dựng động trong
   tuviTpxcBuildOverlay(), assets/js/tuvi.min.js). ĐÃ BỎ phần hạt sáng
   li ti trôi dọc đường (particle + animateMotion) để nhẹ hơn, chỉ giữ
   hiệu ứng ánh sáng lan tỏa. Toàn bộ overlay
   luôn ở lớp NỀN hỗ trợ, không lấn át chữ/sao — opacity tổng ~80%. */
.tuvi-tpxc-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity .35s ease;
}
.tuvi-tpxc-lines--in { opacity: .82; }
.tuvi-tpxc-lines--out { opacity: 0; }

.tuvi-aura-link {
  animation: tuvi-aura-breathe 2.8s ease-in-out infinite;
}
@keyframes tuvi-aura-breathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: .95; }
}
.tuvi-aura-halo {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
  opacity: .5;
}
.tuvi-aura-core {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .85;
}
.tuvi-chart-center-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 100%;
}
.tuvi-chart-center-title {
  font-family: var(--tuvi-font-title);
  font-weight: 700;
  font-size: var(--tuvi-text-lg);
  text-align: center;
  color: var(--tuvi-gold-title);
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 14px rgba(243,214,122,.25);
  letter-spacing: .08em;
  margin-bottom: 5px;
}
.tuvi-chart-center-row {
  display: grid;
  grid-template-columns: minmax(52px, auto) 1fr;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 10.5px;
  white-space: nowrap;
}
.tuvi-chart-center-row span { color: rgba(255,255,255,.6); text-align: left; letter-spacing: .02em; }
.tuvi-chart-center-row strong { color: #fff; font-weight: 600; text-align: right; letter-spacing: .01em; }
.tuvi-chart-center-seal {
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 1;
  font-size: 11px;
  color: rgba(212,0,0,.75);
  border: 1px solid rgba(212,0,0,.55);
  padding: 1px 4px;
  border-radius: 3px;
  writing-mode: vertical-rl;
}

.tuvi-chart-divider {
  display: flex;
  align-items: center;
  margin: 22px 0 16px;
}
.tuvi-chart-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tuvi-border), transparent);
}

/* ── Dark theme ── */
.tuvi-dark .tuvi-chart-summary { background: rgba(255,255,255,.04); }
.tuvi-dark .tuvi-chart-cell { background: rgba(255,255,255,.03); }
.tuvi-dark .tuvi-chart-cell-name { color: var(--tuvi-gold-light); }
/* Nền tối: Kim đổi thành trắng tinh (theo đúng ghi chú chủ dự án —
   "nếu nền tối thì dùng trắng tinh"); 4 hành còn lại lên tông sáng hơn
   1 chút để vẫn đủ tương phản trên nền sẫm màu. */
.tuvi-dark {
  --tuvi-nh-kim:  #ECF0F1;
  --tuvi-nh-moc:  #2ECC71;
  --tuvi-nh-thuy: #5DADE2;  /* Thủy trên nền tối: giữ xanh dương sáng (không dùng đen như nền sáng) để vẫn đọc được trên nền đen */
  --tuvi-nh-hoa:  #E74C3C;
  --tuvi-nh-tho:  #D4AC0D;
}

/* ── Mobile: KHÔNG bóp nhỏ ô tới mức vỡ chữ. Lá số giữ nguyên chiều rộng
   tối thiểu (grid-template-columns ở .tuvi-chart-grid) và được THU NHỎ
   VỪA KHÍT khung nhìn bằng transform (xem .tuvi-chart-zoom-viewport +
   initTuviChartZoomPan trong tuvi.js) thay vì cuộn ngang — toàn bộ 12
   cung luôn hiện đủ, người dùng chụm/chạm đúp để phóng to xem chi tiết.
   Chỉ giảm nhẹ chiều cao ô + cỡ chữ một chút để bảng gọn hơn, chữ khi
   phóng to vẫn rõ. ── */
@media (max-width: 640px) {
  .tuvi-chart-scroll-hint { display: block !important; }

  .tuvi-chart-grid { grid-template-rows: repeat(4, minmax(92px, auto)) !important; }
  .tuvi-chart-cell { min-height: 92px; padding: 0 7px 5px; }
  /* Đồng bộ font-size trên mobile: trước đây CHỈ tên cung (.tuvi-chart-
     cell-name) được co xuống 11px cho khớp phụ tinh (.tuvi-chart-star-
     phu/-important/-vong vốn đã 11px sẵn cả desktop lẫn mobile) — còn
     Can Chi/Đại Vận/badge Thân/nhãn Tiểu Vận ở header vẫn giữ nguyên
     10.5px của desktop, tạo cảm giác "to nhỏ lệch nhau" giữa các dòng
     chữ trong cùng 1 ô khi thu nhỏ trên điện thoại. Nâng đồng loạt các
     mảnh còn lại lên đúng 11px để toàn bộ chữ phụ trong ô dùng chung 1
     kích thước nhất quán trên mobile, khớp phụ tinh. */
  .tuvi-chart-cell-name { font-size: 11px; }
  .tuvi-chart-cell-top .tuvi-chart-canchi,
  .tuvi-chart-cell-top .tuvi-chart-daivan,
  .tuvi-chart-cell-topright .tuvi-chart-badge-than,
  .tuvi-chart-tieuvan,
  .tuvi-chart-nguyetvan { font-size: 11px; }
  /* Khẳng định lại trên mobile: Cát/Hung/Tạp dùng chung 1 font-family,
     cùng 11px/weight 500 như desktop — không thu nhỏ/đổi font riêng
     cho từng nhóm khi màn hình hẹp. */
  .tuvi-chart-star-cat, .tuvi-chart-star-hung, .tuvi-chart-star-tap {
    font-family: var(--tuvi-font) !important;
    font-size: 11px;
    font-weight: 500;
  }
  .tuvi-chart-center-icon { font-size: 22px; }
  .tuvi-chart-center-label { font-size: var(--tuvi-text-sm); }
  .tuvi-chart-summary { grid-template-columns: repeat(2, 1fr); }

  /* FIX (08/07/2026 — tối ưu mobile cho lỗi Đại Vận bị lẹm ở 4 góc):
     trên mobile ô hẹp hơn (min-height 92px, padding ngang giảm còn
     7px) nên số Đại Vận/Can Chi ở 4 góc càng dễ chạm vùng cung bo
     tròn của `.tuvi-chart-grid` hơn desktop. Tăng biên đệm riêng cho
     mobile lên 15px (thay vì 13px desktop) để chắc chắn nằm ngoài
     hẳn vùng cong dù ở màn hình nhỏ. */
  .tuvi-chart-cell--goc-tren-trai .tuvi-chart-cell-top .tuvi-chart-canchi,
  .tuvi-chart-cell--goc-duoi-trai .tuvi-chart-cell-top .tuvi-chart-canchi {
    left: 15px;
  }
  .tuvi-chart-cell--goc-tren-phai .tuvi-chart-cell-top .tuvi-chart-cell-topright,
  .tuvi-chart-cell--goc-duoi-phai .tuvi-chart-cell-top .tuvi-chart-cell-topright {
    right: 15px;
  }
}

/* ── Rất hẹp (điện thoại nhỏ, <380px): nới thêm min-width mỗi ô để chữ
   trong ô không bị dồn/tràn — khung zoom sẽ tự thu nhỏ tỉ lệ để vẫn vừa
   khít màn hình, không còn phụ thuộc cuộn ngang xa. ── */
@media (max-width: 380px) {
  .tuvi-chart-grid { min-width: 680px; }
}

/* ══════════════════════════════════════════════════════════════════
   HARD LOCK — Đồng bộ font-size/font-weight TOÀN BỘ sao trong 1 cung,
   TRỪ 14 Chính Tinh (.tuvi-chart-star-chinh, cố tình to hơn = 15px/700
   để luôn nổi bật nhất — xem rule riêng phía trên).
   Đây là rule CUỐI CÙNG trong file (thắng theo thứ tự cascade, cùng
   specificity với mọi rule .tuvi-chart-star-* phía trên) + có !important
   trên cả font-size lẫn font-weight, để bất kỳ ai/plugin nào sau này
   thêm rule mới xen giữa file (hoặc minify/gộp CSS sắp xếp lại thứ tự)
   CŨNG KHÔNG thể làm lệch cỡ chữ giữa các nhóm sao nữa — đã xảy ra lặp
   lại nhiều lần (Hóa/Vòng Tràng Sinh/sao quan trọng/Sao Lưu mỗi lần lại
   bị chỉnh to/đậm hơn phần còn lại), nay khóa cứng 1 lần duy nhất.
   Cỡ chọn: 11px — đã kiểm chứng đủ hiển thị trọn tên sao dài nhất
   (VD "Địa Không (M)", "Điếu Khách") mà không bị ellipsis cắt chữ. */
.tuvi-chart-star-cat,
.tuvi-chart-star-hung,
.tuvi-chart-star-tap,
.tuvi-chart-star-phu,
.tuvi-chart-star-vong,
.tuvi-chart-star-hoa,
.tuvi-chart-star-important,
.tuvi-chart-star-luu,
.tuvi-chart-star-trungphung {
  font-size: 11px !important;
  font-weight: 500 !important;
  /* THÊM 10/07/2026 (theo yêu cầu chủ dự án): đổi sang Noto Sans
     Condensed (glyph hẹp hơn Be Vietnam Pro ~10-15%) + letter-spacing
     âm nhẹ — cộng dồn trên tên sao 8-10 ký tự tiết kiệm được vài px,
     giảm đáng kể số ca bị cắt "..." mà KHÔNG cần đổi font-size (vẫn giữ
     đúng 11px đồng bộ như hard-lock gốc). !important để thắng cùng
     nguyên tắc với font-size/font-weight ở trên, không bị rule nào
     chen giữa sau này làm lệch lại. */
  font-family: var(--tuvi-font-star) !important;
  letter-spacing: -.2px !important;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — CHỐNG XUỐNG DÒNG (10/07/2026, theo yêu cầu chủ dự án).
   Đặt SAU khối HARD LOCK phía trên (cùng specificity + !important, ai
   đứng sau thắng) để override riêng cho mobile mà không ảnh hưởng
   desktop. Lý do tách riêng thay vì sửa thẳng trong HARD LOCK: desktop
   đủ chỗ nên giữ 11px như cũ, chỉ mobile mới cần ép chặt hơn.

   1) Chính Tinh: trước đây cho phép xuống dòng (white-space: normal)
      để không mất chữ trên khung rộng — nhưng trên mobile ô bị co nhỏ
      (92px) khiến xuống dòng làm vỡ layout/lệch với Hóa Lộc-Quyền-Khoa-
      Kỵ bên dưới. Nay ép 1 dòng (nowrap) trên mobile; kết hợp font đã
      giảm 15→14px + Noto Sans Condensed + letter-spacing âm ở trên nên
      đa số tên vẫn vừa 1 dòng. Trường hợp hiếm gặp tên quá dài, dùng
      ellipsis làm lưới an toàn cuối cùng (còn hơn vỡ layout ô).
   2) Phụ Tinh (cat/hung/tap/phu/vong/hoa/important/luu/trungphung):
      đây là nhóm bị phản ánh "mất chữ khá nặng" trên mobile — ép chặt
      thêm 1 nấc nữa so với desktop: font-size 10.5px (thay vì 11px) +
      letter-spacing -.35px (thay vì -.2px), tăng biên độ "tiết kiệm"
      ngang mỗi tên sao lên đáng kể trong khi vẫn đọc được rõ ràng, để
      giảm tối đa tần suất phải cắt "...". ── */
@media (max-width: 640px) {
  .tuvi-chart-star-chinh {
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    /* Item này nằm trong .tuvi-chart-cell-chinh-row (display:flex) cùng
       badge "Thân" — mặc định flex item có min-width:auto (co theo nội
       dung, KHÔNG co nhỏ hơn text dài), khiến overflow/ellipsis phía
       trên không bao giờ kích hoạt được (giống lỗi min-width đã fix ở
       .tuvi-chart-col-cat/-hung trước đây). Ép min-width: 0 để item
       thực sự co lại theo khung cha khi cần, ellipsis mới tính đúng. */
    min-width: 0;
    flex: 1 1 auto;
  }

  .tuvi-chart-star-cat,
  .tuvi-chart-star-hung,
  .tuvi-chart-star-tap,
  .tuvi-chart-star-phu,
  .tuvi-chart-star-vong,
  .tuvi-chart-star-hoa,
  .tuvi-chart-star-important,
  .tuvi-chart-star-luu,
  .tuvi-chart-star-trungphung {
    font-size: 10.5px !important;
    letter-spacing: -.35px !important;
  }
}

/* ═══════════════════════════════════════════════════
   ƯU TIÊN HIỂN THỊ TOÀN TRANG (áp dụng mọi theme, mọi thiết bị)
   ---------------------------------------------------------
   Vấn đề: nhiều theme WordPress đặt z-index rất cao cho menu
   sticky/header/footer/nút liên hệ nổi (chat, zalo, gọi điện...),
   đôi khi còn set !important, nên modal/toast/nút của plugin bị
   che dù đã có z-index riêng. Khối dưới đây:
   1) Ép z-index của mọi phần tử "nổi" (position: fixed) trong
      plugin lên mức tối đa hợp lệ (2147483647) kèm !important,
      để luôn nằm trên menu/footer/nút liên hệ của theme.
   2) Tạo stacking context riêng cho khung plugin (isolation),
      để z-index bên trong không bị ảnh hưởng bởi context lạ mà
      theme có thể vô tình tạo ra ở phần tử cha (transform,
      filter, will-change... đều tạo stacking context mới).
   3) Khoá lại màu ngôi sao "★" báo nâng cấp bằng !important vì
      nhiều theme set màu mặc định cho span/icon với độ đặc trưng
      cao hơn (vd .content span, .theme-icon-color...) khiến sao
      hiển thị bạc/xám thay vì vàng như thiết kế.
   ═══════════════════════════════════════════════════ */

.tuvi-wrapper,
.tuvi-app,
#tuvi-app {
  isolation: isolate; /* luôn tạo stacking context mới, độc lập với theme */
}

.tuvi-modal-overlay,
.tuvi-mon-toast--floating,
.tuvi-admin-debug-row {
  z-index: 2147483647 !important;
}

/* Nội dung modal cũng cần nổi trên chính overlay của nó khi theme
   chèn thêm phần tử position:fixed khác (announcement bar, cookie
   banner...) có z-index cao chen giữa overlay và modal-box. */
.tuvi-modal-overlay > * {
  position: relative;
  z-index: 1;
}

/* Ngôi sao "★" báo nâng cấp — khoá cứng màu vàng kim, không cho
   theme (hoặc icon-font mặc định) đè thành màu bạc/xám. */
.tuvi-upgrade-star,
.tuvi-upgrade-icon .tuvi-upgrade-star {
  color: #F3D27A !important;
  text-shadow: 0 0 6px rgba(243, 210, 122, .85), 0 0 12px rgba(212, 175, 55, .55) !important;
  -webkit-text-fill-color: #F3D27A !important; /* chặn theme dùng background-clip:text làm mất màu */
}

/* Icon "★" trong khối "Nội dung Premium" (.tuvi-premium-card-icon) — cùng
   một lỗi với .tuvi-upgrade-star ở trên: theme mobile nạp CSS riêng cho
   <span>/icon (vd .content span, .entry-content span) có độ đặc trưng đủ
   cao để đè "color: #F3D27A !important" đặt ở rule gốc (dòng ~1731), khiến
   sao hiển thị ĐEN thay vì VÀNG PHÁT SÁNG như thiết kế. Khoá cứng lại ở
   đây (cuối file, load sau cùng) + thêm -webkit-text-fill-color để chặn
   luôn trường hợp theme dùng background-clip:text. */
.tuvi-premium-card-icon {
  color: #F3D27A !important;
  text-shadow: 0 0 6px rgba(243, 210, 122, .85), 0 0 12px rgba(212, 175, 55, .5) !important;
  -webkit-text-fill-color: #F3D27A !important;
  background: linear-gradient(135deg, #4a0000, var(--tuvi-primary)) !important;
}

/* 5 nút chọn sao đánh giá (.tuvi-star-btn) — cùng nguyên nhân: nhiều theme
   gán sẵn style mặc định cho <button> (nền bo tròn xám/xanh, border, màu
   chữ đen...) với độ đặc trưng ngang hoặc cao hơn rule gốc (dòng ~3484),
   đặc biệt trên mobile khi theme nạp thêm 1 lớp CSS responsive riêng cho
   button. "all: unset" ở rule gốc không có !important nên có thể bị theme
   đè lại các thuộc tính sau đó. Khoá cứng lại toàn bộ appearance ở đây,
   dùng selector có ngữ cảnh (#tuvi-rating-stars) để tăng độ đặc trưng. */
#tuvi-rating-stars .tuvi-star-btn,
.tuvi-rating-stars-input .tuvi-star-btn {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: rgba(181,138,60,.16) !important;
}
#tuvi-rating-stars .tuvi-star-btn.is-active,
.tuvi-rating-stars-input .tuvi-star-btn.is-active {
  color: var(--tuvi-gold) !important;
  -webkit-text-fill-color: var(--tuvi-gold) !important;
  filter: drop-shadow(0 0 5px rgba(212,175,55,.75)) !important;
}
#tuvi-rating-stars .tuvi-star-btn svg,
.tuvi-rating-stars-input .tuvi-star-btn svg {
  fill: currentColor !important;
  stroke: var(--tuvi-gold-dim) !important;
  stroke-width: 1 !important;
}
.tuvi-dark #tuvi-rating-stars .tuvi-star-btn,
.tuvi-dark .tuvi-rating-stars-input .tuvi-star-btn {
  color: rgba(201,165,102,.14) !important;
}
.tuvi-dark #tuvi-rating-stars .tuvi-star-btn.is-active,
.tuvi-dark .tuvi-rating-stars-input .tuvi-star-btn.is-active {
  color: var(--tuvi-gold-light) !important;
  -webkit-text-fill-color: var(--tuvi-gold-light) !important;
}

/* Các nút hành động chính (nâng cấp, thanh toán, đóng modal, gửi đánh
   giá...) không được để theme reset màu chữ/nền/bo góc qua các rule
   chung kiểu `a, button { color: ...; border-radius: ... }` với độ đặc
   trưng cao — nhất là trên mobile, nơi theme hay nạp thêm 1 lớp CSS
   responsive riêng cho button (đã gặp ở .tuvi-btn-rating: bị theme biến
   thành nền cam + bo tròn viên thuốc thay vì đỏ đô + bo vuông nhẹ đồng
   bộ với 2 nút CTA còn lại). */
.tuvi-upgrade-btn,
.tuvi-premium-card .tuvi-upgrade-btn,
#tuvi-open-payment.tuvi-upgrade-btn,
.tuvi-btn-rating,
#tuvi-rating-submit.tuvi-btn-rating {
  color: var(--tuvi-gold-light) !important;
  background: linear-gradient(135deg, var(--tuvi-primary-dark) 0%, var(--tuvi-primary) 100%) !important;
  background-color: var(--tuvi-primary) !important;
  border-color: var(--tuvi-gold) !important;
  border-radius: var(--tuvi-radius-sm) !important;
}
/* .tuvi-btn-upgrade-inline có gradient riêng (đỏ đô đậm hơn) có chủ đích
   khác với 2 nút CTA to — chỉ khoá màu chữ + bo góc, không ép nền chung. */
.tuvi-btn-upgrade-inline {
  color: var(--tuvi-gold-light) !important;
  border-radius: var(--tuvi-radius-sm) !important;
}

@media (max-width: 782px) {
  /* Trên mobile, nhiều theme dùng thanh admin-bar/menu sticky ở dưới
     cùng (bottom nav) hoặc header co giãn theo scroll, dễ đè lên các
     phần tử fixed của plugin hơn PC — nhắc lại z-index tối đa ở đây
     để chắc chắn không bị theme's mobile-only CSS ghi đè sau đó. */
  .tuvi-modal-overlay,
  .tuvi-mon-toast--floating,
  .tuvi-admin-debug-row {
    z-index: 2147483647 !important;
  }
}

/* ====================================================================
   MA TRẬN NĂNG LƯỢNG 12 CUNG — "tuvi-energy-*"
   Đặt ngay dưới bảng 12 cung (#tuvi-chart-grid), trên khối chọn danh
   mục luận giải. Xem assets/js/tuvi-energy-chart.js.
==================================================================== */
.tuvi-energy-chart {
  display: none;
  margin: 18px 0 6px;
  padding: 16px 18px 20px;
  background: var(--tuvi-card-glass);
  border: 1px solid var(--tuvi-border);
  border-radius: var(--tuvi-radius);
  box-shadow: var(--tuvi-shadow);
}
/* Chống theme WordPress đè box-sizing/margin/list-style lên các phần tử
   con — cùng cơ chế phòng vệ đã dùng cho .tuvi-chart-grid ở trên. */
.tuvi-energy-chart,
.tuvi-energy-chart * {
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
}
.tuvi-energy-chart button {
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.tuvi-energy-head { text-align: center; margin: 0 0 10px !important; padding: 0 !important; }
.tuvi-energy-title {
  font-family: var(--tuvi-font-title) !important;
  font-weight: var(--tuvi-font-title-weight) !important;
  font-size: var(--tuvi-text-2xl) !important;
  color: var(--tuvi-primary) !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  line-height: 1.25;
}
.tuvi-energy-subtitle {
  font-size: var(--tuvi-text-xs) !important;
  color: var(--tuvi-text-muted) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4;
}

/* ---- Chuyển tầng: Bản mệnh / Đại vận / Lưu niên / Lưu nguyệt
   Dùng chung ngôn ngữ thiết kế với .tuvi-toggle-btn (nút chuyển đổi
   chính của app) để đồng bộ giao diện, khoá !important để theme
   WordPress không đè màu/bo góc lên. ---- */
.tuvi-energy-tang-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 12px auto 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tuvi-border-cell);
}
.tuvi-energy-tang-btn {
  font-family: var(--tuvi-font) !important;
  font-size: var(--tuvi-text-md) !important;
  font-weight: 600 !important;
  line-height: 1.45;
  letter-spacing: .2px;
  color: var(--tuvi-text-light) !important;
  background: var(--tuvi-input-bg) !important;
  border: 1.5px solid var(--tuvi-input-border) !important;
  border-radius: var(--tuvi-radius-sm) !important;
  padding: 9px 18px;
  cursor: pointer;
  transition: var(--tuvi-transition);
}
.tuvi-energy-tang-btn:hover { border-color: var(--tuvi-gold) !important; color: var(--tuvi-primary) !important; }
.tuvi-energy-tang-btn.active {
  background: var(--tuvi-primary) !important;
  border-color: var(--tuvi-primary-dark) !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(144,0,0,.20);
}

.tuvi-energy-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tuvi-energy-radar-wrap { width: 100% !important; max-width: 400px !important; margin: 0 auto !important; padding: 0 4px !important; }
.tuvi-energy-canvas { width: 100% !important; height: auto !important; display: block !important; }

.tuvi-energy-legend {
  width: 100%;
  max-width: 280px;
  margin: 6px auto 0;
}
.tuvi-energy-legend-bar {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgb(62,108,96) 0%,
    var(--tuvi-gold) 55%,
    var(--tuvi-primary) 78%,
    rgb(107,26,74) 100%);
}
.tuvi-energy-legend-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--tuvi-text-muted) !important;
  font-family: var(--tuvi-font) !important;
}
.tuvi-energy-legend-labels span:last-child { text-align: right; }
.tuvi-energy-legend-labels span:first-child { text-align: left; }
.tuvi-energy-legend-labels span:nth-child(2) { text-align: center; flex: 1; }

.tuvi-energy-note {
  font-size: 11px !important;
  color: var(--tuvi-text-muted) !important;
  text-align: center;
  max-width: 520px;
  margin: 10px auto 0 !important;
  padding: 0 !important;
  line-height: 1.55;
  font-style: normal !important;
  font-family: var(--tuvi-font) !important;
}

/* ---- Bảng tóm tắt ---- */
.tuvi-energy-table-wrap { margin-top: 16px; overflow-x: auto; }
.tuvi-energy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tuvi-text-sm);
}
.tuvi-energy-table thead th {
  text-align: left;
  font-family: var(--tuvi-font-label);
  font-weight: 600;
  color: var(--tuvi-primary);
  border-bottom: 1.5px solid var(--tuvi-border);
  padding: 6px 8px;
}
.tuvi-energy-row td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--tuvi-border-cell);
  vertical-align: middle;
}
.tuvi-energy-row { cursor: pointer; transition: var(--tuvi-transition); }
.tuvi-energy-row:hover { background: rgba(181,138,60,.08); }
.tuvi-energy-td-ten { font-weight: 600; color: var(--tuvi-text); white-space: nowrap; }
.tuvi-energy-td-diem { text-align: center; font-weight: 700; color: var(--tuvi-text); }
.tuvi-energy-td-bar { min-width: 110px; width: 30%; }

.tuvi-energy-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
}
.tuvi-energy-tag--menh { background: var(--tuvi-primary); color: #fff; }
.tuvi-energy-tag--than { background: var(--tuvi-gold-title); color: var(--tuvi-wine-deep); }

.tuvi-energy-bar-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--tuvi-border-cell);
  overflow: hidden;
}
.tuvi-energy-bar-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }

.tuvi-energy-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
}
.tuvi-energy-badge--manh    { background: rgba(122,31,31,.12); color: var(--tuvi-primary); }
.tuvi-energy-badge--ondinh  { background: rgba(181,138,60,.16); color: var(--tuvi-gold-dim); }
.tuvi-energy-badge--canluuy { background: rgba(147,112,47,.14); color: var(--tuvi-gold-dim); border: 1px dashed var(--tuvi-gold-dim); }

/* ---- Modal chi tiết khi bấm vào 1 cung ---- */
.tuvi-energy-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(46,14,14,.55);
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tuvi-energy-modal-overlay.open { display: flex; }
.tuvi-energy-modal {
  position: relative;
  background: var(--tuvi-card);
  border: 1px solid var(--tuvi-border);
  border-radius: var(--tuvi-radius);
  box-shadow: var(--tuvi-shadow-lg);
  max-width: 420px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  padding: 22px 20px 20px;
}
.tuvi-energy-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tuvi-energy-modal-head h4 {
  font-family: var(--tuvi-font-title);
  font-weight: var(--tuvi-font-title-weight);
  font-size: var(--tuvi-text-3xl);
  color: var(--tuvi-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tuvi-energy-modal-score {
  font-weight: 700;
  font-size: var(--tuvi-text-2xl);
  color: var(--tuvi-gold-dim);
  white-space: nowrap;
}
.tuvi-energy-modal-score span { font-size: var(--tuvi-text-sm); color: var(--tuvi-text-muted); }
.tuvi-energy-modal-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; }
.tuvi-energy-modal-rank { font-size: var(--tuvi-text-sm); color: var(--tuvi-text-light); }
.tuvi-energy-modal-link {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 14px;
  border: none;
  border-radius: var(--tuvi-radius-sm);
  background: var(--tuvi-primary);
  color: #fff;
  font-weight: 600;
  font-size: var(--tuvi-text-md);
  cursor: pointer;
  transition: var(--tuvi-transition);
}
.tuvi-energy-modal-link:hover { background: var(--tuvi-primary-dark); }
.tuvi-energy-modal-tang {
  font-size: var(--tuvi-text-xs);
  color: var(--tuvi-text-muted);
  background: var(--tuvi-input-bg);
  border-radius: var(--tuvi-radius-sm);
  padding: 8px 10px;
  margin: 10px 0;
}
.tuvi-energy-modal-section { margin: 12px 0; }
.tuvi-energy-modal-section h5 {
  font-size: var(--tuvi-text-sm);
  color: var(--tuvi-primary);
  margin: 0 0 4px;
  font-weight: 700;
}
.tuvi-energy-modal-section p { margin: 0; font-size: var(--tuvi-text-sm); color: var(--tuvi-text); line-height: 1.6; }
.tuvi-energy-detail-star em { color: var(--tuvi-gold-dim); font-style: normal; font-size: 11px; }
.tuvi-energy-detail-hoa {
  display: inline-block;
  background: rgba(181,138,60,.14);
  color: var(--tuvi-gold-dim);
  border-radius: 6px;
  padding: 1px 6px;
  margin: 0 3px 3px 0;
  font-size: 11px;
}
.tuvi-energy-modal-highlight {
  background: rgba(122,31,31,.06);
  border-left: 3px solid var(--tuvi-primary);
  padding: 8px 10px;
  border-radius: 0 6px 6px 0;
}
.tuvi-energy-modal-note {
  font-size: 11px;
  color: var(--tuvi-text-muted);
  font-style: italic;
  margin-top: 14px;
  border-top: 1px dashed var(--tuvi-border-cell);
  padding-top: 10px;
}

@media (max-width: 640px) {
  .tuvi-energy-chart { padding: 14px 12px 16px; }
  .tuvi-energy-title { font-size: var(--tuvi-text-xl); }
  .tuvi-energy-tang-btn { padding: 8px 16px; font-size: var(--tuvi-text-sm); }
  .tuvi-energy-td-bar { display: none; }
}