/* ═══════════════════════════════════════════════════════════════════════════════════════════
   css/the-gioi.css — THẾ GIỚI MÀU trên trang chủ (index.html) · [05/10/2026 Cài Đặt Chặng 4c]
   Founder 05/10: "cứ đổi hết sang màu thế giới để tôi xem … tìm cách cải thiện tín hiệu vàng = thưởng".
   · MỌI luật ở đây bắt đầu bằng html[data-ytt-world] — js/ap-cai-dat.js chỉ đặt thuộc tính đó khi người dùng
     chọn thế giới KHÁC Tu Tiên ⇒ người để mặc định thấy trang chủ y hệt cũ (bộ đo "máy tính giữ nguyên").
   · --ytt-acc do ap-cai-dat.js đặt: giao diện tối = bản sáng của màu, giao diện sáng = bản đậm.
   · VÀNG = THƯỞNG: khi cả trang đổi màu, chỗ duy nhất còn vàng là phần thưởng (+Tu Vi / Linh Thạch) — và nó
     được làm thành "viên" có ánh vàng để nổi hơn cả bản Tu Tiên gốc.
   · Họa tiết + chữ Hán chìm: CHỈ ở thanh bên và tab Cài Đặt (Founder chọn) — không đè lên nội dung học.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

html[data-ytt-world] {
  --tg-vien:  color-mix(in srgb, var(--ytt-acc) 22%, transparent);
  --tg-mo:    color-mix(in srgb, var(--ytt-acc) 12%, transparent);
  --tg-nen-1: color-mix(in srgb, var(--ytt-acc) 10%, #0d0c11);
  --tg-nen-2: color-mix(in srgb, var(--ytt-acc) 17%, #0d0c11);
  --tg-motif: color-mix(in srgb, var(--ytt-acc) 20%, transparent);
  --tg-vang:  #f4c542;            /* vàng THƯỞNG — chỉ dùng cho phần thưởng */
  --tg-vang-nen: rgba(244, 197, 66, 0.12);
  --tg-vang-vien: rgba(244, 197, 66, 0.42);
}
html[data-ytt-world][data-theme="light"] {
  --tg-vien:  color-mix(in srgb, var(--ytt-acc) 45%, transparent);
  --tg-nen-1: color-mix(in srgb, var(--ytt-acc) 5%, #fffdfb);
  --tg-nen-2: color-mix(in srgb, var(--ytt-acc) 11%, #fffdfb);
  --tg-motif: color-mix(in srgb, var(--ytt-acc) 14%, transparent);
  --tg-vang:  #8a5a00;            /* nâu-vàng đậm: chữ trên nền sáng ≥ 4,5:1 */
  --tg-vang-nen: rgba(240, 180, 30, 0.16);
  --tg-vang-vien: rgba(184, 132, 0, 0.45);
}
html[data-ytt-world="academy"] { --tg-wm: '学'; }
html[data-ytt-world="rose"]    { --tg-wm: '桃'; }
html[data-ytt-world="forest"]  { --tg-wm: '竹'; }
html[data-ytt-world="gold"]    { --tg-wm: '龙'; }
html[data-ytt-world="ocean"]   { --tg-wm: '海'; }

/* ── Thanh bên ─────────────────────────────────────────────────────────────── */
/* "Trang chủ" mang --ic vàng viết thẳng trong HTML (style="--ic:#ffd700") ⇒ cần !important để thắng style dòng */
html[data-ytt-world] .ytt-sb-header .ytt-sb-item[data-name="Trang chủ"] { --ic: var(--ytt-acc) !important; }
html[data-ytt-world] .ytt-sidebar { border-right-color: var(--tg-mo); }
html[data-ytt-world]:not([data-theme="light"]) .ytt-sidebar {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--ytt-acc) 9%, transparent) 0%, transparent 38%),
    linear-gradient(180deg, #0c0c18 0%, #0a0a14 100%);
}
html[data-ytt-world]:not([data-theme="light"]) .ytt-sb-group-label { color: color-mix(in srgb, var(--ytt-acc) 55%, transparent); }
html[data-ytt-world][data-theme="light"] .ytt-sb-group-label { color: var(--ytt-acc) !important; }
html[data-ytt-world] .ytt-sb-footer { border-top-color: var(--tg-mo); }
html[data-ytt-world]:not([data-theme="light"]) .ytt-sb-theme-btn { border-color: var(--tg-vien); }
html[data-ytt-world]:not([data-theme="light"]) .ytt-sb-collapse-btn {
  border-color: var(--tg-vien);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ytt-acc) 9%, transparent), rgba(0,0,0,0.4));
  color: color-mix(in srgb, var(--ytt-acc) 70%, transparent);
}

