/* --- RESET & CẤU TRÚC CHUNG --- */
        body { background-color: #14012a; color: #f4e9e4; 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; }
        body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity:0.06; mix-blend-mode:overlay; }
        header { display: flex; justify-content: center; align-items: center; padding: 15px 20px; background-color: #14012a; position: fixed; top: 0; left: 0; width: 100%; box-sizing: border-box; z-index: 999; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
        .header-date { position: absolute; left: 20px; display: flex; align-items: baseline; gap: 4px; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; color: #c5565f; 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: #c5565f; 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: #cccccc; display: block; transition: 0.2s; }
        .side-menu a:hover { background-color: #222; color: #c5565f; }
        .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 { width: 100%; height: 100vh; background-color: #14012a; position: relative; overflow: hidden; }
        .hero-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
        .hero-blob { position:absolute; border-radius:50%; filter:blur(70px); opacity:0.45; z-index:1; pointer-events:none; }
        .hero-blob1 { width:480px; height:480px; background:radial-gradient(circle, #ddb7a8, transparent 70%); top:-120px; right:-100px; }
        .hero-blob2 { width:420px; height:420px; background:radial-gradient(circle, #c5565f, transparent 70%); bottom:-140px; left:-80px; }
        /* --- HERO FADE-IN ANIMATION --- */
        @keyframes heroFadeUp {
            from { opacity: 0; transform: translateY(28px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .hero-title { text-transform: uppercase;white-space: nowrap;font-size: clamp(17px, 4.6vw, 80px); font-weight: 400; line-height: 1.1; margin: 0 0 16px 0; color: #f4e9e4; font-family: 'League Gothic', sans-serif;opacity: 0;animation: heroFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;}
        /* ⛔ KHÔNG nghiêng: League Gothic không có mặt chữ nghiêng -> nghiêng giả.
           Điểm nhấn ở đây là nét gạch chân vẽ tay bên dưới, không phải độ nghiêng. */
        .hero-title span { color: #c5565f; position: relative; display: inline-block; }
        /* HIDE-LINE-NGAN 22/09/2026: bỏ gạch lượn dưới chữ nhấn hero (Phúc chốt) */
        .hero-eyebrow { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; letter-spacing: 3.5px; text-transform: uppercase; font-size: 13px; color: #ddb7a8; margin: 0 0 14px 0; opacity: 0; animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards; }
        @media (min-width: 601px) { .hero-title { white-space: nowrap; } .hero-title br { display: none; } }
        .hero-subtitle {font-size: clamp(14px, 1.6vw, 18px); color: rgba(244,233,228,0.75); margin: 0 0 36px 0; line-height: 1.6;opacity: 0;animation: heroFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;}
        .hero-buttons {display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 60px;opacity: 0;animation: heroFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;}
        .btn-primary { background: #c5565f; color: #ffffff; border: none; border-radius: 50px; padding: 16px 36px; font-size: 25px; font-weight: 400; cursor: pointer; transition: background 0.2s, transform 0.2s;  font-family: 'League Gothic', sans-serif; }
        .btn-primary:hover { background: #f4e9e4; transform: scale(1.03); color: #c5565f }
        .btn-secondary { background: transparent; color: #ffffff; border: 2px solid rgba(255,255,255,0.7); border-radius: 50px; padding: 14px 36px; font-size: 16px; font-weight: 600; cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
        .btn-secondary:hover { border-color: #ffffff; transform: scale(1.03); }
        .hero-stats { display: flex; gap: clamp(30px, 6vw, 80px); justify-content: center; }
        .hero-stat { display: flex; flex-direction: column; align-items: center; }
        .hero-stat strong { font-size: clamp(24px, 3.5vw, 42px); font-weight: 800; color: #f4e9e4; }
        .hero-stat span { font-size: clamp(11px, 1.2vw, 14px); color: rgba(244,233,228,0.6); margin-top: 4px; text-align: center; line-height: 1.3; }

        /* phân chia section */
        .stitch-divider { width:100%; height:30px; position:relative; }
        .stitch-divider svg { width:100%; height:100%; display:block; }
        
        /* cuộn */
        .scroll-track { position:fixed; top:0; left:0; width:100%; height:6px; z-index:1000; background:rgba(197,86,95,0.14); }
        .scroll-fill {height:100%; width:0%;background-image: repeating-linear-gradient(90deg, #c5565f 0 10px, transparent 10px 16px);transition: width 0.1s linear;}

        /* --- 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: #c5565f; margin: 0; font-weight: 400 }
        .filter-btns { display: flex; gap: 10px; }
        .filter-btn { background: transparent; border: 2px solid #c5565f; border-radius: 50px; padding: 8px 20px; font-size: 23px; font-weight: 400; color: #c5565f; cursor: pointer; transition: all 0.2s; font-family: 'League Gothic', sans-serif;}
        .filter-btn:hover { background: #c5565f; color: #fff; }
        .filter-btn.active { background: #c5565f; color: #fff; }
        .xem-them-wrap { text-align: center; padding: 20px; }
        .xem-them-btn { background: transparent; border: 2px solid #c5565f; border-radius: 50px; padding: 12px 40px; font-size: 20px; font-weight: 400; color: #c5565f; cursor: pointer; transition: all 0.2s; font-family: 'League Gothic', sans-serif;}
        .xem-them-btn:hover { background: #c5565f; color: #fff; }

        /* --- 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 {background: #1c0a33; border: 2px solid #ddb7a8; border-radius: 12px; width: 100%; max-width: 420px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 4px 15px rgba(197, 86, 95, 0.15); transition: box-shadow 0.3s ease;}
        .event-card { position: relative; overflow: visible; }
        .event-card:hover {box-shadow: 0 0 18px 4px #c5565f, 0 0 40px 8px rgba(197, 86, 95, 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: #1a1a1a; 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 */
        .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: #f4e9e4; 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(197,86,95,0.14); border: 1px solid rgba(197,86,95,0.35); color: #c5565f; 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(221,183,168,0.18); border-color: #ddb7a8; color: #ddb7a8; }
        /* 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: #c5565f; 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-title { position: relative; display: inline-block; }
        .event-title::after { content:''; position:absolute; left:-2px; right:-2px; bottom:-4px; height:8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 12 Q 30 4, 60 10 T 120 9 T 198 11' stroke='%23c5565f' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:100% 100%; }
        .event-subtitle { color: #ddb7a8; 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 rgba(244,233,228,.15); width: 100%; box-sizing: border-box; text-transform: none; }
        .event-price { color: #c5565f; font-size: 32px; font-weight: 400; 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 rgba(221,183,168,.55); border-radius: 20px; padding: 5px 12px; font-size: 15px; color: #ddb7a8; text-transform: capitalize; background-color: rgba(255,255,255,0.04); }

        /* --- 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 --- */
        .footer-wrap { position:relative; }
        .torn-edge { width:100%; height:24px; display:block; margin-bottom:-1px; }
        .torn-edge path { fill:#f4e9e4; }
        :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; }
        .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: #f4e9e4;  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: #f4e9e4; font-size: 14px; font-weight: 500; transition: opacity 0.3s; }
        .footer-right a:hover { opacity: 0.7; }
        

        @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;}

        /* --- 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: #c5565f; margin: 0; text-transform: uppercase; }
        .xem-them-btn-small { background: transparent; border: 2px solid #c5565f; border-radius: 50px; padding: 8px 24px; font-size: 14px; font-weight: 600; color: #c5565f; cursor: pointer; transition: all 0.2s; text-decoration: none; white-space: nowrap; }
        .xem-them-btn-small:hover { background: #c5565f; color: #fff; }
        .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: #1a1a1a;  }
        .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: #000; 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: #c5565f; margin: 0; line-height: 1.35; transition: color 0.2s; }
        .blog-card:hover .blog-title { color: #ddb7a8; }
        .blog-subtitle { font-size: 14px; color: #ddb7a8; 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 #d14828; }
.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:#d14828; }
.side-menu .sm-search-row button { background:#d14828; 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:#cccccc; 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; }

/* 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 #c5565f; border-radius: 50px; padding: 8px 30px; font-size: 14px; font-weight: 600; color: #c5565f; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.clothes-filter__btn.active, .clothes-filter__btn:hover { background: #c5565f; color: #fff; }

/* Khu quần áo - xuống hàng gọn + canh giữa trên điện thoại */
@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; }
    .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: #c5565f; color: #c5565f; }
.tag.active { background: #c5565f; border-color: #c5565f; color: #fff; }

/* chip cố định: mở đều / tạm đóng (Đợt 2). Tông sáng cho dễ đọc trên nền tối. */
.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}


/* gia + so ve cung 1 hang: gia trai, con X ve 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:#f4e9e4;white-space:nowrap}
.event-tickets.soldout{opacity:.6;text-decoration:line-through}
@media(max-width:768px){.event-tickets{font-size:11.5px}}

/* ===== The hashtag 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 rgba(221,183,168,.4); background: rgba(255,255,255,.04); color: #f4e9e4; 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; }
@media (max-width: 768px) {
  .tags-group { gap: 6px; padding-top: 10px; }
  .tag { font-size: 11.5px; padding: 8px 5px; border-radius: 9px; }
}

/* ===== PROMPT CONCERT: biến cho css/branch.css. Bảng màu CONCERT (Phúc chốt, ảnh design):
   nền tím than đậm #14012a, chữ kem #f4e9e4, phụ be #ddb7a8, accent đỏ hồng #c5565f. ===== */
:root {
    --b-accent:        #c5565f;
    --b-nav-accent:    #c5565f;
    --b-muted:         rgba(244, 233, 228, .55);
    --b-border:        rgba(197, 86, 95, .22);
    --b-header-h:      70px;      /* 15px + logo 40px + 15px, không viền */

    /* 3 ô danh mục: nền tím than ĐẶC trên nền tím than, viền be mờ cho nổi khối */
    --b-sq-bg:         #1c0a33;
    --b-sq-bg-active:  #2a1245;
    --b-sq-border:     rgba(221, 183, 168, .28);
    --b-sq-text:       #f4e9e4;
    --b-sq-sub:        rgba(244, 233, 228, .58);
    --b-sq-shadow:     0 2px 10px rgba(0, 0, 0, .35);

    /* khung thẻ sự kiện: viền be */
    --b-card-bg:       #1c0a33;
    --b-card-border:   rgba(221, 183, 168, .35);
}
/* PROMPT 21: nền blob màu. iOS CÓ (WorkshopBlobBackground.swift, BranchView.swift:169).
   Trước đây blob nằm trong hero cao 100vh; title block mới thấp hơn nhiều nên blob phải
   thành NỀN CỐ ĐỊNH của cả trang, nếu không nó sẽ tràn lên đè vào chữ.
   z-index -1: vẽ phía sau nội dung, phía trên nền trang. */
.hero-blob { position: fixed; z-index: -1; opacity: .40; }
.hero-blob1 { top: -140px; right: -120px; bottom: auto; left: auto; }
.hero-blob2 { bottom: -160px; left: -100px; top: auto; right: auto; }

/* 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;}