:root {
  --casino-bg: #0f0f0f;
  --casino-bg-alt: #181818;
  --casino-surface: #202020;
  --casino-border: #2b2b2b;
  --casino-gold: #d4af37;
  --casino-gold-soft: #b8922a;
  --casino-red: #ff184c;
  --casino-green: #00c874;
  --casino-text: #e5e5e5;
  --casino-text-dim: #a1a1a1;
  --casino-gradient-gold: linear-gradient(135deg,#f8e47a,#d4af37 45%,#b37e10);
  --casino-gradient-neon: linear-gradient(135deg,#ff184c,#ff6a00,#ffc400);
  --transition-base: .3s cubic-bezier(.4,0,.2,1);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-glow-gold: 0 0 0 1px rgba(212,175,55,.4),0 0 12px -2px rgba(212,175,55,.7);
  --shadow-soft: 0 4px 12px -2px rgba(0,0,0,.6);
}

html,body { 
  background: url('/assets/img/bghome.jpg') fixed center center; 
  background-size: cover; 
  color:var(--casino-text); 
  font-family:'Montserrat','Segoe UI',Arial,sans-serif; 
}
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(12, 12, 12, 0.85);
  z-index: -1;
}
h1,h2,h3,h4,h5,h6 { font-family:'Montserrat','Segoe UI',Arial,sans-serif; letter-spacing:.45px; }
h1,h2 { font-weight:700; }
h3,h4 { font-weight:600; }
h5,h6 { font-weight:500; }
.site-header .navbar-brand span { font-family:'Montserrat','Segoe UI',Arial,sans-serif; letter-spacing:.55px; font-weight:700; }
.hero-slide-content h2 { letter-spacing:.55px; }
body { line-height:1.55; }
/* Smooth scroll for in-page anchors (TOC) */
html { scroll-behavior:smooth; }

/* Scrollbar */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#111; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#333,#222); border:2px solid #111; border-radius:20px; }
::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#444,#222); }

/* Typography helpers */
.h-gold { background:var(--casino-gradient-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.text-gold { color:var(--casino-gold)!important; }
.text-dim { color:var(--casino-text-dim)!important; }
.link-gold { color:var(--casino-gold); text-decoration:none; }
.link-gold:hover { color:#ffe7a8; }

/* Header */
.site-header { 
  backdrop-filter: blur(10px); 
  background:rgba(15,15,15,.85); 
  border-bottom:1px solid var(--casino-border); 
}

/* Casino nav bar with 2-row layout */
.casino-nav-inner.flex-column {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.logo-bar {
  min-height: 40px;
  padding-bottom: 0.5rem;
}

/* Ensure body padding accounts for taller header */
body.with-fixed-header {
  padding-top: var(--fixed-header-h, 100px) !important;
}

@media (max-width: 991.98px) {
  body.with-fixed-header {
    padding-top: calc(var(--fixed-header-h, 100px) + 8px) !important;
  }
  .logo-bar {
    min-height: 48px;
  }
}

.navbar-brand span { font-weight:600; letter-spacing:.5px; }
.navbar-nav .nav-link { position:relative; padding:.75rem 1rem; font-weight:500; }
.navbar-nav .nav-link:after { content:""; position:absolute; left:1rem; right:1rem; bottom:.35rem; height:2px; background:var(--casino-gradient-gold); transform:scaleX(0); transform-origin:left; transition:var(--transition-base); border-radius:2px; }
.navbar-nav .nav-link:hover:after, .navbar-nav .nav-link.active:after { transform:scaleX(1); }
figcaption {
    text-align: center;
    background: #151515;
}
/* Hero */
.hero-carousel .carousel-item { height:440px; min-height:300px; position:relative; }
.hero-carousel .carousel-item:before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.85)); }
.hero-slide-content { position:absolute; bottom:0; left:0; right:0; padding:2.5rem 3rem; z-index:2; }
.hero-tag { display:inline-block; background:rgba(0,0,0,.5); padding:.35rem .85rem; font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-md); backdrop-filter:blur(6px); }
/* Indicators restyle */
.hero-carousel-wrapper .carousel-indicators { margin:0; bottom:14px; gap:10px; }
.hero-carousel-wrapper .carousel-indicators [data-bs-target] { width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.4); transition:var(--transition-base); opacity:1; }
.hero-carousel-wrapper .carousel-indicators [data-bs-target].active { background:var(--casino-gold); box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 0 3px rgba(212,175,55,.4); }
.hero-carousel-wrapper .carousel-indicators [data-bs-target]:hover { background:rgba(255,255,255,.5); }
/* Carousel nav custom */
.hero-carousel-wrapper { position:relative; }
/* Holder spans entire carousel for flex alignment inside container */
.hero-carousel-wrapper .hero-nav-holder { position:absolute; inset:0; pointer-events:none; }
.hero-carousel-wrapper .hero-nav-holder .container { position:relative; height:100%; }
.hero-carousel-wrapper .hero-nav-btn { width:54px; height:54px; top:50%; transform:translateY(-50%); opacity:0; pointer-events:auto; }
/* Place buttons at extreme left/right inside container */
.hero-carousel-wrapper .carousel-control-prev.hero-nav-btn { left:0; }
.hero-carousel-wrapper .carousel-control-next.hero-nav-btn { right:0; }
/* Reveal on hover (desktop) or focus */
.hero-carousel-wrapper:hover .hero-nav-btn, .hero-carousel-wrapper .hero-nav-btn:focus { opacity:1; }
.hero-carousel-wrapper .hero-nav-btn .carousel-control-prev-icon,
.hero-carousel-wrapper .hero-nav-btn .carousel-control-next-icon { filter:none; background-image:none; position:relative; }
.hero-carousel-wrapper .hero-nav-btn:before { content:""; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:"Font Awesome 6 Free","Font Awesome 6 Pro"; font-weight:900; font-size:1.15rem; color:#fff; }
.carousel-control-prev.hero-nav-btn:before { content:"\f104"; }
.carousel-control-next.hero-nav-btn:before { content:"\f105"; }
/* Glass (iOS style) button */
.hero-carousel-wrapper .hero-nav-btn { background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%); border-radius:16px; transition:var(--transition-base); box-shadow:0 4px 18px -4px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08),0 0 0 1px rgba(212,175,55,.35) inset; color:#fff; }
.hero-carousel-wrapper .hero-nav-btn:hover { background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.08)); box-shadow:0 6px 20px -4px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1),0 0 0 1px rgba(212,175,55,.5) inset; }
/* Add subtle border glow on active press */
.hero-carousel-wrapper .hero-nav-btn:active { transform:translateY(-50%) scale(.95); }
/* Always visible on touch devices (can't rely on hover) */
@media (hover:none) { .hero-carousel-wrapper .hero-nav-btn { opacity:1; } }
@media (max-width:1199.98px){
  .hero-carousel-wrapper .carousel-control-prev.hero-nav-btn { left:6px; }
  .hero-carousel-wrapper .carousel-control-next.hero-nav-btn { right:6px; }
}
@media (max-width:575.98px){
  .hero-carousel-wrapper .hero-nav-btn { width:44px; height:44px; }
}