/* Họa tiết thanh bên: lớp ::after (z-index -1 trong ngữ cảnh xếp lớp của .ytt-sidebar — dưới mục menu, trên nền) +
   chữ Hán chìm ::before. Chuyển động (cánh đào, sóng) chạy bằng transform ⇒ chỉ tầng ghép hình, không vẽ lại. */
html[data-ytt-world] .ytt-sidebar::before,
html[data-ytt-world] .ytt-sidebar::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
html[data-ytt-world] .ytt-sidebar::before {
  content: var(--tg-wm);
  right: -18px;
  bottom: 70px;
  font: 400 170px/1 var(--ytt-hz-chon, 'KaiTi', 'STKaiti', serif);
  color: color-mix(in srgb, var(--ytt-acc) 9%, transparent);
}
html[data-ytt-world] .ytt-sidebar::after { inset: 0; }
/* Học Thuật — ô 田字格 như vở luyện chữ, mờ dần xuống dưới */
html[data-ytt-world="academy"] .ytt-sidebar::after {
  background:
    linear-gradient(var(--tg-motif) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--tg-motif) 1px, transparent 1px) 0 0 / 44px 44px,
    repeating-linear-gradient(90deg, transparent 0 21px, color-mix(in srgb, var(--ytt-acc) 9%, transparent) 21px 22px, transparent 22px 44px),
    repeating-linear-gradient(0deg, transparent 0 21px, color-mix(in srgb, var(--ytt-acc) 9%, transparent) 21px 22px, transparent 22px 44px);
  -webkit-mask: linear-gradient(180deg, #000 0, transparent 55%);
          mask: linear-gradient(180deg, #000 0, transparent 55%);
}
/* Hoa Đào — ánh hồng góc trên + cánh đào rơi chậm (lớp cao gấp đôi, trượt bằng transform) */
html[data-ytt-world="rose"] .ytt-sidebar::after {
  inset: -100% 0 0 0;
  background:
    radial-gradient(ellipse 5px 4px at 20% 30%, color-mix(in srgb, var(--ytt-acc) 55%, transparent) 60%, transparent 70%) 0 0 / 110px 160px,
    radial-gradient(ellipse 4px 3px at 70% 70%, color-mix(in srgb, var(--ytt-acc) 40%, transparent) 60%, transparent 70%) 0 0 / 150px 210px;
  opacity: 0.55;
  animation: tg-roi 38s linear infinite;
}
html[data-ytt-world="rose"] .ytt-sb-header {
  background: radial-gradient(120% 140% at 100% 0, color-mix(in srgb, var(--ytt-acc) 14%, transparent), transparent 65%);
}
/* Trúc Lâm — hai thân trúc có đốt dọc mép phải */
html[data-ytt-world="forest"] .ytt-sidebar::after {
  background:
    linear-gradient(90deg, transparent 0 calc(100% - 34px), var(--tg-motif) calc(100% - 34px) calc(100% - 28px),
      transparent calc(100% - 28px) calc(100% - 16px), var(--tg-motif) calc(100% - 16px) calc(100% - 12px), transparent calc(100% - 12px)),
    repeating-linear-gradient(180deg, transparent 0 84px, #0b0b16 84px 88px);
}
html[data-ytt-world="forest"][data-theme="light"] .ytt-sidebar::after {
  background:
    linear-gradient(90deg, transparent 0 calc(100% - 34px), var(--tg-motif) calc(100% - 34px) calc(100% - 28px),
      transparent calc(100% - 28px) calc(100% - 16px), var(--tg-motif) calc(100% - 16px) calc(100% - 12px), transparent calc(100% - 12px)),
    repeating-linear-gradient(180deg, transparent 0 84px, #fff 84px 88px);
}
/* Kim Long — vảy rồng phía trên */
html[data-ytt-world="gold"] .ytt-sidebar::after {
  background:
    radial-gradient(circle at 50% 100%, transparent 12px, var(--tg-motif) 13px 14px, transparent 15px) 0 0 / 30px 15px,
    radial-gradient(circle at 50% 100%, transparent 12px, var(--tg-motif) 13px 14px, transparent 15px) 15px 7.5px / 30px 15px;
  -webkit-mask: linear-gradient(180deg, #000 0, transparent 40%);
          mask: linear-gradient(180deg, #000 0, transparent 40%);
}
/* Thương Hải — sóng trôi chậm dưới chân thanh bên */
html[data-ytt-world="ocean"] .ytt-sidebar::after {
  inset: auto -120px 0 0;
  height: 110px;
  background: var(--tg-motif);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='110'%3E%3Cpath d='M0 34 Q30 14 60 34 T120 34 V110 H0Z' fill='%23000'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 110px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='110'%3E%3Cpath d='M0 34 Q30 14 60 34 T120 34 V110 H0Z' fill='%23000'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 110px;
  animation: tg-song 11s linear infinite;
}
@keyframes tg-roi  { to { transform: translateY(50%); } }
@keyframes tg-song { to { transform: translateX(-120px); } }

/* ── Ô ảnh + nút ───────────────────────────────────────────────────────────── */
html[data-ytt-world]:not([data-theme="light"]) .ydh-showcase-frame {
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--ytt-acc) 10%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, rgba(20,16,32,0.7) 0%, rgba(10,8,20,0.85) 100%);
  border-color: color-mix(in srgb, var(--ytt-acc) 38%, transparent);
}
html[data-ytt-world][data-theme="light"] .ydh-showcase-frame { border-color: var(--ytt-acc) !important; }
html[data-ytt-world]:not([data-theme="light"]) .ydh-sc-act-btn { border-color: color-mix(in srgb, var(--ytt-acc) 50%, transparent); color: var(--ytt-acc); }
html[data-ytt-world][data-theme="light"] .ydh-sc-act-btn:not(.ydh-sc-act-del) { border-color: var(--ytt-acc) !important; color: var(--ytt-acc) !important; }
html[data-ytt-world][data-theme="light"] .ydh-sc-act-btn:not(.ydh-sc-act-del):hover { background: var(--ytt-acc) !important; color: #fff !important; }
html[data-ytt-world][data-theme="light"] .ydh-section-stats { border-color: color-mix(in srgb, var(--ytt-acc) 50%, transparent) !important; }

/* ── Nhật Ký Tu Sĩ ─────────────────────────────────────────────────────────── */
html[data-ytt-world]:not([data-theme="light"]) .ydh-quest-board {
  background:
    radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--ytt-acc) 14%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 15% 100%, color-mix(in srgb, var(--ytt-acc) 8%, transparent) 0%, transparent 50%),
    linear-gradient(135deg, var(--tg-nen-1) 0%, var(--tg-nen-2) 50%, var(--tg-nen-1) 100%) !important;
  border-color: var(--tg-vien) !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ytt-acc) 18%, transparent) inset,
    0 -2px 0 rgba(0,0,0,0.4) inset,
    0 5px 0 rgba(0,0,0,0.4),
    0 14px 36px color-mix(in srgb, var(--ytt-acc) 10%, transparent);
}
html[data-ytt-world][data-theme="light"] .ydh-quest-board {
  background:
    radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--ytt-acc) 12%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--tg-nen-1) 0%, var(--tg-nen-2) 50%, var(--tg-nen-1) 100%) !important;
  border-color: color-mix(in srgb, var(--ytt-acc) 55%, transparent) !important;
}
/* Hoa văn lục giác: SVG gốc đặt cứng màu đồng trong nét vẽ ⇒ đổi sang mặt nạ + nền màu thế giới */
html[data-ytt-world] .ydh-quest-board::before {
  background: var(--ytt-acc);
  opacity: 0.08;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpolygon points='28,2 53,16 53,46 28,60 3,46 3,16' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpolygon points='28,12 43,21 43,39 28,48 13,39 13,21' fill='none' stroke='%23000' stroke-opacity='0.55' stroke-width='1'/%3E%3C/svg%3E") repeat 0 0 / 56px 64px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpolygon points='28,2 53,16 53,46 28,60 3,46 3,16' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpolygon points='28,12 43,21 43,39 28,48 13,39 13,21' fill='none' stroke='%23000' stroke-opacity='0.55' stroke-width='1'/%3E%3C/svg%3E") repeat 0 0 / 56px 64px;
}
html[data-ytt-world]:not([data-theme="light"]) .ydh-quest-board .ydh-section-head h3 {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ytt-acc) 35%, #fff), var(--ytt-acc));
  -webkit-background-clip: text;
          background-clip: text;
}
html[data-ytt-world][data-theme="light"] .ydh-quest-board .ydh-section-head h3 { color: var(--ytt-acc) !important; }
html[data-ytt-world]:not([data-theme="light"]) .ydh-tab-nav { border-color: color-mix(in srgb, var(--ytt-acc) 18%, transparent); }
html[data-ytt-world]:not([data-theme="light"]) .ydh-tabnav-btn { color: color-mix(in srgb, var(--ytt-acc) 70%, transparent); }
html[data-ytt-world]:not([data-theme="light"]) .ydh-tabnav-btn:hover { color: color-mix(in srgb, var(--ytt-acc) 40%, #fff); background: color-mix(in srgb, var(--ytt-acc) 9%, transparent); }
html[data-ytt-world]:not([data-theme="light"]) .ydh-tabnav-btn.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ytt-acc) 55%, #000) 0%, color-mix(in srgb, var(--ytt-acc) 85%, #000) 50%, color-mix(in srgb, var(--ytt-acc) 55%, #000) 100%);
  color: #fff;
  border-color: color-mix(in srgb, var(--ytt-acc) 50%, #fff);
  box-shadow:
    0 3px 0 rgba(0,0,0,0.5),
    0 6px 14px color-mix(in srgb, var(--ytt-acc) 38%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
html[data-ytt-world][data-theme="light"] .ydh-tabnav-btn:hover { border-color: var(--ytt-acc) !important; color: var(--ytt-acc) !important; background: color-mix(in srgb, var(--ytt-acc) 8%, #fff) !important; }
html[data-ytt-world][data-theme="light"] .ydh-tabnav-btn.active {
  background: linear-gradient(135deg, var(--ytt-acc) 0%, color-mix(in srgb, var(--ytt-acc) 80%, #000) 100%) !important;
  border-color: color-mix(in srgb, var(--ytt-acc) 80%, #000) !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ytt-acc) 30%, transparent) !important;
}
html[data-ytt-world]:not([data-theme="light"]) .ydh-m-row {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ytt-acc) 7%, transparent) 0%, rgba(0,0,0,0.3) 100%);
  border-color: color-mix(in srgb, var(--ytt-acc) 17%, transparent);
}

/* ── VÀNG = THƯỞNG: phần thưởng nhiệm vụ thành "viên vàng" có ánh lướt ──────── */
html[data-ytt-world] .ydh-m-reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 7px;
  border-radius: 99px;
  color: var(--tg-vang);
  background:
    linear-gradient(110deg, transparent 30%, rgba(255, 236, 170, 0.28) 45%, transparent 60%) -150% 0 / 250% 100% no-repeat,
    var(--tg-vang-nen);
  border: 1px solid var(--tg-vang-vien);
  font-weight: 700;
  animation: tg-anh-vang 4.5s ease-in-out infinite;
}
html[data-ytt-world] .ydh-m-reward::before { content: '✦'; font-size: 0.85em; }
html[data-ytt-world] .ydh-m-row.done .ydh-m-reward,
html[data-ytt-world] .ydh-m-row.claimed .ydh-m-reward { animation: none; }
@keyframes tg-anh-vang { 0%, 55% { background-position: -150% 0, 0 0; } 85%, 100% { background-position: 150% 0, 0 0; } }

/* ── Kéo mở bảng bên phải ──────────────────────────────────────────────────── */
html[data-ytt-world] #ytt-rp-pulltab {
  background: color-mix(in srgb, var(--ytt-acc) 11%, transparent);
  border-color: color-mix(in srgb, var(--ytt-acc) 22%, transparent);
  color: color-mix(in srgb, var(--ytt-acc) 60%, transparent);
}
html[data-ytt-world] #ytt-rp-pulltab:hover { background: color-mix(in srgb, var(--ytt-acc) 25%, transparent); color: var(--ytt-acc); }

/* ── Tab Cài Đặt: họa tiết + chữ Hán chìm trong ô xem trước ───────────────── */
html[data-ytt-world] .rps-preview { isolation: isolate; }
html[data-ytt-world] .rps-preview::after {
  content: var(--tg-wm);
  position: absolute;
  right: 70px;
  top: 4px;
  z-index: -1;
  pointer-events: none;
  font: 400 104px/1 var(--ytt-hz-chon, 'KaiTi', 'STKaiti', serif);
  color: color-mix(in srgb, var(--ytt-acc) 10%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  html[data-ytt-world] .ytt-sidebar::after,
  html[data-ytt-world] .ydh-m-reward { animation: none; }
}