/* sa-hinh-theme-2026.css
   Tông vàng nhạt chủ đạo + hiệu ứng 3D nổi (nhẹ) cho toàn bộ bộ 11 bài sa hình.
   File này chỉ "đè" phần giao diện, KHÔNG đổi nội dung.
*/

/* Vàng nhạt làm nền chủ đạo (body đang dùng var(--nen)) */
:root{
  --nen:#FFF6D6;
  --card:rgba(255,255,255,.94);
  --vien:rgba(11,18,32,.10);
  --bong:0 18px 55px rgba(11,18,32,.10);
  --vang:#FFC928;
  --xanhla:#16A34A;
}

/* Thẻ nội dung nhìn "3D" hơn */
.card{
  background:var(--card);
  border-color:var(--vien);
  box-shadow:var(--bong);
}

/* Xoá / ẩn các menu gây rối (nếu còn) */
.navlinks{display:none !important;}
.muc-luc-nhanh{display:none !important;}
aside[aria-label="Mục lục nhanh"]{display:none !important;}

/* Header bớt "trắng toát", hợp tông vàng nhạt */
.header{
  background:rgba(255,246,214,.86) !important;
  border-bottom:1px solid rgba(11,18,32,.08) !important;
}

/* Video */
.video-3d{
  border-radius:18px;
}
.video-3d__khung{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(11,18,32,.10);
  box-shadow:0 16px 45px rgba(11,18,32,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
}
.video-3d video{width:100%;height:auto;display:block;border-radius:18px}

/* 11 bài – thẻ giới thiệu nhanh */
.bai-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
@media (max-width:920px){
  .bai-grid{grid-template-columns:1fr;}
}
.bai-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(11,18,32,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.80));
  box-shadow:0 12px 32px rgba(11,18,32,.10);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.bai-card b{font-size:15px}
.bai-card small{display:block;color:rgba(11,18,32,.65);font-weight:650;margin-top:4px;line-height:1.35}
.bai-badge{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  font-weight:950;color:#fff;
  background:linear-gradient(180deg, rgba(0,82,204,1), rgba(11,58,168,1));
  box-shadow:0 12px 26px rgba(0,82,204,.20);
}
.mui-ten{opacity:.55;font-weight:950;font-size:18px}
@media (hover:hover){
  .bai-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 55px rgba(11,18,32,.14);
    filter:saturate(1.02);
  }
}
.bai-card:active{transform:translateY(-2px) scale(.99)}

/* 11 bài – khối hướng dẫn sơ (của bạn): hover nổi + click toàn khối */
.step-link{cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, filter .18s ease}
@media (hover:hover){
  .step-link:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 55px rgba(11,18,32,.14);
    filter:saturate(1.02);
  }
}
.step-link:active{transform:translateY(-2px) scale(.99)}

/* Ảnh */
.figure img, .gitem img{
  border-radius:16px;
}


/* Canh giữa tiện dụng */
.can-giua{text-align:center}


/* =========================================================
  THANH ĐI THEO THỨ TỰ: KHỐI 3D VÀNG – CHỮ TRẮNG
========================================================= */
.doc-thu-tu{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.doc-thu-tu__nhan{
  font-weight: 900;
  color: rgba(11,18,32,.88);
}
.doc-thu-tu__luoi{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 920px){
  .doc-thu-tu__luoi{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.doc-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 950;
  letter-spacing: .01em;
  color: #ffffff !important;
  background: linear-gradient(180deg, #FFC928, #E8B408);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 36px rgba(11,18,32,.14), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform 170ms ease, box-shadow 170ms ease, filter 170ms ease;
}
.doc-chip:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 60px rgba(11,18,32,.18), inset 0 1px 0 rgba(255,255,255,.35);
  filter: saturate(1.02) contrast(1.01);
}
.doc-chip:active{
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(11,18,32,.14), inset 0 1px 0 rgba(255,255,255,.30);
}


/* =========================================================
   BẢN TRẮNG - VÀNG 3D (ghi đè màu xanh, giữ layout 3D)
   - Nền vàng nhạt chủ đạo, khối trắng, điểm nhấn vàng/xanh lá
========================================================= */
:root{
  --mau-chinh: #16A34A;      /* xanh lá */
  --mau-chinh-2: #0F7A36;    /* xanh lá đậm */
  --mau-vang: #FFC928;       /* vàng */
  --nen: #FFF7DC;            /* vàng nhạt */
  --nen-2: #FFFFFF;
}

/* Nền tổng thể: bỏ xanh, giữ vàng nhạt + xanh lá rất nhẹ */
body{
  background:
    radial-gradient(1100px 520px at 18% -10%, rgba(255,201,40,.26), rgba(255,201,40,0) 62%),
    radial-gradient(900px 520px at 92% 0%, rgba(22,163,74,.14), rgba(22,163,74,0) 58%),
    linear-gradient(180deg,#FFFFFF 0%, var(--nen) 46%, #FFFFFF 100%) !important;
}

/* Hero: vàng + xanh lá (không xanh dương) */
.hero{
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(255,201,40,.24), rgba(255,201,40,0) 60%),
    radial-gradient(900px 420px at 90% 0%, rgba(22,163,74,.14), rgba(22,163,74,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.80)) !important;
}

/* Logo: đổi dải xanh sang xanh lá */
.logo .logo, .logo3d{
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.92), rgba(255,255,255,0) 52%),
    linear-gradient(145deg, rgba(22,163,74,.22), rgba(255,201,40,.22)) !important;
}

/* Nút/chip: viền xanh lá, nhấn vàng */
.pill{
  border-color: rgba(22,163,74,.22) !important;
}
.pill:hover{ border-color: rgba(22,163,74,.32) !important; }

.nut-chinh, .btn.primary, .nut-nho-chinh{
  border-color: rgba(22,163,74,.35) !important;
}
.nut-nho-vien{
  border-color: rgba(22,163,74,.28) !important;
}

/* Focus: đổi xanh dương sang vàng */
:where(a, button, input, textarea, select):focus-visible{
  outline: 3px solid rgba(255,201,40,.55) !important;
}

/* Callout: đổi xanh dương sang vàng */
.callout{
  border-left-color: rgba(255,201,40,.85) !important;
}

/* Icon khối nhỏ (bài 1): bỏ xanh dương */
.kicon, .icon3d{
  background: linear-gradient(135deg, rgba(22,163,74,.14), rgba(255,201,40,.18)) !important;
  border-color: rgba(22,163,74,.22) !important;
}

/* Thẻ số (11 bài): xanh lá + vàng */
.bai-badge{
  background: linear-gradient(180deg, #16A34A, #0F7A36) !important;
  box-shadow: 0 14px 30px rgba(15, 122, 54, .22) !important;
}
.bai-card{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86)) !important;
}

/* Nhãn vàng chữ trắng (dùng cho 3 khối điều hướng nếu có) */
.khoi-vang-3d{
  background: linear-gradient(180deg, rgba(255,201,40,1), rgba(217,165,28,1)) !important;
  color:#fff !important;
  border-color: rgba(217,165,28,.55) !important;
}

/* Video: poster hiển thị đẹp, bo tròn 3D */
.video-3d__khung{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.86)) !important;
}
.video-3d video{
  border-radius: 18px !important;
}