@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Great+Vibes&family=Noto+Serif:wght@600;700;800&display=swap');
:root{--red:#811611;--gold:#c9912e;--cream:#fff9ee;--ink:#30170f}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Be Vietnam Pro",Arial,sans-serif}body.locked{overflow:hidden}
a{text-decoration:none;color:inherit}button{font:inherit}
.splash{position:fixed;inset:0;z-index:9999;background:#160e08;transition:.7s;overflow:hidden}.splash.hide{opacity:0;visibility:hidden;pointer-events:none}.splash img{width:100%;height:100%;object-fit:fill;animation:breath 14s ease-in-out infinite alternate}@keyframes breath{to{filter:brightness(1.04);transform:scale(1.004)}}
.drum{position:absolute;left:50%;top:21%;width:min(47vw,720px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;opacity:.34;background:repeating-conic-gradient(rgba(255,235,165,.5) 0 1.3deg,transparent 1.3deg 7deg);mask:radial-gradient(circle,transparent 0 48%,#000 49% 52%,transparent 53% 58%,#000 59% 66%,transparent 67%);animation:spin 45s linear infinite;pointer-events:none}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hot{position:absolute;border:0;background:transparent;cursor:pointer}.start{left:50%;top:66.2%;width:31%;height:10%;transform:translate(-50%,-50%);border-radius:60px}.start:hover{box-shadow:0 0 30px rgba(255,220,110,.45)}.music,.sound{top:3%;width:58px;height:58px;border-radius:50%;background:rgba(70,40,15,.78);border:2px solid #f0cf70;color:#ffe69d;font-size:26px;display:grid;place-items:center}.music{right:9%}.sound{right:3%}
.header{position:sticky;top:0;z-index:50;height:78px;padding:0 3.5%;display:flex;align-items:center;justify-content:space-between;background:rgba(255,252,245,.97);box-shadow:0 4px 16px #5b2c1715}.brand{display:flex;align-items:center;gap:12px;color:var(--red);font-family:"Noto Serif",serif;font-weight:800}.brand img{width:58px;height:58px;object-fit:contain}.nav{display:flex;gap:34px;font-size:13px;font-weight:700;text-transform:uppercase}.nav a{padding:29px 0 24px;border-bottom:3px solid transparent}.nav a:hover,.nav a.active{color:var(--red);border-color:var(--red)}.hamb{display:none;border:0;background:none;font-size:28px}
.hero{height:600px;position:relative;overflow:hidden;display:grid;place-items:center;text-align:center;color:#4d2010}.hero-bg{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;animation:ken 22s ease-in-out infinite alternate}@keyframes ken{to{transform:scale(1.045)}}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,236,190,.55),rgba(255,249,227,.2),rgba(255,235,200,.35))}
.hero-deco{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 13% 30%,rgba(255,190,80,.35),transparent 24%),linear-gradient(to bottom,rgba(255,255,255,.12),transparent 55%,rgba(44,20,8,.25))}
.hero-content{z-index:2;margin-top:-20px}.hero-kicker{font-family:"Noto Serif",serif;font-size:24px;color:#7d2a1c;font-weight:700}.hero h1{font-family:"Noto Serif",serif;font-size:clamp(58px,7vw,105px);line-height:.9;color:#7d130f;margin:16px 0 4px;text-shadow:0 2px 1px #fff8}.hero h1 span{display:block;font-family:"Great Vibes",cursive;font-weight:400;font-size:.65em;color:#a96e1c}.hero p{font-size:18px}.cta{display:inline-flex;margin-top:22px;padding:16px 30px;border:2px solid #e1af3e;border-radius:40px;background:linear-gradient(#9e2118,#76110d);color:#ffe7a5;font-weight:800;box-shadow:0 8px 20px #5e210955}
.wave{height:70px;margin-top:-70px;position:relative;z-index:3;background:var(--cream);border-radius:50% 50% 0 0/100% 100% 0 0}
.section{padding:72px 3.5%}.heading{text-align:center;margin-bottom:34px}.heading small{letter-spacing:.25em;color:#ac731e;font-weight:800}.heading h2{font-family:"Noto Serif",serif;color:var(--red);font-size:42px;margin:8px 0}.heading p{max-width:650px;margin:auto;line-height:1.7}
.cards{max-width:1450px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{overflow:hidden;border-radius:20px;background:#18130f;color:white;border:2px solid #d49b2b;box-shadow:0 18px 35px #5f321a30}.pic{height:350px;position:relative;overflow:hidden}.pic img{width:100%;height:100%;object-fit:cover;transition:.5s}.card:hover .pic img{transform:scale(1.05)}.num{position:absolute;left:15px;top:0;background:#8c130f;padding:12px 15px;border-radius:0 0 10px 10px;font-weight:800}.card-body{padding:25px;background:linear-gradient(#242018ee,#14100c)}.card h3{font-family:"Noto Serif",serif;font-size:29px;line-height:1.1;margin:0 0 12px}.card p{line-height:1.6;min-height:76px}.buttons{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:8px}.buttons a,.buttons button{border-radius:8px;padding:11px 6px;background:transparent;font-size:11px;font-weight:800;text-transform:uppercase;cursor:pointer}.video{border:1px solid #d54b41;color:#ff7469}.history{border:1px solid #d1a13c;color:#f3c966}.tour{border:1px solid #32b74e;color:#5ddd75}
.features{display:grid;grid-template-columns:repeat(4,1fr);background:#f6ead4;padding:48px 5%}.feature{text-align:center;padding:15px 35px;border-right:1px solid #d8c29a}.feature:last-child{border:0}.icon{width:72px;height:72px;border-radius:50%;margin:auto;display:grid;place-items:center;background:#fbe9c3;color:#a76b16;font-size:26px}.feature h3{font-family:"Noto Serif",serif;color:var(--red)}.feature p{font-size:14px;line-height:1.6}
.footer{background:linear-gradient(90deg,#74100c,#a11e15,#75110d);color:white;padding:28px 5%;display:grid;grid-template-columns:1.2fr 2fr 1fr 1.5fr;gap:25px;align-items:center}.footer b{color:#ffd66f}
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:#160b07d9;padding:20px}.modal.open{display:grid}.modal-box{width:min(900px,96vw);max-height:90vh;overflow:auto;background:#fffaf0;border-radius:18px;padding:32px;position:relative}.close{position:absolute;right:14px;top:8px;border:0;background:none;font-size:38px;color:var(--red);cursor:pointer}.modal iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px}
.page-hero{height:330px;position:relative;color:white;display:flex;align-items:end;padding:42px 5%;overflow:hidden}.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.page-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#291307d8,#32170866,transparent)}.page-title{z-index:2}.page-title small{font-size:18px}.page-title h1{font-family:"Noto Serif",serif;font-size:56px;margin:5px 0}.page-title p{font-weight:600}
.history-layout{max-width:1380px;margin:30px auto 70px;display:grid;grid-template-columns:250px 1fr;gap:28px;padding:0 3%}.side{background:#fff5e3;border-radius:15px;box-shadow:0 8px 25px #61371918;overflow:hidden;height:max-content;position:sticky;top:100px}.side a{display:block;padding:18px 20px;border-bottom:1px solid #ead8b9;font-weight:700}.side a:first-child,.side a:hover{background:var(--red);color:white}.content{background:#fffaf0;border:1px solid #ead6b5;border-radius:15px;padding:34px;box-shadow:0 10px 30px #62340f12}.content h2,.content h3{font-family:"Noto Serif",serif;color:var(--red)}.content p{line-height:1.8}.overview{display:grid;grid-template-columns:1fr 260px;gap:25px}.sketch{width:100%;opacity:.7;filter:sepia(1)}.timeline{margin:30px 0 15px;border-left:3px solid #d6a342;padding-left:30px}.event{position:relative;margin:0 0 26px}.event:before{content:"";position:absolute;left:-39px;top:7px;width:15px;height:15px;border-radius:50%;background:#ce9733}.event b{color:#8a1711;font-size:19px}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}.gallery img{width:100%;height:160px;object-fit:cover;border-radius:12px;border:2px solid #d9ae57}
.page-actions{display:flex;gap:18px;justify-content:center;margin-top:30px}.page-actions a{padding:14px 28px;border-radius:12px;color:white;font-weight:800}.red{background:#941910}.gold{background:#c9912e}
@media(max-width:900px){.nav{display:none;position:absolute;top:78px;left:0;right:0;background:#fffaf2;flex-direction:column;padding:20px}.nav.open{display:flex}.hamb{display:block}.cards{grid-template-columns:1fr}.features{grid-template-columns:1fr 1fr}.footer{grid-template-columns:1fr 1fr}.history-layout{grid-template-columns:1fr}.side{position:static}.overview{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.hero{height:560px}.pic{height:410px}}
@media(max-width:600px){.brand span{display:none}.hero{height:500px}.hero h1{font-size:48px}.hero-kicker{font-size:17px}.hero p{font-size:14px}.features{grid-template-columns:1fr}.feature{border-right:0;border-bottom:1px solid #dac49a}.footer{grid-template-columns:1fr}.pic{height:280px}.buttons{grid-template-columns:1fr}.page-title h1{font-size:40px}.gallery{grid-template-columns:1fr 1fr}.splash img{object-fit:cover}.start{width:70%;top:66%}.music{right:16%}.sound{right:3%}.music,.sound{width:46px;height:46px;font-size:20px}.drum{width:80vw}}


/* ===== BẢN SỬA V4: hero rõ chữ, icon đình, giữ nhạc qua trang lịch sử ===== */

/* Banner trang chủ gần mẫu hơn và chữ nổi rõ */
.hero:after{
  background:
    linear-gradient(90deg,rgba(255,230,170,.32),rgba(255,250,232,.12),rgba(255,225,170,.22)) !important;
}
.hero-content{
  padding:28px 48px 34px;
  border-radius:28px;
  background:radial-gradient(ellipse at center,rgba(255,250,232,.52),rgba(255,250,232,.18) 58%,transparent 78%);
  text-shadow:0 2px 2px rgba(255,255,255,.8),0 4px 15px rgba(74,35,13,.14);
}
.hero-kicker{
  color:#781910 !important;
  font-size:26px !important;
  text-shadow:0 1px 2px #fff;
}
.hero h1{
  color:#821510 !important;
  font-size:clamp(62px,7.2vw,112px) !important;
  text-shadow:
    0 2px 0 rgba(255,248,224,.9),
    0 5px 16px rgba(63,25,10,.28) !important;
}
.hero h1 span{
  color:#a66a14 !important;
  text-shadow:0 2px 3px rgba(255,248,224,.95),0 4px 10px rgba(68,33,10,.2);
}
.hero p{
  color:#3e1d11 !important;
  font-weight:600;
  text-shadow:0 1px 2px rgba(255,255,255,.9);
}
.cta{
  font-size:17px;
  padding:17px 34px;
  box-shadow:0 8px 22px rgba(95,27,14,.36),0 0 0 2px rgba(255,225,126,.32) inset;
}

/* Icon đình kế bên tên đình */
.card h3{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:70px;
}
.card h3::before{
  content:"";
  flex:0 0 46px;
  width:46px;
  height:46px;
  background:url("../assets/images/logo.png") center/contain no-repeat;
  filter:sepia(1) saturate(1.8) hue-rotate(345deg) brightness(1.25);
  opacity:.95;
}
.card h3 .title-text{
  display:block;
}
.card-body{
  padding-top:22px;
}

/* Làm chữ tên đình sáng, rõ và gần mẫu */
.card h3{
  color:#fffaf0;
  text-shadow:0 2px 3px rgba(0,0,0,.75);
  font-size:30px !important;
}
.card p{
  color:#f5efe6;
}

/* Tiêu đề trang lịch sử rõ hơn */
.page-title{
  padding:18px 24px;
  border-radius:16px;
  background:linear-gradient(90deg,rgba(40,17,7,.78),rgba(40,17,7,.28),transparent);
}
.page-title h1{
  text-shadow:0 3px 10px rgba(0,0,0,.55);
}
.page-title p{
  text-shadow:0 2px 5px rgba(0,0,0,.65);
}

@media(max-width:600px){
  .hero-content{padding:22px 16px 28px;}
  .hero-kicker{font-size:17px !important;}
  .hero h1{font-size:50px !important;}
  .card h3::before{width:40px;height:40px;flex-basis:40px;}
}


/* ===== BẢN SỬA V5: lịch sử mở không tải lại trang, nhạc liên tục ===== */
.history-overlay{
  position:fixed;
  inset:0;
  z-index:5000;
  display:none;
  background:#fff9ee;
}
.history-overlay.open{display:block;}
.history-overlay iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#fff9ee;
}
.history-close{
  position:fixed;
  z-index:5002;
  left:18px;
  top:16px;
  padding:11px 18px;
  border:1px solid #d8a23a;
  border-radius:28px;
  background:rgba(126,20,15,.96);
  color:#fff5d7;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(56,20,8,.28);
}
.history-close:hover{filter:brightness(1.08);}

/* Trên các trang lịch sử: chỉ giữ logo, bỏ toàn bộ tab menu */
body:not(.locked) .header:has(+ .page-hero){
  justify-content:flex-start;
  padding-left:3.5%;
}
body:not(.locked) .header:has(+ .page-hero) .brand{
  margin-right:auto;
}
.direct-back{
  margin-left:auto;
  padding:10px 18px;
  border-radius:24px;
  background:#861711;
  color:white;
  font-weight:700;
  font-size:13px;
}
body.in-frame .direct-back{display:none;}

@media(max-width:600px){
  .history-close{
    left:10px;
    top:10px;
    padding:9px 13px;
    font-size:12px;
  }
}


/* ===== V6: MOBILE KHÔNG MẤT CHỮ + CHUYỂN CẢNH TRỐNG ĐỒNG + VỆT SÁNG ===== */

/* Màn hình chào: nền mờ phủ kín, ảnh chính luôn hiển thị trọn vẹn */
.splash{
  background:
    linear-gradient(rgba(40,22,8,.22),rgba(20,10,4,.38)),
    url("../assets/images/welcome.png") center/cover no-repeat;
}
.splash > #splashImage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center center !important;
  animation:welcomeBreath 14s ease-in-out infinite alternate;
  z-index:1;
  filter:drop-shadow(0 0 22px rgba(255,220,130,.18));
}
@keyframes welcomeBreath{
  from{filter:brightness(1) drop-shadow(0 0 20px rgba(255,220,130,.12));}
  to{filter:brightness(1.035) drop-shadow(0 0 28px rgba(255,220,130,.22));}
}

/* Các nút được JS đặt theo đúng khung ảnh hiển thị, không dùng tọa độ cố định */
.splash .hot{
  z-index:8;
}
.splash .start,
.splash .music,
.splash .sound{
  left:auto;
  right:auto;
  top:auto;
  width:auto;
  height:auto;
  transform:none;
}

/* Trống đồng phía sau logo */
.splash .drum{
  z-index:3;
  opacity:.42;
  mix-blend-mode:screen;
  animation:spin 44s linear infinite;
  will-change:transform,filter,opacity;
}

/* Khi bấm Bắt đầu: trống đồng xoay nhanh + lóe sáng + chuyển cảnh */
.splash.transitioning .drum{
  animation:drumBurst 1.12s cubic-bezier(.18,.78,.22,1) forwards !important;
}
.splash.transitioning::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  background:
    radial-gradient(circle at center,
      rgba(255,249,206,.98) 0%,
      rgba(255,221,113,.92) 14%,
      rgba(255,174,46,.42) 34%,
      rgba(255,135,18,.08) 56%,
      transparent 72%);
  animation:transitionFlash 1.05s ease-out forwards;
}
@keyframes drumBurst{
  0%{
    transform:translate(-50%,-50%) rotate(0deg) scale(1);
    filter:brightness(1);
    opacity:.42;
  }
  58%{
    transform:translate(-50%,-50%) rotate(600deg) scale(1.18);
    filter:brightness(2.6) drop-shadow(0 0 48px #ffe681);
    opacity:.98;
  }
  100%{
    transform:translate(-50%,-50%) rotate(900deg) scale(1.58);
    filter:brightness(3.2);
    opacity:0;
  }
}
@keyframes transitionFlash{
  0%{opacity:0;transform:scale(.66)}
  42%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.35)}
}

/* Vệt sáng bay chéo trên màn hình chào */
.light-streaks{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  overflow:hidden;
}
.light-streaks .streak{
  position:absolute;
  left:-28vw;
  top:var(--top);
  width:var(--length);
  height:2px;
  border-radius:999px;
  opacity:0;
  transform:rotate(var(--angle));
  background:linear-gradient(90deg,
    transparent,
    rgba(255,226,132,.18) 18%,
    rgba(255,246,199,.95) 55%,
    rgba(255,201,75,.55) 78%,
    transparent);
  box-shadow:
    0 0 8px rgba(255,233,159,.9),
    0 0 22px rgba(255,190,58,.55);
  animation:streakFly var(--duration) linear var(--delay) infinite;
}
@keyframes streakFly{
  0%{translate:0 0;opacity:0}
  8%{opacity:.8}
  45%{opacity:.5}
  82%{opacity:.15}
  100%{translate:155vw var(--drift);opacity:0}
}

/* Hạt sáng nhỏ lấp lánh */
.light-streaks::before,
.light-streaks::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle,rgba(255,239,174,.9) 0 1px,transparent 1.8px);
  background-size:78px 78px;
  opacity:.24;
  animation:sparkleMove 18s linear infinite;
}
.light-streaks::after{
  background-size:115px 115px;
  opacity:.14;
  animation-duration:27s;
  animation-direction:reverse;
}
@keyframes sparkleMove{
  to{transform:translate3d(90px,-55px,0)}
}

/* Giảm chuyển động cho người dùng bật Reduce Motion */
@media (prefers-reduced-motion: reduce){
  .splash .drum,
  .light-streaks .streak,
  .light-streaks::before,
  .light-streaks::after,
  .splash > #splashImage{
    animation:none !important;
  }
}

/* Điện thoại: ảnh chính vẫn trọn vẹn, không crop mất chữ */
@media(max-width:620px){
  .splash{
    background:
      linear-gradient(rgba(50,27,8,.22),rgba(18,9,3,.46)),
      url("../assets/images/welcome.png") center/cover no-repeat;
  }
  .splash > #splashImage{
    object-fit:contain !important;
    width:100% !important;
    height:100% !important;
  }
  .splash .drum{
    width:80vw;
    opacity:.36;
  }
}


/* ===== V7: KHÔNG CHỒNG HÌNH + HÀO QUANG TRỐNG ĐỒNG CHUYỂN ĐỘNG ===== */

/* Chỉ hiển thị đúng một ảnh thiết kế. Phần dư hai bên dùng nền chuyển sắc,
   không lặp lại ảnh nên không còn hiện tượng chồng hình. */
.splash{
  background:
    radial-gradient(circle at 50% 30%, #8f6428 0%, #4c2e12 44%, #1d1008 100%) !important;
}
.splash > #splashImage{
  z-index:1 !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  animation:splashImageGlow 7s ease-in-out infinite alternate !important;
}
@keyframes splashImageGlow{
  from{
    filter:brightness(1) saturate(1)
      drop-shadow(0 0 12px rgba(255,214,111,.14));
  }
  to{
    filter:brightness(1.035) saturate(1.04)
      drop-shadow(0 0 28px rgba(255,214,111,.32));
  }
}

/* Vòng trống đồng chính */
.splash .drum{
  overflow:visible;
  isolation:isolate;
  opacity:.48 !important;
  mix-blend-mode:screen;
  animation:spin 48s linear infinite !important;
}

/* Hào quang vàng xoay theo hướng ngược nhau quanh trống đồng */
.splash .drum::before,
.splash .drum::after{
  content:"";
  position:absolute;
  inset:-13%;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}
.splash .drum::before{
  background:
    conic-gradient(
      from 0deg,
      transparent 0 8%,
      rgba(255,236,157,.76) 11%,
      transparent 15% 31%,
      rgba(255,196,68,.62) 35%,
      transparent 39% 57%,
      rgba(255,245,194,.82) 61%,
      transparent 66% 83%,
      rgba(255,189,55,.58) 87%,
      transparent 92% 100%);
  filter:blur(7px);
  opacity:.72;
  animation:haloSpin 18s linear infinite, haloPulse 3.6s ease-in-out infinite;
}
.splash .drum::after{
  inset:-22%;
  border:2px solid rgba(255,229,135,.32);
  box-shadow:
    0 0 20px rgba(255,224,122,.55),
    0 0 55px rgba(255,179,44,.38),
    inset 0 0 28px rgba(255,237,173,.36);
  background:
    repeating-conic-gradient(
      from 12deg,
      rgba(255,239,180,.28) 0 1deg,
      transparent 1deg 12deg);
  opacity:.62;
  animation:haloSpinReverse 31s linear infinite, haloPulseOuter 4.8s ease-in-out infinite;
}
@keyframes haloSpin{
  to{transform:rotate(360deg)}
}
@keyframes haloSpinReverse{
  to{transform:rotate(-360deg)}
}
@keyframes haloPulse{
  0%,100%{opacity:.45;filter:blur(8px) brightness(.95);transform:scale(.96)}
  50%{opacity:.95;filter:blur(5px) brightness(1.45);transform:scale(1.035)}
}
@keyframes haloPulseOuter{
  0%,100%{opacity:.35;box-shadow:0 0 18px rgba(255,224,122,.4),0 0 42px rgba(255,179,44,.25)}
  50%{opacity:.82;box-shadow:0 0 30px rgba(255,239,171,.8),0 0 78px rgba(255,177,39,.52)}
}

/* Vệt sáng rõ hơn nhưng vẫn thanh thoát */
.light-streaks .streak{
  height:2.5px !important;
  box-shadow:
    0 0 9px rgba(255,245,204,.95),
    0 0 25px rgba(255,194,61,.65),
    0 0 45px rgba(255,170,28,.28) !important;
}

/* Chuyển cảnh: tăng tốc cả trống đồng và các lớp hào quang */
.splash.transitioning .drum{
  animation:drumBurst 1.12s cubic-bezier(.18,.78,.22,1) forwards !important;
}
.splash.transitioning .drum::before{
  animation:haloExit 1.05s ease-out forwards !important;
}
.splash.transitioning .drum::after{
  animation:haloExitOuter 1.1s ease-out forwards !important;
}
@keyframes haloExit{
  0%{transform:rotate(0) scale(1);opacity:.7}
  65%{transform:rotate(720deg) scale(1.35);opacity:1;filter:blur(3px) brightness(2.2)}
  100%{transform:rotate(980deg) scale(1.8);opacity:0}
}
@keyframes haloExitOuter{
  0%{transform:rotate(0) scale(1);opacity:.6}
  100%{transform:rotate(-720deg) scale(2.05);opacity:0}
}

/* Điện thoại: vẫn chỉ một ảnh, không crop mất chữ */
@media(max-width:620px){
  .splash{
    background:
      radial-gradient(circle at 50% 32%, #8f6428 0%, #4b2c12 46%, #1b0e07 100%) !important;
  }
  .splash > #splashImage{
    object-fit:contain !important;
    object-position:center center !important;
  }
  .splash .drum{
    opacity:.42 !important;
  }
}


/* ===== V8: BỎ TOÀN BỘ MENU PHÍA TRÊN BÊN PHẢI ===== */
.header{
  justify-content:flex-start !important;
  padding-left:3.5% !important;
  padding-right:3.5% !important;
}
.header .brand{
  margin-right:auto;
}
.header .nav,
.header .hamb{
  display:none !important;
}
@media(max-width:600px){
  .header{
    height:70px;
  }
  .brand img{
    width:52px;
    height:52px;
  }
}


/* ===== V9: CHUYỂN NÚT NHẠC/ÂM THANH SANG TRANG CHỦ ===== */

/* Không còn nút âm thanh trên màn hình chào */
.splash .music,
.splash .sound{
  display:none !important;
}

/* Header chỉ giữ logo trái và bộ điều khiển âm thanh bên phải */
.header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
.home-audio-controls{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}
.home-audio-btn{
  min-width:104px;
  height:52px;
  padding:5px 14px;
  border:1px solid #d6a243;
  border-radius:28px;
  background:linear-gradient(180deg,#8a1a13,#67100c);
  color:#ffe4a0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(72,25,10,.22);
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
.home-audio-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:0 8px 22px rgba(72,25,10,.3);
}
.audio-icon{
  font-size:22px;
  line-height:1;
}
.audio-label{
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

@media(max-width:600px){
  .home-audio-controls{gap:7px;}
  .home-audio-btn{
    min-width:46px;
    width:46px;
    height:46px;
    padding:0;
    border-radius:50%;
  }
  .audio-label{display:none;}
  .audio-icon{font-size:20px;}
}


/* ===== V10: XÓA SẠCH ICON CŨ VÀ LỚP MỜ Ở GÓC PHẢI ===== */
.splash::before{
  display:none !important;
  content:none !important;
}
.splash > #splashImage{
  opacity:1 !important;
  background:none !important;
}
.splash .music,
.splash .sound{
  display:none !important;
}


/* ===== V11: CHỈ 1 NÚT LOA + CANH GIỮA CHỮ TRONG CÁC Ô ===== */

.home-audio-controls{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.home-audio-btn.single-speaker{
  width:50px !important;
  height:50px !important;
  min-width:50px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(180deg,#8d1b14,#65100c) !important;
  border:2px solid #d5a43e !important;
  color:#ffe4a0 !important;
  box-shadow:0 6px 16px rgba(72,25,10,.22);
}
.home-audio-btn.single-speaker .audio-icon{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  font-size:22px;
  line-height:1;
}

/* Canh giữa tuyệt đối nội dung 3 nút trong mỗi thẻ đình */
.buttons{
  align-items:stretch;
}
.buttons a,
.buttons button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1.25 !important;
  min-height:54px;
  padding:10px 8px !important;
  white-space:normal;
}
.video,
.history,
.tour{
  text-align:center !important;
}

@media(max-width:600px){
  .home-audio-btn.single-speaker{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
  }
  .home-audio-btn.single-speaker .audio-icon{
    font-size:20px;
  }
}