/*
 * cms-blocks.css — giao diện cho KHO BLOCK DÙNG CHUNG (resources/views/blocks/).
 *
 * CSS THUẦN viết tay, KHÔNG qua Tailwind. Bắt buộc phải vậy: mỗi theme build CSS
 * riêng bằng Tailwind CLI với `@source "../ ** /*.blade.php"` — chỉ quét thư mục
 * theme đó. Blade của kho nằm ở resources/views/ nên không theme nào quét tới,
 * mọi class utility viết trong đó sẽ bị purge sạch. Vì thế kho chỉ dùng class
 * `cms-b-*` khai ở file này, nạp thẳng từ public/ (không có bước build).
 *
 * Nạp SAU theme('css/app.css') trong layout của từng theme để thắng utility
 * Tailwind ở cùng specificity — giống hệt cms-sections.css.
 *
 * MÀU: ăn theo token của theme qua chuỗi fallback biến CSS. Tailwind v4 phát
 * token `@theme` ra :root, nhưng mỗi theme đặt tên một kiểu (thudocollege
 * --color-primary-600, saokhue --color-primary-500/700, morningstarcenter
 * --color-primary). Theme mới chỉ cần khai một trong các tên đó, hoặc ghi đè
 * thẳng --cms-b-accent trong css/app.css của mình.
 *
 * Tiền tố `cms-b-` để không đụng `cms-` của SectionStyle (cms-sections.css).
 */

:root {
    --cms-b-accent: var(--color-primary-600, var(--color-primary-500, var(--color-primary, #2563eb)));
    --cms-b-accent-soft: color-mix(in srgb, var(--cms-b-accent) 10%, #ffffff);
    --cms-b-accent-ink: #ffffff;
    --cms-b-ink: #0f172a;
    --cms-b-ink-2: #334155;
    --cms-b-muted: #64748b;
    --cms-b-surface: #ffffff;
    --cms-b-canvas: #f8fafc;
    --cms-b-line: #e2e8f0;
    --cms-b-radius: 12px;
    --cms-b-gap: 24px;
    --cms-b-py: 56px;
    --cms-b-max-w: 1200px;
}

/* ---------------------------------------------------------------- khung ---- */

.cms-b {
    padding-block: var(--cms-b-py);
    color: var(--cms-b-ink-2);
    font-size: 16px;
    line-height: 1.65;
}

.cms-b--muted {
    background: var(--cms-b-canvas);
}

.cms-b__inner {
    max-width: var(--cms-b-max-w);
    margin-inline: auto;
    padding-inline: 16px;
}

@media (min-width: 640px) {
    .cms-b__inner { padding-inline: 24px; }
}

/* --------------------------------------------------------------- tiêu đề ---- */

.cms-b__head {
    margin-bottom: 32px;
    max-width: 720px;
}

.cms-b__head--center {
    margin-inline: auto;
    text-align: center;
}

.cms-b__eyebrow {
    display: inline-block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cms-b-accent);
}

.cms-b__heading {
    margin: 0;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--cms-b-ink);
}

@media (min-width: 768px) {
    .cms-b__heading { font-size: 34px; }
}

.cms-b__subheading {
    margin: 12px 0 0;
    color: var(--cms-b-muted);
}

/* ----------------------------------------------------------------- lưới ---- */

.cms-b__grid {
    display: grid;
    gap: var(--cms-b-gap);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .cms-b__grid--2, .cms-b__grid--3, .cms-b__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .cms-b__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cms-b__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ thẻ ---- */

.cms-b__card {
    display: flex;
    flex-direction: column;
    background: var(--cms-b-surface);
    border: 1px solid var(--cms-b-line);
    border-radius: var(--cms-b-radius);
    overflow: hidden;
    height: 100%;
}

.cms-b__card-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--cms-b-canvas);
}

.cms-b__card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    flex: 1;
}

.cms-b__card-icon {
    font-size: 30px;
    line-height: 1;
}

.cms-b__card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--cms-b-ink);
}

.cms-b__card-title a { color: inherit; text-decoration: none; }
.cms-b__card-title a:hover { color: var(--cms-b-accent); }

.cms-b__card-text {
    margin: 0;
    color: var(--cms-b-muted);
    font-size: 15px;
}

.cms-b__card-meta {
    margin: 0;
    font-size: 13px;
    color: var(--cms-b-muted);
}

.cms-b__card-foot {
    margin-top: auto;
    padding-top: 12px;
}

.cms-b__bullets {
    margin: 4px 0 0;
    padding-left: 18px;
    color: var(--cms-b-muted);
    font-size: 15px;
}

.cms-b__bullets li { margin-bottom: 4px; }

/* ------------------------------------------------------------------ nút ---- */

.cms-b__btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--cms-b-accent);
    color: var(--cms-b-accent-ink);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid transparent;
}

.cms-b__btn:hover { filter: brightness(.93); text-decoration: none; }

.cms-b__btn--ghost {
    background: transparent;
    color: var(--cms-b-accent);
    border-color: var(--cms-b-accent);
}

.cms-b__link {
    color: var(--cms-b-accent);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}

.cms-b__link:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- badge ---- */

.cms-b__badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--cms-b-accent-soft);
    color: var(--cms-b-accent);
    font-size: 13px;
    font-weight: 600;
}

/* ------------------------------------------------------------ văn bản dài ---- */

