/* --- RESET & CẤU TRÚC CHUNG --- */
        body { background-color: #211910; color: #ffffff; font-family: 'Be Vietnam Pro', sans-serif; margin: 0; padding: 0; overflow-x: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }        
        header { display: flex; justify-content: center; align-items: center; padding: 15px 20px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; background-color: transparent; position: fixed; top: 0; left: 0; width: 100%; box-sizing: border-box; z-index: 999; transition: all 0.3s ease; }
        header.scrolled { background-color: rgba(33, 25, 16, 0.72); backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px); }
        .header-date { position: absolute; left: 20px; display: flex; align-items: baseline; gap: 4px; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; color: #e3d6b8; text-transform: uppercase; font-family: 'Segoe UI', monospace; pointer-events: none; }
        .menu-toggle { position: absolute; right: 20px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; z-index: 1001; }
        .menu-toggle span { width: 35px; height: 3px; background-color: #e3d6b8; border-radius: 2px; transition: 0.3s; }
        .side-menu { height: 100vh; width: 300px; max-width: 90vw; position: fixed; top: 0; right: -300px; background: linear-gradient(to bottom, #1e2023 0%, #47484c 100%); transition: right 0.3s ease; z-index: 1005; padding-top: 80px; border-left: none; }        
        .side-menu.active { right: 0; }
        .side-menu a { padding: 15px 25px; font-family: 'League Gothic', sans-serif; font-size: 30px; color: #e3d6b8; display: block; transition: 0.2s; }
        .side-menu a:hover, .side-menu a:focus { background-color: #3a2c1a; color: #e3d6b8; }
        .close-btn { position: absolute; top: 10px; right: 20px; font-size: 36px; color: #fff; cursor: pointer; text-decoration: none; }
        .logo { height: 40px; max-width: 200px; width: auto; object-fit: contain; }

        /* --- HERO SECTION --- */
        .hero-section { position: relative; width: 100%; height: 100vh; min-height: 560px; background-color: #211910; overflow: hidden; }
        .hero-mesh { position: absolute; inset: -25%; z-index: 1; pointer-events: none;
            background:
              radial-gradient(38% 48% at 32% 34%, #efe6cc 0%, rgba(239,230,204,0) 60%),
              radial-gradient(34% 44% at 68% 28%, #d4c39c 0%, rgba(212,195,156,0) 58%),
              radial-gradient(46% 56% at 62% 68%, #b29b7f 0%, rgba(178,155,127,0) 62%),
              radial-gradient(42% 52% at 24% 74%, #3a2614 0%, rgba(58,38,20,0) 62%),
              radial-gradient(52% 62% at 86% 82%, #5a3f22 0%, rgba(90,63,34,0) 60%),
              #211910;
            filter: blur(46px) saturate(108%);
            animation: meshFlow 22s ease-in-out infinite alternate; }
        @keyframes meshFlow { 0% { transform: scale(1.05) translate(0,0) rotate(0deg); } 100% { transform: scale(1.22) translate(-3%,2%) rotate(5deg); } }
        @media (prefers-reduced-motion: reduce) { .hero-mesh { animation: none; } }
        .hero-glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 62% 52% at 50% 47%, rgba(20,12,6,0) 32%, rgba(20,12,6,0.45) 100%); }
        .hero-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(20,12,6,0.30) 0%, rgba(20,12,6,0) 26%, rgba(20,12,6,0) 70%, rgba(33,25,16,0.62) 100%); }
        .hero-overlay { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
        @keyframes heroFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
        .hero-eyebrow { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; letter-spacing: 3.5px; text-transform: uppercase; font-size: 13px; color: #b29b7f; margin-bottom: 20px; opacity: 0; animation: heroFadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.1s forwards; }
        .hero-title { text-transform: uppercase; font-family: 'League Gothic', sans-serif; font-weight: 400; font-size: clamp(40px, 6vw, 88px); line-height: 1.0; letter-spacing: 0.5px; white-space: nowrap; max-width: 100%; margin: 0 0 18px 0; color: #f3ead2; opacity: 0; animation: heroFadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.25s forwards; }
        /* ⛔ KHÔNG nghiêng: League Gothic không có mặt chữ nghiêng -> nghiêng giả. */
        .hero-title span { color: #e3d6b8; }
        @media (max-width: 600px) { .hero-title { white-space: normal; font-size: clamp(42px, 12vw, 70px); line-height: 1.05; } .hero-title span { display: block; } }
        .hero-subtitle { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 300; font-size: clamp(14px, 1.5vw, 18px); color: rgba(243,234,210,0.82); max-width: 580px; margin: 0 0 34px 0; line-height: 1.6; opacity: 0; animation: heroFadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.5s forwards; }
        .hero-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 54px; opacity: 0; animation: heroFadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 0.8s forwards; }
        .btn-primary { background: #e3d6b8; color: #211910; border: none; border-radius: 50px; padding: 15px 38px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 16px; font-weight: 500; cursor: pointer; transition: background 0.2s, transform 0.2s; }
        .btn-primary:hover { background: #f0e6cc; transform: translateY(-2px); }
        .btn-secondary { background: transparent; color: #f3ead2; border: 1.5px solid rgba(227,214,184,0.55); border-radius: 50px; padding: 14px 36px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 16px; font-weight: 400; cursor: pointer; transition: border-color 0.2s, transform 0.2s, background 0.2s; }
        .btn-secondary:hover { border-color: #e3d6b8; background: rgba(227,214,184,0.08); transform: translateY(-2px); }
        .hero-stats { display: flex; gap: clamp(30px, 6vw, 80px); justify-content: center; opacity: 0; animation: heroFadeUp 0.85s cubic-bezier(0.22,1,0.36,1) 1s forwards; }
        .hero-stat { display: flex; flex-direction: column; align-items: center; }
        .hero-stat strong { font-family: 'League Gothic', sans-serif; font-size: clamp(28px, 3.6vw, 46px); font-weight: 400; color: #f3ead2; }
        .hero-stat span { font-family: 'Be Vietnam Pro', sans-serif; font-size: clamp(11px, 1.2vw, 13px); color: #c9b78f; letter-spacing: 0.5px; margin-top: 3px; text-align: center; line-height: 1.3; }

        /* --- FILTER SECTION --- */
        .filter-section { max-width: 1200px; margin: 30px auto 0; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
        .filter-section h2 { font-family: 'League Gothic', sans-serif; font-size: 35px; color: #e3d6b8; margin: 0; font-weight: 400 }
        .filter-btns { display: flex; gap: 10px; }
        .filter-btn { background: transparent; border: 2px solid #e3d6b8; border-radius: 50px; padding: 8px 20px; font-size: 23px; font-weight: 400; color: #e3d6b8; cursor: pointer; transition: all 0.2s; font-family: 'League Gothic', sans-serif;}
        .filter-btn:hover { background: #e3d6b8; color: #211910; }
        .filter-btn.active { background: #e3d6b8; color: #211910; }
        .xem-them-wrap { text-align: center; padding: 20px; }
        .xem-them-btn { background: transparent; border: 2px solid #e3d6b8; border-radius: 50px; padding: 12px 40px; font-size: 20px; font-weight: 400; color: #e3d6b8; cursor: pointer; transition: all 0.2s; font-family: 'League Gothic', sans-serif;}
        .xem-them-btn:hover { background: #e3d6b8; color: #211910; }

        /* --- DANH SÁCH SỰ KIỆN --- */
        .events-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 20px 20px 30px; max-width: 1200px; margin: 0 auto; justify-content: center; justify-items: center; }@keyframes cardIn {from { opacity: 0; transform: translateY(28px) scale(0.97); }to   { opacity: 1; transform: translateY(0) scale(1); }}
        .event-card {border: 1px solid #b29b7f; border-radius: 12px; box-shadow: 0 0 0 1px #332014, 0 4px 18px rgba(51,32,20,0.55); width: 100%; max-width: 420px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 4px 15px rgba(178, 155, 127, 0.15); transition: box-shadow 0.3s ease;} 
        .event-card:hover {box-shadow: 0 0 18px 4px rgba(178, 155, 127, 0.55), 0 0 40px 8px rgba(178, 155, 127, 0.2);}
        .event-card.animating { animation: cardIn 0.45s cubic-bezier(0.22,1,0.36,1) both; }       
        .event-image { width: 100%; aspect-ratio: 4 / 5; height: auto; background-color: #1a130c; position: relative; overflow: hidden; }
        .event-image img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
        
        /* Căn trái nội dung, đệm lề không chạm viền */
        .event-content { padding: 22px 20px 24px; display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start; text-align: left; font-family: 'League Gothic', sans-serif;}
        /* Hàng ngày + nút đếm ngược (cùng hàng) */
        .date-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-bottom: 14px; }
        .event-date { font-size: 16px; font-weight: 400; color: #e3d6b8; font-family: 'Be Vietnam Pro', sans-serif; letter-spacing: 0.5px; }
        .event-date .d-dow { display: inline; }
        .event-date .d-date { display: inline; }
        .event-date .d-dow::after { content: ' '; }
        .countdown-chip { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); color: #fff; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 400; font-size: 13.5px; padding: 6px 15px; border-radius: 30px; white-space: nowrap; }
        .countdown-chip.today { background: rgba(178,155,127,0.3); border-color: #e3d6b8; color: #e3d6b8; }
        /* PROMPT 35 VIỆC A: font tiêu đề thẻ sự kiện. TRƯỚC ĐÂY KHÔNG AI ĐẶT font-family,
   nên .event-title thừa kế Segoe UI của body, KHÔNG phải League Gothic.
   font-weight 100 cũng sai: League Gothic chỉ có MỘT trọng lượng (400). */
        .event-title { color: #e3d6b8; font-size: 30px; font-family: 'League Gothic', sans-serif; font-weight: 400; margin: 0 0 4px 0; text-transform: none; letter-spacing: 0.5px; line-height: 0.95; }
        .event-subtitle { color: #e3d6b8; font-family: 'Be Vietnam Pro', sans-serif; font-size: 19px; font-weight: 200; letter-spacing: 1px; margin: 0 0 16px 0; padding-bottom: 16px; border-bottom: 1px solid #3a2c1a; width: 100%; box-sizing: border-box; text-transform: none; }
        .event-price { color: #e3d6b8; font-size: 32px; font-weight: 500; margin: 0; }
        
        /* Nhóm Thẻ Tag (Giữ nguyên căn giữa) */
        .tags-group { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: auto; width: 100%; }
        .tag { border: 1px solid #5a4a30; border-radius: 20px; padding: 5px 12px; font-size: 15px; color: #e3d6b8; text-transform: capitalize; background-color: rgba(255,255,255,0.02); }

        /* --- TỐI ƯU GIAO DIỆN TỪNG THIẾT BỊ --- */
        @media (max-width: 1024px) {
            .events-container { grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; }
        }

        @media (max-width: 768px) {
        .header-date { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; font-size: 10px; left: 12px; }
        .header-date__sep { display: none; }
        .events-container { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 15px 10px; max-width: 100%; }
        .event-content { padding: 14px 12px 16px; }
        .date-row { margin-bottom: 10px; gap: 6px; }
        .event-date { font-size: 12.5px; line-height: 1.15; flex-shrink: 0; }
        .event-date .d-dow { display: block; }
        .event-date .d-date { display: block; }
        .event-date .d-dow::after { content: none; }
        .countdown-chip { font-size: clamp(7.5px, 2.4vw, 10.5px); padding: 4px 9px; flex-shrink: 1; min-width: 0; }
        .event-title { font-size: 24px; margin-bottom: 2px; }
        .event-subtitle { font-size: 13px; margin-bottom: 10px; padding-bottom: 10px; }
        .event-price { font-size: 20px; }
        .tags-group { gap: 4px; }
        .tag { padding: 2px 6px; font-size: 9px; border-radius: 12px; }
        .filter-section { padding: 0 14px; margin-top: 20px; align-items: center; }
        .filter-section h2 { font-size: 25px; line-height: 1.25; max-width: 50%; }
        .filter-btns { gap: 8px; flex-shrink: 0; }
        .filter-btn { font-size: 18px; padding: 8px 14px; }
        }
        
        /* --- FOOTER --- */
        :root { --hero-max-width: 1820px; }
        .site-footer { position: relative; z-index: 100; overflow: hidden; background: transparent; color: #ffffff; font-family: "Geist", "Inter", ui-sans-serif,system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;text-rendering: geometricPrecision; }        
        a { color: inherit; text-decoration: none; }
        .footer-dots { position: relative; height: 120px; overflow: hidden; background: transparent; }
        .footer-dots__line { position: absolute; left: 0; top: 50%; width: 200%; height: 70px; opacity: 0.75; transform: translateY(-50%); background-image: radial-gradient(circle, rgb(255 255 255 / 0.55) 1.5px, transparent 2px), radial-gradient(circle, rgb(255 255 255 / 0.35) 1px, transparent 1.5px), radial-gradient(circle, rgb(255 255 255 / 0.45) 1.2px, transparent 1.8px); background-position: 0 8px, 24px 22px, 48px 14px; background-size: 72px 38px, 110px 44px, 160px 52px; animation: footerDotsMove 18s linear infinite; }
        @keyframes footerDotsMove { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(-50%, -50%, 0); } }
        .site-footer__inner { width: min(100% - 96px, var(--hero-max-width)); margin: 0 auto; padding: clamp(34px, 4vw, 66px) 0 clamp(18px, 2vw, 34px); }
        .site-footer__top { display: grid; grid-template-columns: minmax(320px, 1.25fr) repeat(3, minmax(150px, 0.42fr)); gap: clamp(28px, 4vw, 76px); min-height: clamp(220px, 24vw, 330px); }
        .site-footer__top h2 { max-width: 680px; margin: 0; font-size: clamp(34px, 3.5vw, 62px); font-weight: 220; line-height: 1.06; }
        .site-footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.35vw, 22px); }
        .site-footer__nav a { color: rgb(255 255 255 / 0.88); font-size: 16px; font-weight: 650; line-height: 1.1; transition: color 180ms ease, transform 180ms ease; }
        .site-footer__nav a:hover { color: #ffffff; transform: translateX(3px); }
        .site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: 8px 18px; margin-top: clamp(14px, 1.4vw, 24px); color: rgb(255 255 255 / 0.52); font-size: 9px; line-height: 1.35; width: 100%; }
        .site-footer__legal a:hover { color: #ffffff; }
        .footer-main-row { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; }
        .footer-logo { height: 40px; width: auto; }
        .footer-left { flex: 1; display: flex; align-items: center; }
        .footer-center { flex: 1; color: #e3d6b8; font-size: 12px; text-align: center; }
        .footer-right {
  /* NỀN API 27/07: footer có thêm link thứ tư (Dành cho lập trình
     viên). Hàng này vốn nowrap nên link đầu bị bóp gãy làm hai dòng.
     Cho phép xuống hàng thay vì bẻ chữ. */
  flex-wrap: wrap; flex: 1; display: flex; gap: 20px; align-items: center; justify-content: flex-end; }
        .footer-right a { color: #e3d6b8; font-size: 14px; font-weight: 500; transition: color 0.3s, text-shadow 0.3s; } 
        .footer-right a:hover, 
        .footer-right a:focus { color: #ffffff; }
        

        @media (max-width: 560px) {
        .footer-main-row { flex-direction: column; gap: 20px; }}
        @media (max-width: 980px) { .site-footer__inner { width: min(100% - 48px, var(--hero-max-width)); } .site-footer__top { grid-template-columns: 1fr 1fr; } .site-footer__top h2 { grid-column: 1 / -1; } }
        @media (max-width: 560px) { .site-footer__inner { width: min(100% - 32px, var(--hero-max-width)); } .site-footer__top { grid-template-columns: 1fr; min-height: auto; } .site-footer__nav a { font-size: 15px; } .site-footer__mark { flex-basis: clamp(38px, 12vw, 58px); } .site-footer__brand span { font-size: clamp(45px, 18vw, 84px); } }

        /* font cho tiêu đề */
        .league-gothic-uniquifier> {font-family: "League Gothic", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;font-variation-settings:"wdth" 100;}

        /* --- NEON MARQUEE SECTION --- */
        .neon-marquee-wrapper { width: 100%; overflow: hidden; background-color: #050505; border-top: 1px solid rgba(255, 255, 255, 0.6); border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding: 12px 0; display: flex; position: relative; z-index: 10; box-shadow: 0 0 35px rgba(178, 155, 127, 0.5), inset 0 0 16px rgba(178, 155, 127, 0.2); }        
        .neon-marquee { display: flex; width: max-content; animation: marqueeScroll 25s linear infinite; } 
        .neon-marquee:hover { animation-play-state: paused; }
        .marquee-content { display: flex; flex-shrink: 0; }
        .marquee-content span { font-family: 'League Gothic', sans-serif; font-size: 28px; padding: 0 15px; color: #e3d6b8; letter-spacing: 2px; white-space: nowrap; }        @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        @media (max-width: 768px) { .marquee-content span { font-size: 20px; padding: 0 10px; } .neon-marquee-wrapper { padding: 8px 0; } }

        /* --- BLOG SLIDER SECTION --- */
        .blog-slider-section { max-width: 1200px; margin: 60px auto 40px; padding: 0 20px; }
        .blog-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
        .blog-header h2 { font-family: 'League Gothic', sans-serif; font-size: 25px; color: #e3d6b8; margin: 0; text-transform: uppercase; }
        .xem-them-btn-small { background: transparent; border: 2px solid #e3d6b8; border-radius: 50px; padding: 8px 24px; font-size: 14px; font-weight: 600; color: #e3d6b8; cursor: pointer; transition: all 0.2s; text-decoration: none; white-space: nowrap; }
        .xem-them-btn-small:hover { background: #e3d6b8; color: #211910; }
        .blog-slider { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 15px; scrollbar-width: none; }
        .blog-slider::-webkit-scrollbar { display: none; }
        .blog-card { flex: 0 0 calc(33.333% - 14px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 15px; }
        .blog-image-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background-color: #1a130c;  }
        .blog-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
        .blog-card:hover .blog-image-wrapper img { transform: scale(1.05); }
        .blog-badge { position: absolute; top: 10px; left: 10px; background-color: #fff; color: #211910; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; z-index: 2; }
        .blog-content { display: flex; flex-direction: column; gap: 6px; }
        .blog-title { font-size: 18px; font-weight: 700; color: #fff; margin: 0; line-height: 1.35; }
        .blog-subtitle { font-size: 14px; color: #aaa; margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        @media (max-width: 1024px) { .blog-card { flex: 0 0 calc(50% - 10px); } }
        @media (max-width: 768px) { .blog-slider-section { margin: 40px auto 20px; } .blog-header h2 { font-size: 26px; } .xem-them-btn-small { padding: 6px 16px; font-size: 12px; } .blog-card { flex: 0 0 85%; } .blog-title { font-size: 16px; } .blog-subtitle { font-size: 13px; } }

/* ===== Side menu: header (ava+tên+×) · tìm bạn · nav · nút đáy ===== */
.side-menu { display:flex; flex-direction:column; padding-top:0; }
.side-menu .close-btn { display:none; }

.side-menu .sm-top { display:flex; align-items:center; gap:12px; padding:20px 18px 16px; border-bottom:1px solid rgba(255,255,255,.1); flex:none; }
.side-menu .sm-ava { width:54px; height:54px; border-radius:50%; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#e19e37,#8d2d2b); color:#fff; font-weight:800; font-size:20px; border:2px solid #e3d6b8; }
.side-menu .sm-ava img { width:100%; height:100%; object-fit:cover; }
.side-menu .sm-id { flex:1; min-width:0; }
.side-menu .sm-name { font-family:'Be Vietnam Pro',sans-serif; font-size:18px; font-weight:700; color:#fff; line-height:1.2; }
.side-menu .sm-sub { font-family:'Be Vietnam Pro',sans-serif; font-size:12px; color:#e19e37; word-break:break-all; margin-top:2px; }
.side-menu .sm-close { background:none; border:none; color:rgba(255,255,255,.6); font-size:26px; line-height:1; cursor:pointer; padding:0 2px; align-self:flex-start; }
.side-menu .sm-close:hover { color:#fff; }

.side-menu .sm-body { flex:1 1 auto; overflow-y:auto; padding:16px 0; }

.side-menu .sm-search { padding:0 18px 10px; }
.side-menu .sm-label { font-family:'Be Vietnam Pro',sans-serif; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); font-weight:700; margin:0 0 8px; }
.side-menu .sm-search-row { display:flex; gap:8px; }
.side-menu .sm-search-row input { flex:1; min-width:0; background:#1c1c1c; border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:9px 12px; color:#fff; font-size:13px; outline:none; font-family:'Be Vietnam Pro',sans-serif; }
.side-menu .sm-search-row input:focus { border-color:#e3d6b8; }
.side-menu .sm-search-row button { background:#e3d6b8; color:#fff; border:none; border-radius:10px; padding:0 16px; font-weight:700; font-size:13px; cursor:pointer; font-family:'Be Vietnam Pro',sans-serif; }
.side-menu .sm-search-row button:hover { background:#b93c20; }
.side-menu .sm-friend-results { margin-top:10px; padding:0 18px; }
.side-menu .sm-friend-item { display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; text-decoration:none; font-size:14px; }
.side-menu .sm-friend-item:hover { background:rgba(255,255,255,.06); color:inherit; text-shadow:none; }
.side-menu .sm-friend-ava { width:38px; height:38px; border-radius:50%; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#e19e37,#8d2d2b); color:#fff; font-weight:800; font-size:14px; }
.side-menu .sm-friend-ava img { width:100%; height:100%; object-fit:cover; }
.side-menu .sm-friend-meta { display:flex; flex-direction:column; font-family:'Be Vietnam Pro',sans-serif; }
.side-menu .sm-friend-meta b { font-size:13px; color:#fff; }
.side-menu .sm-friend-meta small { font-size:11px; color:rgba(255,255,255,.5); }
.side-menu .sm-friend-empty { font-family:'Be Vietnam Pro',sans-serif; color:rgba(255,255,255,.5); font-size:12px; padding:6px 18px; }

.side-menu .sm-nav { display:flex; flex-direction:column; padding-top:4px; }
.side-menu .sm-dropdown { display:flex; flex-direction:column; }
        .side-menu .sm-dd-toggle { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:15px 25px; font-family:'League Gothic',sans-serif; font-size:30px; line-height:1; color:#e3d6b8; background:none; border:none; cursor:pointer; text-align:left; transition:background .2s; }
        .side-menu .sm-dd-toggle:hover { background:rgba(255,255,255,.06); }
        .side-menu .sm-dd-caret { font-size:16px; transition:transform .25s; opacity:.75; }
        .side-menu .sm-dropdown.open .sm-dd-caret { transform:rotate(180deg); }
        .side-menu .sm-dd-list { display:flex; flex-direction:column; max-height:0; overflow:hidden; transition:max-height .28s ease; }
        .side-menu .sm-dropdown.open .sm-dd-list { max-height:200px; }
        .side-menu .sm-dd-list a { font-size:24px; padding-left:42px; opacity:.92; }


.side-menu .sm-foot { flex:none; padding:14px 18px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; gap:10px; }
.side-menu .sm-foot .sm-link { display:block; text-align:center; padding:12px; font-size:14px; font-weight:600; font-family:'Be Vietnam Pro',sans-serif; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.16); border-radius:12px; transition:background .2s, border-color .2s; }
.side-menu .sm-foot .sm-link:hover { background:rgba(255,255,255,.06); color:#fff; text-shadow:none; }
.side-menu .sm-foot .sm-link.logout { color:#ff6a42; border-color:rgba(255,106,66,.4); }
.side-menu .sm-foot .sm-link.logout:hover { background:rgba(255,106,66,.1); }

/* ===== Khu môi giới quần áo (cháy phố) ===== */
.shop-clothes-section { max-width: 1200px; margin: 0 auto; padding: 20px 20px 40px; }
.shop-clothes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-top: 12px; }
.shop-clothes-empty { grid-column: 1 / -1; text-align: center; color: #8a8a8a; padding: 40px 0; font-size: 15px; }

/* ===== Thông báo trong side menu ===== */
.side-menu .sm-notif { display:block; text-align:left; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:12px 14px; margin:0 18px 12px; cursor:pointer; }
.side-menu .sm-notif:hover { background:rgba(255,255,255,.09); }
.side-menu .sm-notif-row { display:flex; align-items:center; justify-content:space-between; }
.side-menu .sm-notif-title { font-family:'Be Vietnam Pro',sans-serif; font-size:13px; font-weight:700; color:#fff; }
.side-menu .sm-notif-badge { min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#e0245e; color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.side-menu .sm-notif-latest { display:block; font-family:'Be Vietnam Pro',sans-serif; font-size:12px; color:rgba(255,255,255,.6); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Modal thông báo đầy đủ */
.noti-scrim { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:2000; display:none; align-items:flex-start; justify-content:center; padding:60px 16px; }
.noti-scrim.show { display:flex; }
.noti-box { width:420px; max-width:100%; max-height:80vh; background:#1b1b1f; border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; font-family:'Be Vietnam Pro',sans-serif; }
.noti-box-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.1); color:#fff; font-weight:700; }
.noti-box-actions { display:flex; align-items:center; gap:12px; }
.noti-allread { background:none; border:none; color:#ff7a3c; font-size:12px; font-weight:600; cursor:pointer; }
.noti-x { background:none; border:none; color:#aaa; font-size:24px; line-height:1; cursor:pointer; }
.noti-box-list { overflow-y:auto; }
.noti-it { padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.08); cursor:pointer; }
.noti-it:hover { background:rgba(255,255,255,.06); }
.noti-it.unread { background:rgba(224,36,94,.10); }
.noti-it-text { font-size:13px; color:#eee; line-height:1.4; }
.noti-it-snip { font-size:12px; color:#aaa; margin-top:3px; font-style:italic; }
.noti-it-time { font-size:11px; color:#888; margin-top:4px; }
.noti-empty { padding:28px 16px; text-align:center; color:#888; font-size:13px; }

/* Khu quần áo - tiêu đề 2 dòng + xuống hàng gọn trên điện thoại */
.shop-clothes-section .blog-header h2 .bh-sub { display: block; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 300; font-size: clamp(12px, 1.3vw, 14px); line-height: 1.45; text-transform: none; color: rgba(227,214,184,0.62); letter-spacing: 0.2px; margin-top: 7px; }
/* Bộ lọc Nam/Nữ khu quần áo (ẩn ở desktop, hiện ở mobile) */
.clothes-filter { display: flex; gap: 10px; }
.clothes-filter__btn { background: transparent; border: 2px solid #e3d6b8; border-radius: 50px; padding: 8px 30px; font-size: 14px; font-weight: 600; color: #e3d6b8; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.clothes-filter__btn.active, .clothes-filter__btn:hover { background: #e3d6b8; color: #211910; }
@media (max-width: 768px) {
    .shop-clothes-section .blog-header { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
    .shop-clothes-section .blog-header h2 { font-size: 20px; line-height: 1.3; }
    .shop-clothes-section .blog-header h2 .bh-sub { margin-top: 5px; }
    .clothes-filter { display: flex; justify-content: center; }
}


/* ===== Hashtag filter (thẻ + thanh lọc) ===== */
.tag { cursor: pointer; transition: all .16s; }
.tag::before { content: '#'; opacity: .5; margin-right: 1px; }
.tag:hover { border-color: #e3d6b8; color: #e3d6b8; }
.tag.active { background: #e3d6b8; border-color: #e3d6b8; color: #211910; }
.hashtag-bar { max-width: 1200px; margin: 14px auto 0; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.htag { border: 1.5px solid #e3d6b8; background: transparent; color: #e3d6b8; border-radius: 30px; padding: 6px 15px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 14px; font-weight: 400; cursor: pointer; transition: all .16s; white-space: nowrap; }
.htag:hover { background: rgba(227,214,184,.12); }
.htag.active { background: #e3d6b8; color: #211910; }
.htag--all { border-style: dashed; opacity: .85; }
@media (max-width: 768px) {
  .hashtag-bar { padding: 0 14px; gap: 6px; margin-top: 10px; }
  .htag { font-size: 12px; padding: 5px 12px; }
}

/* chip cố định: mở đều / tạm đóng (Đợt 2) */
.countdown-chip.open{background:rgba(46,204,113,.16);border:1px solid rgba(46,204,113,.4);color:#4ade80}
.countdown-chip.closed{background:rgba(230,180,80,.18);border:1px solid rgba(230,180,80,.5);color:#f0c060}


/* ===== The event: khung tranh bao tang (anh thut trong khung + matte, giu glow + onclick) ===== */
.event-card{position:relative;padding:11px;box-sizing:border-box}
.event-card *{box-sizing:border-box}
.event-card .event-image{border-radius:7px}
.event-card .event-content{padding:14px 8px 10px}
.event-card::before{content:"";position:absolute;inset:6px;border:1px solid rgba(227,214,184,.5);border-radius:9px;pointer-events:none;z-index:5}
.event-card::after{content:"";position:absolute;inset:9px;border:.5px solid rgba(202,168,106,.5);border-radius:7px;pointer-events:none;z-index:5}
.event-subtitle{font-family:'Be Vietnam Pro',sans-serif;font-style:italic;font-weight:500}


/* gia + so ve cung 1 hang: gia ben trai, con X ve ben phai */
.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%}
.event-tickets{font-family:'Be Vietnam Pro',sans-serif;font-size:13px;font-weight:400;color:#e3d6b8;white-space:nowrap}
.event-tickets.soldout{opacity:.7;text-decoration:line-through}
@media(max-width:768px){.event-tickets{font-size:11.5px}}

/* ===== Loc dropdown + hashtag the 2 cot (toi da 4) ===== */
.tags-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 13px; width: 100%; }
.tag { border: 1px solid #6a5636; background: rgba(227,214,184,.05); color: #e3d6b8; border-radius: 10px; padding: 10px 8px; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: .2px; text-align: center; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag.solo { grid-column: 1 / -1; }
.hashtag-filter { max-width: 1200px; margin: 12px auto 0; padding: 0 20px; display: flex; justify-content: flex-start; }
.loc-wrap { position: relative; display: inline-block; }
.loc-btn { border: 2px solid #e3d6b8; background: transparent; color: #e3d6b8; border-radius: 30px; padding: 8px 20px; font-family: 'League Gothic', sans-serif; font-size: 23px; letter-spacing: 1px; line-height: 1; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all .16s; }
.loc-btn:hover { background: rgba(227,214,184,.12); }
.loc-btn.has { background: #e3d6b8; color: #211910; }
.loc-btn .fn { width: 15px; height: 15px; }
.loc-btn .cv { font-size: 12px; }
.loc-badge { font-family: 'Be Vietnam Pro', sans-serif; font-size: 14px; font-weight: 500; }
.loc-menu { position: absolute; top: calc(100% + 8px); left: 0; transform: none; background: #241a10; border: 1px solid #5a4a30; border-radius: 14px; padding: 8px; min-width: 220px; max-height: 340px; overflow: auto; display: none; z-index: 60; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.loc-wrap.open .loc-menu { display: block; }
.hashtag-filter .htag { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: none; background: transparent; color: #e3d6b8; border-radius: 9px; padding: 10px 13px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 14.5px; font-weight: 300; cursor: pointer; white-space: nowrap; }
.hashtag-filter .htag:hover { background: rgba(227,214,184,.08); }
.hashtag-filter .htag.active { background: #e3d6b8; color: #211910; font-weight: 500; }
.hashtag-filter .htag--all { border: none; opacity: 1; }
.hashtag-filter .htag .ck { opacity: 0; font-size: 12px; }
.hashtag-filter .htag.active .ck { opacity: 1; }
@media (max-width: 768px) {
  .tags-group { gap: 6px; padding-top: 10px; }
  .tag { font-size: 11.5px; padding: 8px 5px; border-radius: 9px; }
  .loc-btn { font-size: 21px; padding: 7px 16px; }
  .loc-menu { min-width: 200px; max-width: calc(100vw - 32px); }
}

/* ===== PROMPT 21: biến cho css/branch.css. Lấy đúng bảng màu ART của web gốc:
   nền nâu #211910, chữ kem #f3ead2, màu nhấn tan #e3d6b8.
   TUYỆT ĐỐI không dùng cam của club ở đây. ===== */
:root {
    --b-accent:        #e3d6b8;
    --b-nav-accent:    #e3d6b8;
    --b-muted:         rgba(243, 234, 210, .62);
    --b-border:        rgba(227, 214, 184, .20);
    --b-header-h:      74px;

    /* 3 ô danh mục: nền nâu sáng hơn nền trang cho tách khối */
    --b-sq-bg:         #2c2216;
    --b-sq-bg-active:  #372a19;
    --b-sq-border:     rgba(227, 214, 184, .26);
    --b-sq-text:       #f3ead2;
    --b-sq-sub:        rgba(243, 234, 210, .60);
    --b-sq-shadow:     none;

    /* khung thẻ sự kiện */
    --b-card-bg:       #2a2015;
    --b-card-border:   rgba(178, 155, 127, .38);
}
/* PROMPT 21: mesh + glow + scrim là lớp phủ của HERO ẢNH cũ (cao 100vh).
   iOS BranchView nhánh art KHÔNG có chúng, nền chỉ là màu #211910 trơn.
   Title block mới thấp, mà 3 lớp này là position:absolute z-index 1-2 nên chúng
   sẽ vẽ ĐÈ LÊN chữ. Tắt đi cho khớp iOS. */
.hero-mesh, .hero-glow, .hero-scrim { display: none; }

/* PROMPT 34 VIỆC E.4: nhãn nội dung TRẢ PHÍ (Điều 23 Luật Quảng cáo). */
.event-card[data-sponsored="1"] { position: relative; }
.event-card[data-sponsored="1"]::before {
  content: "Được tài trợ";
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: rgba(0,0,0,.72); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
}
#filterTitle{text-transform:uppercase;}