/* ==========================================================================
   TẦNG 2 — LAYOUT
   CHỈ cấu trúc: bề rộng, khoảng cách, lưới. TUYỆT ĐỐI không trang trí
   (không màu chữ, không bo góc, không bóng) — những thứ đó ở tầng 3.
   ========================================================================== */

/* --- Section: đơn vị nhịp dọc của trang -------------------------------- */
.dst-section {
	--dst-section-padding-y: var(--section-y);
	padding-block: var(--dst-section-padding-y);
	position: relative;
}

/* Điểm tích hợp Astra: thắng nhịp mặc định của Gutenberg bằng cùng cấp đặc hiệu.
   HUỶ padding ngang Astra tự bơm cho mọi block cấp cao trong .entry-content
   (`.entry-content > .wp-block-group { padding-inline: var(--wp--custom--ast-*) }`
   = 24px/32px). Nếu không huỷ, section (24px) + container (--pad-x) tạo GUTTER ĐÔI
   và lệch trục với breadcrumb (render ngoài .entry-content). Sau khi về 0, gutter
   ngang CHỈ do `.dst-container` quản lý — một nguồn duy nhất. Đặc hiệu 0,2,0 hoà
   với rule Astra và thắng nhờ nạp sau. Không dùng !important. */
.entry-content > .dst-section,
.ast-narrow-container .entry-content > .dst-section {
	max-width: none;
	margin-inline: 0;
	padding-block: var(--dst-section-padding-y);
	padding-inline: 0;
}

/* Layout của mục lục thuộc tầng 2: component chỉ quản lý hình thức và tương tác. */
.dst-toc-bar-inner,
.dst-toc-inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

/* Astra narrow gioi han moi con truc tiep cua entry-content ve 750px.
   Thanh TOC la chrome toan chieu rong; container ben trong moi gioi han noi dung. */
.ast-narrow-container .entry-content > .dst-toc-bar {
	max-width: none;
	margin-inline: 0;
}

/* Điểm tích hợp Astra: `.dst-toc-bar` là block trực tiếp của entry-content.
   Astra áp `max-width: none` tiếp cho mọi con của block trực tiếp không phải
   `.wp-block-group`, nên `.dst-toc-bar-inner` bị mất hợp đồng container.
   Selector dưới đây phản ánh đúng DOM thực tế và chỉ khôi phục max-width tại
   biên tích hợp; không dùng !important, không đổi markup hoặc component khác. */
body.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .dst-toc-bar > .dst-toc-bar-inner {
	max-width: var(--container-max);
}

/* Astra bọc vùng nội dung trong `.site-content > .ast-container` với
   padding ngang 20px (layout mặc định). Trang dịch vụ dùng Full Width
   Stretched nên không có; các trang còn lại thì CÓ → tạo 2 chế độ gutter.
   Vô hiệu tại đây để `.dst-container` là NGUỒN GUTTER DUY NHẤT trên MỌI
   trang. Chỉ nhắm container NỘI DUNG (con trực tiếp .site-content), KHÔNG
   đụng `.ast-container` của header/footer. Container này không nền/không
   bóng nên bỏ padding là an toàn. Đặc hiệu 0,2,0, không !important. */
.site-content > .ast-container {
	max-width: 100%;
	/* Dùng ĐÚNG longhand vật lý (padding-left/right) trùng với Astra
	   (`.ast-container { padding-left/right: 20px }` trong main.min.css) — không
	   dùng `padding-inline` (logical) vì logical/physical không ghi đè nhau sạch.
	   Đặc hiệu 0,2,0 thắng 0,1,0 của Astra. */
	padding-left: 0;
	padding-right: 0;
}

.dst-section--sm {
	--dst-section-padding-y: var(--section-y-sm);
}

.dst-section--lg {
	--dst-section-padding-y: var(--section-y-lg);
}

/* Biến thể nền — chỉ đặt nền, phần chữ đảo màu xử lý ở tầng 3. */
.dst-section--white   { background-color: var(--c-white); }
.dst-section--surface { background-color: var(--c-surface); }
.dst-section--navy    { background-color: var(--c-navy); }

