/* ============================================================
   KHOAI — Tông "Đèn vàng" + nút đổi tông
   Nạp SAU css/style.css. Tông Xanh là mặc định (không cần khai báo);
   tông Vàng bật khi <html data-theme="vang"> — xem script trong <head>.
   ============================================================ */

/* --- 1. Biến màu cho tông vàng (lấy từ tông reels Instagram) --- */
html[data-theme="vang"]{
  --nen-toi:            #241C16;   /* thẻ, section nổi   (cũ #17231B) */
  --nen-toi-2:          #1A1410;   /* nền chính          (cũ #101911) */
  --nen-toi-3:          #120D0A;   /* section sâu        (cũ #0A100B) */
  --nen-mat:            #1A1410;
  --nen-noi:            #241C16;
  --nen-chim:           #120D0A;
  --chu-nhat:           #F6EBD9;   /* chữ chính          (cũ #EAF2E7) */
  --chu-nhat-mo:        #C2B098;   /* chữ phụ            (cũ #AFC2AC) */
  --den-ho-phach:       #D9A23B;   /* nền nhấn           (cũ #5FA85D) */
  --den-ho-phach-nhat:  #E8C25A;   /* chữ nhấn           (cũ #9ED696) */
  /* Trang thực đơn nền kem dùng biến này làm chữ/nút. #3E8C7E (xanh ngọc) chỉ đạt ~4:1 trên nền kem
     và trắng nên đổi sang nâu hổ phách đậm (~5,9:1) cho đọc rõ và cùng họ màu với tông vàng. */
  --xanh-dam:           #8A5A0B;
  --vien-toi:           rgba(232,194,90,.22);
  --kinh:               rgba(255,255,255,.05);
  --kinh-vien:          rgba(255,255,255,.12);
  /* Kênh RGB cho lớp phủ hero, sóng, dải ngăn, gradient trong style.css */
  --rgb-nhan:           217,162,59;
  --rgb-nhan2:          140,98,36;
  --rgb-chim:           18,13,10;
  --rgb-mat:            26,20,16;
  /* --nhan (#B4482A) giữ nguyên: nút đặt chỗ vẫn màu đỏ gạch ở cả hai tông */
}

/* Đổi màu mượt, không giật */
html{ transition: background-color .25s ease; }
body, header.site, section, footer{ transition: background-color .25s ease, color .25s ease; }
@media (prefers-reduced-motion: reduce){
  html, body, header.site, section, footer{ transition: none; }
}

/* --- 2. Nút đổi tông (đặt cạnh nút VI/EN) --- */
.doi-tong{
  display:inline-flex; align-items:center; gap:2px;
  padding:3px; border-radius:999px;
  border:1px solid var(--vien-toi); background:transparent;
  flex-shrink:0;
}
.doi-tong button{
  display:inline-flex; align-items:center; gap:6px;
  min-height:30px; padding:0 10px 0 6px;
  border:0; border-radius:999px; background:transparent;
  color:var(--chu-nhat-mo);
  /* Viết tách từng thuộc tính: dạng rút gọn `font: 700 11.5px/1 inherit` không hợp lệ nên trình duyệt bỏ cả dòng */
  position:relative; font-family:inherit; font-weight:700; font-size:11.5px; line-height:1; letter-spacing:.04em; cursor:pointer;
}
.doi-tong button:hover{ color:var(--chu-nhat); }
.doi-tong button[aria-pressed="true"]{ background:rgba(234,242,231,.12); color:var(--chu-nhat); }
.doi-tong button:focus-visible{ outline:2px solid var(--den-ho-phach-nhat); outline-offset:2px; }
/* Bóng đèn dây tóc (04/10/2026) thay cho chấm tròn: hình bóng đèn vẽ bằng mặt nạ SVG tô theo màu tông,
   bóng của tông đang chọn sáng + có quầng, bóng còn lại mờ. Bấm là lóe lên 0,35 giây (class "loe" do js/tuong-tac.js thêm).
   Chỉ CSS: HTML 3 trang giữ nguyên <span class="cham cham-xanh|cham-vang">. */
.doi-tong .cham{
  --bong:#E8C25A;
  --hinh-bong:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.3A7 7 0 0 0 12 2z'/%3E%3Crect x='9' y='19.4' width='6' height='2.4' rx='1.2'/%3E%3C/svg%3E");
  position:relative; display:block; flex:0 0 auto;
  width:18px; height:20px; border-radius:0; background:none; box-shadow:none;
}
.doi-tong .cham-xanh{ --bong:#9ED696; }
.doi-tong .cham-vang{ --bong:#E8C25A; }
/* quầng sáng phía sau bóng */
.doi-tong .cham::before{
  content:""; position:absolute; left:50%; top:38%; width:30px; height:30px; margin:-15px 0 0 -15px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--bong) 0, transparent 65%);
  opacity:0; transition:opacity .3s ease;
}
/* thân bóng */
.doi-tong .cham::after{
  content:""; position:absolute; inset:0; width:auto; height:auto; border-radius:0;
  background:var(--bong); opacity:.4;
  -webkit-mask:var(--hinh-bong) center/contain no-repeat; mask:var(--hinh-bong) center/contain no-repeat;
  transition:opacity .3s ease;
}
.doi-tong button[aria-pressed="true"] .cham::before{ opacity:.5; }
.doi-tong button[aria-pressed="true"] .cham::after{ opacity:1; }
.doi-tong button:hover .cham::after{ opacity:.75; }
.doi-tong button[aria-pressed="true"]:hover .cham::after{ opacity:1; }
.doi-tong .cham.loe::before{ animation:bong-loe .35s ease-out; }
@keyframes bong-loe{
  0%{ opacity:0; transform:scale(.6); }
  45%{ opacity:1; transform:scale(1.35); }
  100%{ transform:scale(1); }
}

/* Màn hình vừa và điện thoại: chỉ còn hai bóng đèn, ẩn chữ — nhường chỗ cho menu */
@media (max-width: 1360px){
  .doi-tong button{ padding:0 6px; min-width:32px; }
  .doi-tong .nhan-chu{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }
}