.cms-b__prose { color: var(--cms-b-ink-2); }
.cms-b__prose > :first-child { margin-top: 0; }
.cms-b__prose > :last-child { margin-bottom: 0; }
.cms-b__prose h2, .cms-b__prose h3, .cms-b__prose h4 { color: var(--cms-b-ink); line-height: 1.3; }
.cms-b__prose a { color: var(--cms-b-accent); }
.cms-b__prose img { max-width: 100%; height: auto; border-radius: var(--cms-b-radius); }
.cms-b__prose ul, .cms-b__prose ol { padding-left: 22px; }
.cms-b__prose table { width: 100%; border-collapse: collapse; }
.cms-b__prose td, .cms-b__prose th { border: 1px solid var(--cms-b-line); padding: 8px 12px; }

/* ----------------------------------------------------------------- bảng ---- */

.cms-b__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--cms-b-line);
    border-radius: var(--cms-b-radius);
    background: var(--cms-b-surface);
}

.cms-b__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    min-width: 560px;
}

.cms-b__table th,
.cms-b__table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--cms-b-line);
}

.cms-b__table th {
    background: var(--cms-b-canvas);
    color: var(--cms-b-ink);
    font-weight: 600;
    white-space: nowrap;
}

.cms-b__table tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------ text + ảnh ---- */

.cms-b__split {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 1024px) {
    .cms-b__split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
}

.cms-b__figure { margin: 0; }

.cms-b__figure img {
    width: 100%;
    border-radius: var(--cms-b-radius);
    display: block;
}

.cms-b__figure figcaption {
    margin-top: 8px;
    font-size: 14px;
    color: var(--cms-b-muted);
    text-align: center;
}

/* ------------------------------------------------------------------ hero ---- */

.cms-b__hero {
    position: relative;
    background: var(--cms-b-ink);
    color: #fff;
    overflow: hidden;
}

.cms-b__hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .45;
}

.cms-b__hero-inner {
    position: relative;
    max-width: var(--cms-b-max-w);
    margin-inline: auto;
    padding: 72px 16px;
}

@media (min-width: 768px) {
    .cms-b__hero-inner { padding: 104px 24px; }
}

.cms-b__hero-title {
    margin: 12px 0 0;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    max-width: 720px;
}

@media (min-width: 768px) {
    .cms-b__hero-title { font-size: 44px; }
}

.cms-b__hero-text {
    margin: 16px 0 0;
    max-width: 640px;
    color: rgba(255, 255, 255, .85);
}

.cms-b__hero .cms-b__badge {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* ------------------------------------------------------------------- CTA ---- */

.cms-b__cta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
    padding: 36px 24px;
    border-radius: var(--cms-b-radius);
    background: var(--cms-b-accent);
    color: var(--cms-b-accent-ink);
}

.cms-b__cta p { margin: 0; font-size: 20px; font-weight: 600; }

.cms-b__cta .cms-b__btn {
    background: var(--cms-b-accent-ink);
    color: var(--cms-b-accent);
}

/* -------------------------------------------------------------- con số ---- */

.cms-b__stat {
    text-align: center;
    padding: 24px 16px;
    border-radius: var(--cms-b-radius);
    background: var(--cms-b-surface);
    border: 1px solid var(--cms-b-line);
}

.cms-b__stat-number {
    display: block;
    font-size: 34px;
    font-weight: 700;
    color: var(--cms-b-accent);
    line-height: 1.1;
}

.cms-b__stat-label {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    color: var(--cms-b-muted);
}

/* ------------------------------------------------------------- quy trình ---- */

.cms-b__steps { counter-reset: cms-b-step; list-style: none; margin: 0; padding: 0; }

.cms-b__step {
    counter-increment: cms-b-step;
    position: relative;
    padding: 0 0 24px 56px;
    border-left: 2px solid var(--cms-b-line);
    margin-left: 18px;
}

.cms-b__step:last-child { border-left-color: transparent; padding-bottom: 0; }

.cms-b__step::before {
    content: counter(cms-b-step);
    position: absolute;
    left: -19px;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--cms-b-accent);
    color: var(--cms-b-accent-ink);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------------------------------------------------- FAQ ---- */

.cms-b__faq {
    border: 1px solid var(--cms-b-line);
    border-radius: var(--cms-b-radius);
    background: var(--cms-b-surface);
    padding: 16px 20px;
    margin-bottom: 12px;
}

.cms-b__faq > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--cms-b-ink);
    list-style: none;
}

.cms-b__faq > summary::-webkit-details-marker { display: none; }
.cms-b__faq > summary::after { content: "+"; float: right; color: var(--cms-b-accent); font-size: 20px; line-height: 1; }
.cms-b__faq[open] > summary::after { content: "\2212"; }
.cms-b__faq-answer { margin: 12px 0 0; color: var(--cms-b-muted); }

/* --------------------------------------------------------------- đối tác ---- */

.cms-b__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.cms-b__logos img {
    max-height: 56px;
    width: auto;
    filter: grayscale(1);
    opacity: .75;
}

.cms-b__logos a:hover img { filter: none; opacity: 1; }

/* ------------------------------------------------------------- thư viện ---- */

.cms-b__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--cms-b-radius);
    background: var(--cms-b-canvas);
}

/* --------------------------------------------------------------- bản đồ ---- */

.cms-b__map {
    border: 0;
    width: 100%;
    min-height: 320px;
    border-radius: var(--cms-b-radius);
}

.cms-b__dl { margin: 0; }
.cms-b__dl dt { font-weight: 600; color: var(--cms-b-ink); margin-top: 12px; }
.cms-b__dl dd { margin: 2px 0 0; color: var(--cms-b-muted); }

/* ---------------------------------------------------------- trạng thái ---- */

.cms-b__empty {
    padding: 28px;
    border: 1px dashed var(--cms-b-line);
    border-radius: var(--cms-b-radius);
    text-align: center;
    color: var(--cms-b-muted);
    font-size: 15px;
}