/* ============================================================
   trung-tam-detail.css — bản chi tiết theo tỉnh của trang Hệ thống trung tâm
   (hiện khi URL có ?province=<id>; xem assets/js/tinh-detail.js).

   Bố cục theo layout-detail.png:
     · Tiêu đề lớn "TRUNG TÂM TIẾNG ANH APOLLO TẠI <TỈNH>"
     · Hai cột: trái = bộ lọc + danh sách thẻ trung tâm (cuộn được)
                phải = bản đồ có marker của đúng tỉnh đang xem
     · Hai nút: ĐẶT HẸN TRUNG TÂM / GỬI CHỈ ĐƯỜNG QUA ZALO
     · Bên dưới dùng lại "10 sự thật" và CTA chat của bản tổng.

   Dùng tiền tố .ttd- riêng, KHÔNG mượn id của khối tổng
   (#search-form-container, #center-results-list, #home-map) — hai khối cùng
   nằm trong một file nên mượn id sẽ đá nhau: CSS gốc để sẵn display:none cho
   mấy id đó, và center-location-apollo2025.js cũng ghi đè nội dung của chúng.
   ============================================================ */

.ttd-hero {
    width: 100%;
    padding: 56px 0 72px;
    background-color: var(--page-bg, #FAF5EE);
}

.ttd-hero[hidden] {
    display: none;
}

/* ── Gói gọn trong một màn hình (desktop) ──────────────────────
   Header cao ~80px và là position:fixed nên phần nhìn thấy được của khối này
   là 100vh trừ header. Đặt chiều cao theo đó rồi cho .ttd-layout chiếm hết
   phần còn lại sau tiêu đề; bản đồ và danh sách tự co theo.

   Chỉ áp dụng từ 1024px trở lên: dưới mức đó hai cột xếp dọc, ép vào một màn
   hình sẽ khiến cả bản đồ lẫn danh sách bé đến mức khó dùng. */
@media (min-width: 1024px) {
    .ttd-hero {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 80px);
        padding: 28px 0 32px;
        box-sizing: border-box;
    }

    /* Cần bao nhiêu chiều cao để vừa MỘT màn hình mà vẫn thấy trọn 3 thẻ?
       Cộng theo số đo thật (thẻ cao 166px, khoảng cách 14px):
         header 80 + padding hero 28+32 + tiêu đề 50+20 + bộ lọc 56
         + khung 3 thẻ 534 + khoảng cách 24 + hai nút 63  = 887px
       Cửa sổ thấp hơn mức đó thì không thể vừa cả hai; lúc này ưu tiên
       "thấy trọn 3 thẻ" và bỏ khoá 100vh, chấp nhận cuộn trang một chút —
       tốt hơn là cắt ngang thẻ thứ 3 hoặc bóp bản đồ dẹp lép. */
    @media (max-height: 886px) {
        .ttd-hero {
            height: auto;
            padding-bottom: 40px;
        }
        .ttd-map-frame {
            min-height: 460px;
        }
    }

    .ttd-container {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
    }

    .ttd-title {
        margin-bottom: 20px;
        font-size: 34px;
    }

    .ttd-layout {
        flex: 1 1 auto;
        min-height: 0;       /* bắt buộc, nếu không grid con tràn khỏi khung */
    }

    /* Hai cột là flex container nằm trong ô grid. Mặc định ô grid có
       min-height:auto nên nó phình theo nội dung và PHỚT LỜ chiều cao đã khoá
       của .ttd-layout — đo thực tế: layout 535px nhưng cột cao 777px, đẩy hai
       nút CTA rơi khỏi màn hình. min-height:0 cho phép ô grid co đúng khung. */
    .ttd-left,
    .ttd-right {
        min-height: 0;
    }

    /* Danh sách ăn hết chiều cao còn lại của cột trái, nhưng không vượt quá
       3 thẻ — lấy giá trị nhỏ hơn trong hai mức.

       flex-shrink: 0 để khung KHÔNG bị bóp nhỏ hơn 3 thẻ khi cột trái thiếu
       chỗ: nếu cho co, trên laptop màn thấp thẻ thứ 3 sẽ bị cắt ngang, trong
       khi yêu cầu là luôn thấy trọn 3 vị trí. Phần thiếu chỗ (nếu có) được xử
       lý bằng @media (max-height) phía trên — bỏ khoá 100vh và cho cuộn trang. */
    .ttd-left .ttd-center-list {
        flex: 1 0 auto;
        min-height: 0;
    }
}