/* --- Container -------------------------------------------------------- */
.dst-container,
.dst-container-narrow {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

.dst-container        { max-width: var(--container-max); }
.dst-container-narrow { max-width: var(--container-narrow); }

/* --- Lưới cột --------------------------------------------------------- */
/* Mặc định mobile: 1 cột. Mở rộng dần bằng min-width. */
/*
   GHI CHU DO UU TIEN (quan trong):
   Gutenberg/Astra dat `body .is-layout-flex { display: flex }` (0,1,1).
   Mot class don `.dst-cols` (0,1,0) KHONG thang duoc. Vi vay moi rule doi
   `display` cua khoi wp-block-columns phai chain them class khoi
   (`.wp-block-columns.dst-cols` = 0,2,0). Khong dung !important.
*/
.dst-cols,
.wp-block-columns.dst-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
}

@media (min-width: 768px) {
	.dst-cols,
	.wp-block-columns.dst-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
	.dst-cols--2, .wp-block-columns.dst-cols--2 { grid-template-columns: repeat(2, 1fr); }
	.dst-cols--3, .wp-block-columns.dst-cols--3 { grid-template-columns: repeat(3, 1fr); }
	.dst-cols--4, .wp-block-columns.dst-cols--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Lưới đếm số / logo: giữ 2 cột ngay từ mobile (theo Design System 2.5). */
.dst-cols--compact {
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-4);
}

@media (min-width: 992px) {
	.dst-cols--compact { grid-template-columns: repeat(4, 1fr); }
}

/* --- Hero: 2 cột media + text ----------------------------------------- */
.dst-hero,
.wp-block-columns.dst-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
	align-items: center;
}

@media (min-width: 992px) {
	.dst-hero,
	.wp-block-columns.dst-hero { grid-template-columns: 55fr 45fr; }
}

/* --- Bài viết + cột phụ ----------------------------------------------- */
.dst-article-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
}

@media (min-width: 992px) {
	.dst-article-cols { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* --- Xếp chồng dọc có nhịp đều ---------------------------------------- */
.dst-stack > * + * {
	margin-top: var(--sp-4);
}

/* Cột con của Gutenberg nằm trong .dst-cols không cần flex-basis riêng. */
.dst-cols > .wp-block-column,
.dst-hero > .wp-block-column,
.dst-timeline > .wp-block-column,
.dst-related-grid > .wp-block-column {
	flex-basis: auto !important; /* ghi de inline style cua core Gutenberg */
	max-width: none;
	min-width: 0;
}

/* Moi o luoi/flex deu phai co duoc de khong day tran ngang.
   Thieu `min-width: 0` thi o luoi khong co duoc duoi kich thuoc noi dung
   (mac dinh min-width:auto) va se day tran ngang tren mobile. */
.dst-cols > *,
.dst-hero > *,
.dst-timeline > *,
.dst-article-cols > *,
.dst-trustbar > *,
.dst-toc > *,
.dst-related-grid > *,
.dst-quote-section > .dst-container > * {
	min-width: 0;
}

/*
   LUOI AN TOAN CHONG TRAN NGANG
   Astra dat off-canvas menu ngoai man hinh ben phai; no tao cuon ngang.
   Dung `overflow-x: clip` (KHONG phai `hidden`) vi `clip` khong tao
   scroll container nen `position: sticky` cua thanh muc luc van hoat dong.
*/
#page {
	overflow-x: clip;
}

/* --------------------------------------------------------------------------
   T05 — KNOWLEDGE ARTICLE TEMPLATE
   Điểm tích hợp Astra ở tầng layout, áp dụng theo body class của template.
   Chỉ mở khung ngoài; mọi nội dung vẫn do .dst-container giới hạn.
   Không Page ID, không 100vw, không margin âm, không !important.
   -------------------------------------------------------------------------- */
body.single-post.dst-template-article .site-content > .ast-container {
	max-width: none;
	padding-inline: 0;
	display: block;
}

body.single-post.dst-template-article #primary {
	width: 100%;
	margin: 0;
}

body.single-post.dst-template-article .site-main > article,
body.single-post.dst-template-article .entry-content {
	max-width: none;
	margin: 0;
	padding: 0;
}

body.single-post.dst-template-article .entry-header {
	max-width: var(--container-narrow);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

body.single-post.dst-template-article .dst-article-body {
	min-width: 0;
}