/* Cards */
.card-casino { background:var(--casino-surface); border:1px solid var(--casino-border); border-radius:var(--radius-lg); overflow:hidden; position:relative; transition:var(--transition-base); }
.card-casino:hover { transform:translateY(-4px); box-shadow:var(--shadow-glow-gold); }
.card-casino:hover:before { opacity:1; }
.card-casino img { object-fit:cover; height:180px; width:100%; }
.card-casino .card-body { padding:1rem 1.1rem 1.3rem; }
/* Ensure links/buttons are clickable atop pseudo elements */
.card-casino .card-body a, .card-casino .card-body button { position:relative; z-index:2; }
.hero-slide-content a.btn { position:relative; z-index:3; }
.meta { font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; color:var(--casino-text-dim); display:flex; gap:.75rem; }
/* Anchor offset for headings when using table of contents */
h2[id^="sec-"] { scroll-margin-top:90px; }
/* TOC styles */
.toc { position:relative; border:1px solid var(--casino-border); }
.toc-list { counter-reset: toc; list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.toc-list li { counter-increment: toc; position:relative; padding-left:1.2rem; }
.toc-list li:before { content:counter(toc)"."; position:absolute; left:0; top:0; color:var(--casino-gold); font-weight:600; pointer-events:none; }
.toc-list a { text-decoration:none; color:var(--casino-text-dim); transition:var(--transition-base); display:block; line-height:1.35; }
.toc-list a { position:relative; z-index:1; }
.toc-list a:hover { color:var(--casino-gold); }
.toc-list a.active { color:var(--casino-gold); text-shadow:0 0 6px rgba(212,175,55,.6); }
/* TOC no longer sticky per user request */

/* Ticker */
/*
  Cơ chế mới: chỉ cần 1 .ticker-inner trong HTML.
  Ta nhân đôi nội dung bằng ::after để tạo vòng lặp mượt (seamless loop) đặc biệt trên màn hình nhỏ.
*/
.ticker-bar { background:#181818; border-bottom:1px solid var(--casino-border); font-size:.85rem; position:relative; overflow:hidden; }
.ticker-inner { display:flex; gap:2.5rem; padding:.55rem 0; white-space:nowrap; position:relative; align-items:center; flex-wrap:nowrap; }
/* Giữ từng mục trên 1 dòng */
.ticker-inner > * { flex:0 0 auto; white-space:nowrap; display:inline-block; }
/* Animation: vì đã nhân đôi HTML, ta dịch toàn bộ 50% chiều rộng danh sách (nửa đầu) */
.ticker-bar .ticker-inner { animation:ticker-scroll 34s linear infinite; }
@keyframes ticker-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
/* Hover pause (desktop) */
@media (hover:hover) {
  .ticker-bar:hover .ticker-inner { animation-play-state:paused; }
}
/* Mobile: giảm tốc & tăng gap nếu cần */
@media (max-width:575.98px){
  .ticker-bar .ticker-inner { animation-duration:50s; gap:1.4rem; }
  /* Prevent wrapping even on ultra narrow widths */
  .ticker-inner, .ticker-inner > * { white-space:nowrap; }
  .ticker-bar { font-size:.72rem; }
  .ticker-inner > * { display:inline-block; min-width:max-content; }
  /* Allow text scale down slightly if still constrained */
  .ticker-inner > div { font-size:clamp(.62rem,.9vw + .4rem,.75rem); }
}
/* Extra tiny devices (e.g. 320px & below in landscape or legacy) */
@media (max-width:360px){
  .ticker-bar .ticker-inner { gap:1rem; }
  .ticker-bar { font-size:.68rem; }
}

/* Widgets */
.widget { background:var(--casino-surface); border:1px solid var(--casino-border); border-radius:var(--radius-lg); padding:1.25rem 1.2rem 1.4rem; margin-bottom:1.25rem; position:relative; }
.widget-title { font-size:1rem; font-weight:600; margin:0 0 .9rem; letter-spacing:.5px; display:flex; align-items:center; gap:.5rem; }
.widget-title:before { content:""; width:18px; height:18px; background:var(--casino-gradient-gold); border-radius:4px; box-shadow:0 0 0 1px #000, 0 0 8px -2px rgba(212,175,55,.6); }
.tag-cloud a { display:inline-block; background:#151515; border:1px solid #222; color:var(--casino-text-dim); padding:.35rem .65rem; font-size:.7rem; border-radius:30px; margin:.25rem; text-decoration:none; transition:var(--transition-base); }
.tag-cloud a:hover { background:var(--casino-gradient-gold); color:#111; }

/* Buttons */
.btn-gold { background:var(--casino-gradient-gold); color:#111; font-weight:600; border:none; position:relative; overflow:hidden; }
.btn-gold:focus, .btn-gold:hover { filter:brightness(1.08); color:#000; }
.btn-outline-gold { border:1px solid var(--casino-gold); color:var(--casino-gold); background:transparent; }
.btn-outline-gold:hover { background:var(--casino-gold); color:#111; }
/* Icon alignment tweak */
.btn i[class^="fa-"], .btn i[class*=" fa-"] { line-height:1; }

/* Search overlay */
.search-overlay { position:fixed; inset:0; backdrop-filter:blur(14px); background:rgb(0 0 0 / 25%); display:none; z-index:1050; align-items:center; justify-content:center; }
.search-overlay.active { display:flex; }
.search-box { max-width:640px; width:100%; }
.search-box input { background:#111!important; border:1px solid #333!important; color:#fff!important; padding:1rem 1.2rem; font-size:1.1rem; box-shadow:0 0 0 1px rgba(212,175,55,.15); }

/* Footer */
.site-footer { background:#0d0d0d; border-top:1px solid var(--casino-border); padding-top:3rem; margin-top:3rem; }
.footer-brand { font-size:1.15rem; font-weight:600; }
.footer-bottom { border-top:1px solid #1d1d1d; margin-top:2rem; padding:1rem 0; font-size:.8rem; color:var(--casino-text-dim); text-align:center; }

/* Back to top */
#backToTop { position:fixed; right:18px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--casino-gradient-gold); color:#111; display:flex; align-items:center; justify-content:center; font-size:1.1rem; z-index:1040; cursor:pointer; box-shadow:var(--shadow-glow-gold); opacity:0; visibility:hidden; transform:translateY(20px); transition:var(--transition-base); }
#backToTop.show { opacity:1; visibility:visible; transform:translateY(0); }

/* Utilities */
.rounded-lg { border-radius:var(--radius-lg)!important; }
.border-gold { border:1px solid var(--casino-gold)!important; }
.glow-gold { box-shadow:var(--shadow-glow-gold)!important; }
.gradient-gold { background:var(--casino-gradient-gold)!important; }
.neon-text { text-shadow:0 0 6px rgba(255,24,76,.8),0 0 18px rgba(255,24,76,.4); }

/* Sticky sidebar (homepage) */
@media (min-width: 992px) {
  .home-sidebar-sticky { position:sticky; top:90px; align-self:flex-start; height:fit-content; }
  .carousel-item .container {
    max-width: 1162px;
}
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .hero-carousel .carousel-item { height:380px; }
  .hero-slide-content { padding:2rem 1.5rem; }
}
@media (max-width: 575.98px) {
  .hero-carousel .carousel-item { height:320px; }
  .ticker-inner { animation-duration:40s; }
  /* Mobile optimization tweaks */
  .hero-slide-content { padding:1.6rem 1.1rem; }
  .hero-slide-content .display-6 { font-size:1.35rem; line-height:1.25; }
  .hero-slide-content p.lead { font-size:.9rem; }
  .card-casino img { height:150px; }
  .widget { padding:1rem .9rem 1.1rem; }
  .ticker-bar { font-size:.75rem; }
  .navbar-nav .nav-link { padding:.65rem .85rem; }
}

/* === Category block standout layout additions === */
.category-block .category-head { padding:.6rem 1rem; background:linear-gradient(90deg, rgba(255,215,137,.07), rgba(255,215,137,0)); border:1px solid rgba(255,215,137,.18); border-radius:10px; }
.category-block + .category-block { margin-top:2.25rem; }
.category-block .featured-article img { height:230px; object-fit:cover; }
@media (min-width:1400px){ .category-block .featured-article img { height:260px; } }
.article-mini-list li { position:relative; }
.article-mini-list .mini-thumb { width:70px; border-radius:8px; overflow:hidden; background:#111; flex-shrink:0; }
.article-mini-list .mini-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.article-mini-list li:hover .mini-thumb img { transform:scale(1.05); }
.article-mini-list a { font-weight:500; line-height:1.25; }
.category-block .featured-article .card-body { padding-bottom:1.25rem; }
.category-block .meta span + span:before { content:"•"; margin:0 .5rem; opacity:.6; }
.category-block .featured-article:hover { box-shadow:0 0 0 1px rgba(212,175,55,.4),0 0 14px -2px rgba(212,175,55,.6); }
.category-block .featured-article:before { background:linear-gradient(145deg,rgba(212,175,55,.18),transparent 55%); }
@media (max-width:575.98px){
  .category-block .featured-article img { height:190px; }
  .article-mini-list .mini-thumb { width:62px; }
}

/* === Hover dropdown (Tin tức) === */
/* Ensure dropdown opens on hover (desktop) while retaining click/tap on touch devices */
.dropdown-hover > .dropdown-toggle { cursor:pointer; }
.dropdown-hover:hover > .dropdown-menu,
.dropdown-hover:focus-within > .dropdown-menu { display:block; margin-top:0; }

/* Core menu styling to match dark casino theme */
.navbar .dropdown-menu { background:#161616; border:1px solid var(--casino-border); padding:.4rem 0; border-radius:var(--radius-md); min-width:210px; box-shadow:0 10px 26px -8px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04); }

.navbar .dropdown-menu .dropdown-item { font-size:.85rem; font-weight:500; padding:.55rem 1rem; color:var(--casino-text-dim); position:relative; transition:var(--transition-base); }
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus { color:var(--casino-gold); background:linear-gradient(90deg,rgba(212,175,55,.18),rgba(212,175,55,0)); }
.navbar .dropdown-menu .dropdown-item:active { background:var(--casino-gold); color:#111; }
.navbar .dropdown-menu .dropdown-divider { margin:.35rem 0; border-color:#262626; }

/* Slight glow highlight on parent when menu visible */
.dropdown-hover:hover > .nav-link,
.dropdown-hover:focus-within > .nav-link { color:var(--casino-gold); }

/* Touch devices: keep Bootstrap default (click to open) */
@media (hover:none) {
  .dropdown-hover:hover > .dropdown-menu { display:none; }
  .navbar .dropdown-menu { box-shadow:none; border:1px solid #242424; }
}

/* Mobile collapse: ensure spacing & full-width feel */
@media (max-width:991.98px){
  .navbar .dropdown-menu { position:static; float:none; box-shadow:none; border:1px solid #222; background:#121212; margin-top:.25rem; }
  .navbar .dropdown-menu:before { display:none; }
  .navbar .dropdown-menu .dropdown-item { padding:.55rem .95rem; }
}


@media (min-width: 780px){
.live-box{
    grid-template-columns:1fr 340px;
}

}

@media (max-width: 780px){
ul#homeCList {
    max-height: 212px ! IMPORTANT;
}
}
.content.text-dim.mb-4 img {
    width: 100%;
}