.ttd-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 50px;
}

.ttd-title {
    margin: 0 0 32px;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 40px;
    line-height: 1.25;
    color: #1C77C3;
    text-transform: uppercase;
}

/* ── Hai cột ───────────────────────────────────────────────── */
/* Cả khối (tiêu đề + bộ lọc + danh sách + bản đồ + 2 nút) gói trong MỘT màn
   hình: không phải cuộn trang mới thấy hai nút CTA, chỉ cuộn bên trong khung
   danh sách để xem thêm trung tâm.

   align-items: stretch (mặc định) để hai cột cao bằng nhau — đáy bản đồ
   thẳng hàng đáy danh sách. */
.ttd-layout {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 40px;
}

.ttd-left,
.ttd-right {
    min-width: 0;
}

.ttd-left {
    display: flex;
    flex-direction: column;
}

/* ── Bộ lọc ────────────────────────────────────────────────── */
.ttd-filter {
    margin-bottom: 20px;
}

.ttd-filter .two-btn-header-center-apollo2025 {
    margin-bottom: 12px;
}

.ttd-filter .select-group-apollo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.ttd-filter .select-custom-wrapper,
.ttd-filter .apollo-select,
.ttd-filter .btn-find-center-location {
    width: 100%;
}

/* ── Danh sách trung tâm ───────────────────────────────────── */
/* Khung danh sách cao đúng 3 thẻ, phần còn lại cuộn trong khung.
   Chiều cao thẻ không cố định (địa chỉ dài ngắn khác nhau) nên không đặt
   max-height bằng px — sẽ cắt ngang giữa thẻ thứ 3 ở tỉnh có địa chỉ dài.
   Thay vào đó đo bằng chính 3 thẻ đầu: grid-auto-rows + số hàng hiển thị.

   Cách làm: danh sách là grid với hàng tự động; đặt chiều cao khung bằng
   3 hàng + 2 khoảng cách, lấy từ biến --ttd-row do JS đo thẻ đầu tiên rồi
   ghi vào. Nếu JS chưa kịp đo (hoặc tắt JS) thì dùng giá trị dự phòng đủ
   rộng cho 3 thẻ hai dòng địa chỉ. */
.ttd-center-list {
    display: flex;
    flex-direction: column;
    gap: var(--ttd-gap, 14px);
    max-height: calc(var(--ttd-row, 186px) * 3 + var(--ttd-gap, 14px) * 2 + 8px);
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    /* Cuộn dừng gọn ở đầu mỗi thẻ thay vì lơ lửng giữa chừng */
    scroll-snap-type: y proximity;
    overscroll-behavior: contain;
}

.ttd-center-list > .ttd-center-card {
    scroll-snap-align: start;
}

.ttd-center-list::-webkit-scrollbar {
    width: 6px;
}

.ttd-center-list::-webkit-scrollbar-thumb {
    background-color: rgba(28, 119, 195, 0.3);
    border-radius: 3px;
}

.ttd-center-card {
    padding: 18px 20px 20px;
    background-color: #FFFFFF;
    border: 1px solid #E8E0D4;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.ttd-center-card:hover {
    border-color: #1C77C3;
    box-shadow: 0 4px 16px rgba(28, 119, 195, 0.12);
}

/* Thẻ chứa nút float phải tự bao lại, nếu không viền dưới cắt ngang nút */
.ttd-center-card::after {
    content: '';
    display: block;
    clear: both;
}

