/* ============================================================================
   branch.css: THÂN TRANG 3 NHÁNH (club / workshop / art)
   Nguồn chuẩn BỐ CỤC: Dilo/Dilo/Screens/BranchView.swift
   Nguồn chuẩn MÀU CHỮ: chính css/<nhánh>.css (design web gốc), KHÔNG ghi đè.
   ----------------------------------------------------------------------------
   ⚠ NGUYÊN TẮC CỦA FILE NÀY (Chủ dự án chốt 12/07/2026):
     File này chỉ đụng vào BỐ CỤC: kích thước, khoảng cách, vị trí, sắp xếp.
     Nó KHÔNG đặt color, KHÔNG đặt font-family, KHÔNG đặt text-shadow cho
     .hero-title, .hero-eyebrow, .hero-subtitle, .filter-section h2, .event-title,
     .event-price, .event-date, .event-subtitle, .countdown-chip, .tag.
     Toàn bộ những thứ đó do css/<nhánh>.css quyết định, giữ đúng design gốc:
       club: tiêu đề trắng PHÁT SÁNG neon, giá phát sáng
       ws  : tiêu đề #3b3b3b, chữ nhấn #8d2d2b có GẠCH CHÂN VÀNG (::after)
       art : tiêu đề kem #f3ead2, chữ nhấn tan #e3d6b8
     Sửa file này mà đặt màu là làm hỏng design 3 nhánh. Đã hỏng một lần rồi.

   ⚠ KHÔNG khai báo :root ở đây. branch.css nạp SAU css/<nhánh>.css, nên một
     khối :root ở đây sẽ ĐÈ bảng màu của từng nhánh (cùng specificity, đứng sau
     thì thắng). Đúng lỗi đó đã làm workshop và art bị nhuộm màu club.
     Biến --b-* do TỪNG css nhánh khai báo. Ở đây chỉ ĐỌC, kèm giá trị dự phòng.

   MOBILE FIRST: CSS gốc = mobile = giống app iOS. @media (min-width: 769px) = desktop.
   KHÔNG ĐỤNG: header, footer, side menu, drawer, auth modal, marquee, age gate.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. 🔴 BOX-SIZING. ĐỌC TRƯỚC KHI THÊM BẤT KỲ KHỐI NÀO VÀO FILE NÀY.

   css/club.css, css/ws.css, css/art.css KHÔNG có luật box-sizing toàn cục.
   (Chỉ css/index.css mới có `*, *::before, *::after { box-sizing: border-box }`,
   nên trang chủ không dính lỗi này còn 3 nhánh thì dính.)

   Mặc định của CSS là `content-box`: width KHÔNG tính padding và border.
   Nên `.event-card { width: 100%; padding: 12px; border: 1px }` có bề ngang thật
   là 100% + 24px + 2px = TRÀN RA NGOÀI 26px. Hậu quả:
     desktop lưới 2 cột -> mỗi thẻ lấn 26px sang thẻ bên cạnh -> ĐÈ LÊN NHAU
     mobile              -> thẻ rộng hơn màn hình -> tràn ngang cả trang,
                            đẩy luôn nút hamburger ra khỏi màn hình

   Ép `border-box` cho MỌI khối mới của file này. Không đụng vào luật cũ.
   Thêm khối mới nào có width + padding thì phải nằm trong danh sách dưới đây.
   --------------------------------------------------------------------------- */
