/* =========================================================================
   NgoiSaoXanh — layout: container, section, grid, stack, cluster, scroller
   Mobile-first. Breakpoint: sm 576 | md 768 | lg 1024 | xl 1280
   Biến thể responsive viết dạng tiền tố:  md:cols-2  lg:cols-4
   ========================================================================= */

/* ---- Container ---- */
.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container-narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container-wide   { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container-full   { max-width: none; }

/* ---- Section ---- */
.section { position: relative; padding-block:40px; }
.section-sm { padding-block: calc(var(--section-y) * .6); }
.section-flush-top { padding-top: 0; }
.section-flush-bottom { padding-bottom: 0; }

/* nền section */
.bg-0 { background-color: var(--bg-0); }
.bg-1 { background-color: var(--bg-1); }
.bg-2 { background-color: var(--bg-2); }
.bg-3 { background-color: var(--bg-3); }
.bg-surface { background-color: var(--surface); }
.bg-glow { background-image: var(--radial-glow); background-repeat: no-repeat; }
.border-top { border-top: 1px solid var(--border); }
.border-bottom { border-bottom: 1px solid var(--border); }

/* ---- Grid: số cột cố định ---- */
.grid { display: grid; gap: var(--gap, var(--sp-6)); }
.cols-1 { grid-template-columns: minmax(0, 1fr); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-full { grid-column: 1 / -1; }

/* Grid tự co giãn: đặt --min để đổi độ rộng tối thiểu của ô */
.grid-auto { display: grid; gap: var(--gap, var(--sp-6)); grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 260px), 100%), 1fr)); }

/* Chia 2 phần không đều (nội dung + ảnh / sidebar) */
.split { display: grid; gap: var(--gap, var(--sp-10)); grid-template-columns: minmax(0, 1fr); align-items: center; }

/* ---- Flex ---- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; min-width: 0; }
.shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.ml-auto { margin-left: auto; }
.mx-auto { margin-inline: auto; }

/* Stack: các phần tử xếp dọc cách đều (đặt --gap để đổi) */
.stack { display: flex; flex-direction: column; gap: var(--gap, var(--sp-4)); }
/* Cluster: hàng ngang tự xuống dòng (nút, tag, meta) */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--sp-3)); }

/* gap dùng chung cho grid/flex/stack/cluster */
.gap-0 { --gap: 0; gap: 0; }
.gap-1 { --gap: var(--sp-1); gap: var(--sp-1); }
.gap-2 { --gap: var(--sp-2); gap: var(--sp-2); }
.gap-3 { --gap: var(--sp-3); gap: var(--sp-3); }
.gap-4 { --gap: var(--sp-4); gap: var(--sp-4); }
.gap-6 { --gap: var(--sp-6); gap: var(--sp-6); }
.gap-8 { --gap: var(--sp-8); gap: var(--sp-8); }
.gap-10 { --gap: var(--sp-10); gap: var(--sp-10); }
.gap-12 { --gap: var(--sp-12); gap: var(--sp-12); }
.gap-16 { --gap: var(--sp-16); gap: var(--sp-16); }

/* ---- Scroller ngang (card trên mobile, tab danh mục) ---- */
.scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--item, 80%);
    gap: var(--gap, var(--sp-4));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: var(--sp-2);
    scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; }
/* scroller tràn mép màn hình, nội dung vẫn thẳng hàng container */
.scroller-bleed { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

/* ---- Hiển thị ---- */
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none !important; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { position: absolute; inset: 0; }
.sticky-top { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; min-height: 100svh; }
.z-1 { z-index: var(--z-base); }

/* Chỉ mobile / chỉ desktop (mốc 1024 = menu đổi sang drawer) */
@media (max-width: 1023.98px) { .desktop-only { display: none !important; } }
@media (min-width: 1024px)    { .mobile-only  { display: none !important; } }

/* ---- Responsive ---- */
@media (min-width: 576px) {
    .sm\:cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:flex-row { flex-direction: row; }
}
@media (min-width: 768px) {
    .md\:cols-1 { grid-template-columns: minmax(0, 1fr); }
    .md\:cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:span-2 { grid-column: span 2; }
    .md\:flex { display: flex; }
    .md\:grid { display: grid; }
    .md\:block { display: block; }
    .md\:hidden { display: none !important; }
    .md\:flex-row { flex-direction: row; }
    .md\:items-center { align-items: center; }
    .md\:justify-between { justify-content: space-between; }
    .md\:text-left { text-align: left; }
    /* scroller trở lại lưới trên màn lớn: thêm md:unscroll + cols-* */
    .md\:unscroll { grid-auto-flow: row; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; }
}
@media (min-width: 1024px) {
    .lg\:cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:span-2 { grid-column: span 2; }
    .lg\:flex { display: flex; }
    .lg\:grid { display: grid; }
    .lg\:block { display: block; }
    .lg\:hidden { display: none !important; }
    .lg\:flex-row { flex-direction: row; }
    .lg\:unscroll { grid-auto-flow: row; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; }
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .split-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .split-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .split-sidebar { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
    .split-aside { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}
@media (min-width: 1280px) {
    .xl\:cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xl\:cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .xl\:cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}