.ttd-center-name {
    margin: 0 0 6px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.3;
    color: #1B1B1B;
}

.ttd-center-address {
    margin: 0 0 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #5A5A5A;
}

.ttd-center-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #1C77C3;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #1C77C3;
    text-decoration: none;
}

.ttd-center-phone:hover {
    background-color: rgba(28, 119, 195, 0.06);
    color: #1C77C3;
}

.ttd-center-map {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    float: right;
    margin-top: 8px;
    padding: 9px 16px;
    background-color: #1C77C3;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    text-decoration: none;
}

.ttd-center-map:hover {
    background-color: #17669F;
    color: #FFFFFF;
}

.ttd-empty {
    padding: 28px 20px;
    background-color: #FFFFFF;
    border: 1px dashed #D9CFC0;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #5A5A5A;
    text-align: center;
    list-style: none;
}

/* ── Bản đồ ────────────────────────────────────────────────── */
/* Cột phải xếp dọc: bản đồ chiếm phần co giãn, hai nút bám đáy. Nhờ vậy
   đáy bản đồ + hai nút luôn thẳng hàng với đáy cột trái. */
.ttd-right {
    display: flex;
    flex-direction: column;
}

.ttd-map-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;          /* cho phép co lại trong flex, nếu không sẽ tràn */
    border-radius: 16px;
    overflow: hidden;
    background-color: #E9E3DA;
}

#ttd-map {
    width: 100%;
    height: 100%;
    min-height: 320px;
}

/* ── Hai nút hành động (nằm ngay dưới bản đồ, trong cột phải) ── */
.ttd-actions {
    display: flex;
    flex: 0 0 auto;        /* không co lại khi cột phải thiếu chỗ */
    justify-content: center;
    gap: 20px;
    margin-top: 24px;
}

.ttd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    min-width: 0;
    padding: 18px 28px;
    border-radius: 6px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
}

.ttd-btn--primary {
    background-color: #1C77C3;
    border: 2px solid #1C77C3;
    color: #FFFFFF;
}

.ttd-btn--primary:hover {
    background-color: #17669F;
    border-color: #17669F;
    color: #FFFFFF;
}

.ttd-btn--ghost {
    background-color: transparent;
    border: 2px solid #1C77C3;
    color: #1C77C3;
}

.ttd-btn--ghost:hover {
    background-color: rgba(28, 119, 195, 0.08);
    color: #1C77C3;
}

/* ── Máy tính bảng ─────────────────────────────────────────── */
@media (max-width: 1023px) {
    .ttd-hero {
        padding: 40px 0 56px;
    }
    .ttd-container {
        padding: 0 24px;
    }
    .ttd-title {
        margin-bottom: 24px;
        font-size: 30px;
    }
    .ttd-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    /* Danh sách lên trước, bản đồ xuống sau: màn hẹp thì bố mẹ đọc địa chỉ
       trước, xem bản đồ sau. */
    .ttd-left {
        order: 1;
    }
    .ttd-right {
        order: 2;
    }
    /* Vẫn giữ khung 3 thẻ + cuộn trên máy tính bảng để bản đồ không bị
       đẩy quá xa khỏi màn hình đầu. */
    .ttd-map-frame,
    #ttd-map {
        min-height: 420px;
    }
}

/* ── Di động ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ttd-hero {
        padding: 28px 0 40px;
    }
    .ttd-container {
        padding: 0 20px;
    }
    .ttd-title {
        font-size: 24px;
    }
    .ttd-center-name {
        font-size: 17px;
    }
    .ttd-center-map {
        float: none;
        width: 100%;
        justify-content: center;
        margin-top: 12px;
    }
    .ttd-actions {
        flex-direction: column;
        gap: 12px;
        margin-top: 28px;
    }
    .ttd-btn {
        width: 100%;
        min-width: 0;
        padding: 16px 20px;
        font-size: 15px;
    }
    .ttd-map-frame,
    #ttd-map {
        min-height: 320px;
    }
}