.dilo-branch-nav, .dilo-branch-nav *,
.hero-section, .hero-overlay, .hero-overlay *,
.cat-squares, .cat-sq, .cat-sq *,
.filter-section, .filter-section *,
.events-container, .event-card, .event-card * {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   1. Header là position:fixed. Body phải chừa chỗ, nếu không mọi thứ chui
      xuống dưới header. Trước đây hero cao 100vh nên không lộ ra lỗi này.
   --------------------------------------------------------------------------- */
body { padding-top: var(--b-header-h, 74px); }
/* Chốt chặn cuối: không bao giờ để thanh cuộn ngang ngoài ý muốn (ràng buộc bản
   mobile, vì sau này bọc thành app Android). Dùng `clip` chứ KHÔNG dùng `hidden`:
   `hidden` biến html thành khung cuộn và có thể làm hỏng position: fixed/sticky,
   `clip` chỉ cắt, không tạo khung cuộn. Trình duyệt cũ bỏ qua thì body vẫn còn
   overflow-x: hidden sẵn trong css nhánh, nên vẫn an toàn. */
html { overflow-x: clip; }

/* ---------------------------------------------------------------------------
   2. Thanh chọn nhánh (DiloTopNav.swift). Nằm ngay dưới header.
   --------------------------------------------------------------------------- */
.dilo-branch-nav {
    --dnav-accent: var(--b-nav-accent, #ff4a11);
    background: transparent;
    border-bottom-color: var(--b-border, rgba(127, 127, 127, .22));
}
.dilo-branch-nav a, .dilo-branch-nav button { color: var(--b-muted, rgba(127, 127, 127, .9)); }

/* ---------------------------------------------------------------------------
   3. Title block (BranchView.swift:238-270).
      iOS KHÔNG có video nền, KHÔNG có nút, KHÔNG có hero-stats.
      Chỉ đổi CHIỀU CAO và KHOẢNG CÁCH. Màu, font, hiệu ứng chữ: giữ nguyên bản gốc.
      Giữ .hero-overlay là flex-column-center để phần tử có max-width (subtitle
      của art rộng 580px) vẫn được căn giữa, không lệch trái.
   --------------------------------------------------------------------------- */
.hero-section {
    height: auto; min-height: 0; background: transparent;
    padding: 34px 20px 0; margin: 0 0 34px;   /* 34px: tách khỏi marquee bên dưới */
    overflow: visible;
}
.hero-section::before, .hero-section::after { content: none; }   /* bỏ vignette + film grain của video cũ */
.hero-overlay {
    position: static; inset: auto; background: transparent; z-index: auto;
    padding: 0; min-height: 0;
    /* giữ flex-column-center của bản gốc: căn giữa cả khối lẫn phần tử max-width */
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
/* Tiêu đề: 1 HÀNG DUY NHẤT trên desktop (Chủ dự án chốt 12/07/2026).
   Bản gốc ĐÃ làm đúng việc này rồi, ở luật media min-width 601px trong css nhánh
   (nowrap, và ẩn thẻ xuống dòng). Ở đây KHÔNG đụng vào, để bản gốc chạy. */
.hero-subtitle { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   4. Ba ô vuông danh mục (categorySquares, BranchView.swift:277-325)
      iOS: nền = palette.surface, viền = palette.border,
           đang chọn = viền accent 1.5px + icon accent.
      Web dùng nền ĐẶC (không trong suốt) cho dễ nhìn, màu theo từng nhánh.
   --------------------------------------------------------------------------- */
.cat-squares {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    max-width: 1200px; margin: 30px auto 0; padding: 0 20px;
}
.cat-sq {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px;
    min-height: 44px; padding: 18px 8px; border-radius: 14px; cursor: pointer;
    background: var(--b-sq-bg, #141414);
    border: 1px solid var(--b-sq-border, rgba(255, 255, 255, .16));
    color: var(--b-sq-text, #ffffff);
    box-shadow: var(--b-sq-shadow, none);
    font-family: inherit;
    transition: border-color .18s, background .18s, transform .18s;
}
.cat-sq:hover { border-color: var(--b-accent, #d14828); transform: translateY(-2px); }
.cat-sq .cat-ic { width: 24px; height: 24px; color: var(--b-sq-text, #ffffff); transition: color .18s; flex: none; }
.cat-sq .cat-lb {
    font-family: 'Be Vietnam Pro', sans-serif; font-weight: 500; font-size: 17px; line-height: 1.1;
    color: var(--b-sq-text, #ffffff);
}
.cat-sq .cat-sub { font-size: 10.5px; line-height: 1.3; text-align: center; color: var(--b-sq-sub, rgba(255, 255, 255, .6)); }
.cat-sq.active {
    border-color: var(--b-accent, #d14828); border-width: 1.5px;
    background: var(--b-sq-bg, #141414);
}
.cat-sq.active .cat-ic, .cat-sq.active .cat-lb { color: var(--b-accent, #d14828); }

/* ---------------------------------------------------------------------------
   5. Tiêu đề danh sách. CHỈ đổi bố cục (bỏ flex space-between của 2 nút cũ).
      Font 'League Gothic' + màu chủ đạo từng nhánh: GIỮ NGUYÊN bản gốc.
   --------------------------------------------------------------------------- */
.filter-section {
    display: block; max-width: 1200px; margin: 34px auto 0; padding: 0 20px;
}
.hashtag-filter { margin-top: 14px; }

/* ---------------------------------------------------------------------------
   6. Thẻ sự kiện: BỐ CỤC NGANG (eventCard, BranchView.swift:389-433)
      ảnh 3:4 bên trái | tiêu đề, ngày, shop | giá canh phải + hashtag đáy thẻ
      CHỈ đổi kích thước và vị trí. Màu chữ, font, hiệu ứng: từ css nhánh.
   --------------------------------------------------------------------------- */
.events-container {
    display: grid; grid-template-columns: 1fr; gap: 14px;
    max-width: 1200px; margin: 0 auto; padding: 18px 20px 24px;
    justify-content: stretch; justify-items: stretch;
}
.event-card {
    display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: stretch;
    width: 100%; max-width: none; margin: 0; padding: 12px;
    background: var(--b-card-bg, rgba(20, 20, 20, .55)); background-image: none;
    border: 1px solid var(--b-card-border, rgba(255, 255, 255, .18)); border-radius: 14px;
    box-shadow: none; overflow: hidden; position: relative;
    transition: border-color .18s;
}
.event-card:hover { border-color: var(--b-accent, #d14828); box-shadow: none; }

.event-image {
    width: 92px; aspect-ratio: 3 / 4; height: auto; align-self: start;
    border-radius: 12px; border: 1px solid var(--b-card-border, rgba(255, 255, 255, .18));
    overflow: hidden; position: relative; background: rgba(127, 127, 127, .12);
}
.event-image img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* min-width:0 là thứ THỰC SỰ chặn cột nội dung phình to hơn ô lưới của nó
   (thiếu nó là thẻ đè sang thẻ bên cạnh trên desktop).
   KHÔNG đặt overflow:hidden ở đây: nó cắt cụt vệt sáng neon của giá vé bên club.
   Chặn tràn đã lo ở từng phần tử con rồi (tiêu đề xuống dòng, subtitle ellipsis,
   hashtag xuống dòng), và .event-card vẫn còn overflow:hidden làm chốt cuối. */
.event-content {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    padding: 0; min-width: 0; max-width: 100%; text-align: left;
    /* font-family: KHÔNG đặt. Bản gốc là 'League Gothic', giữ nguyên. */
}
/* chỉ thu nhỏ (bản gốc 44px, quá to cho thẻ ngang). Màu + gạch chân ws: giữ.
   overflow-wrap: chữ dài không dấu cách (tên sự kiện tiếng Anh) phải xuống dòng,
   nếu không nó sẽ đội thẻ rộng ra và tràn khỏi màn hình trên mobile. */
.event-title {
    font-size: 24px; line-height: 1.02; margin: 0 0 2px;
    display: block; max-width: 100%; white-space: normal;
    overflow-wrap: anywhere; word-break: break-word;
    align-self: flex-start; width: fit-content;
}
/* ngày + chip đếm ngược nằm SÁT NHAU, không văng ra hai đầu thẻ */
.date-row {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 8px; flex-wrap: wrap; width: 100%; margin: 0;
}
.event-date { font-size: 13px; flex: 0 1 auto; min-width: 0; }
.event-date .d-dow, .event-date .d-date { display: inline; }
.event-date .d-dow::after { content: ' '; }
.countdown-chip { font-size: 11px; padding: 3px 10px; flex: none; }
/* bỏ gạch chân + khoảng đệm to của bản cũ, giữ màu */
.event-subtitle {
    font-size: 13px; margin: 0; padding: 0; border-bottom: 0; width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* giá canh PHẢI (iOS), đẩy xuống đáy thẻ. Giữ màu + hiệu ứng phát sáng của club.
   min-width:0 để chữ dài không bẻ gãy hàng và đẩy giá ra ngoài thẻ. */
.price-row {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 10px;
    flex-wrap: wrap;                 /* giá quá dài thì xuống dòng, không đội thẻ rộng ra */
    width: 100%; min-width: 0; margin-top: auto; padding-top: 6px;
}
.event-price { font-size: 20px; margin: 0; order: 2; white-space: nowrap; flex: 0 0 auto; }
.event-tickets {
    font-size: 11.5px; order: 1; white-space: nowrap;
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}

/* hashtag: một hàng CUỘN NGANG ở đáy thẻ (tagChips trên iOS).
   Cuộn được bằng chuột: giữ và kéo, hoặc rê chuột tới rồi lăn con lăn.
   Xem khối "CUỘN NGANG BẰNG CHUỘT" trong js/dilo-common.js.

   🔴 justify-content: flex-start LÀ BẮT BUỘC, KHÔNG ĐƯỢC BỎ.
      css/club.css:79, ws.css:87, art.css:82 đều có `.tags-group { justify-content: center }`
      (từ hồi chip còn xuống dòng), và luật `display:grid` phía sau KHÔNG reset nó.
      Flexbox mà bị tràn trong lúc justify-content là center thì phần thừa bị đẩy
      ra CẢ HAI BÊN, và phần bên TRÁI không thể cuộn tới được: chip đầu tiên bị
      cắt cụt vĩnh viễn ("g 1" thay vì "#Mua 1 tặng 1"). Đúng lỗi đã gặp.
      Ép flex-start thì mọi thứ thừa đổ về bên PHẢI, cuộn sang phải là thấy hết. */
.tags-group {
    display: flex; grid-template-columns: none; flex-wrap: nowrap; gap: 6px;
    justify-content: flex-start;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;   /* cuộn hết hàng chip thì đừng kéo luôn cả trang */
    cursor: grab;
    width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 5px 0 0;
}
.tags-group::-webkit-scrollbar { display: none; }
.tags-group.dragging { cursor: grabbing; }
.tag {
    flex: 0 0 auto; grid-column: auto; display: inline-flex; align-items: center;
    border-radius: 999px; padding: 4px 11px; font-size: 11.5px;
    white-space: nowrap; overflow: visible; text-overflow: clip;
    min-height: 24px; text-align: center; cursor: pointer;
}
.tag.solo { grid-column: auto; }

/* Trạng thái rỗng (EmptyEventsView.swift). Màu #888 giữ như bản gốc. */
.events-empty { grid-column: 1 / -1; text-align: center; font-size: 15px; padding: 60px 16px; }

/* ============================== DESKTOP ================================== */
@media (min-width: 769px) {
    .hero-section { padding: 48px 24px 0; margin-bottom: 42px; }

    .cat-squares { gap: 16px; padding: 0 24px; margin-top: 40px; }
    .cat-sq { padding: 22px 12px; }
    .cat-sq .cat-ic { width: 27px; height: 27px; }
    .cat-sq .cat-lb { font-size: 19px; }
    .cat-sq .cat-sub { font-size: 11.5px; }

    .filter-section { padding: 0 24px; margin-top: 44px; }

    /* 2 cột thẻ ngang: màn rộng không để một cột thẻ dài lê thê */
    .events-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 20px 24px 30px; }
    .event-card { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 14px; }
    .event-image { width: 112px; }
    .event-title { font-size: 27px; }
    .event-price { font-size: 23px; }
}