/**
 * DS Elements — design tokens
 * Đồng Phục Vina · sinh từ tokens.json (2026-08-05)
 *
 * Đây là chỗ duy nhất chứa giá trị thiết kế. CSS của widget chỉ được dùng
 * var(--ds-*), không hardcode màu hay số px. Đổi thương hiệu = sửa file này.
 *
 * Không khai báo font-family: Be Vietnam Pro được set ở Elementor
 * Site Settings → Global Fonts, widget kế thừa xuống.
 */

:root {
	/* --- Màu ------------------------------------------------------------ */
	--ds-color-brand: #001D49;         /* navy: tiêu đề section, tên người */
	--ds-color-brand-light: #0040A8;   /* xanh: eyebrow, link, nút */
	--ds-color-heading: #1D1D1D;       /* tiêu đề nội dung, tên bài viết */
	--ds-color-body: #4A4A52;          /* chữ thân bài */
	--ds-color-muted: #808090;         /* metadata, ngày tháng, chức danh */
	--ds-color-surface: #F5F5F7;       /* nền section xám nhạt */
	--ds-color-border: #E0E0E0;
	--ds-color-white: #FFFFFF;         /* nền thẻ */

	/* Xanh nhạt: đường nối, nét phân cách trên nền sáng — nhạt hơn brand-light
	   nhưng vẫn ám xanh, không dùng --ds-color-border xám cho các nét này. */
	--ds-color-line-soft: #B9CDEA;

	/* Vàng đồng: nút chính và chữ nhấn trên nền navy.
	   ĐO TỪ ẢNH CHỤP MÀN HÌNH ĐÃ NÉN — cần đối chiếu brand kit rồi sửa lại.
	   Không có trong tokens.json, mọi chỗ dùng vàng đều trỏ về đây. */
	--ds-color-accent: #B8935A;
	--ds-color-accent-dark: #9C7B45;   /* trạng thái hover của nút vàng */

	/* Chữ phụ trên nền navy — trắng ngà thay vì trắng gắt. */
	--ds-color-on-dark-muted: #C3CEDF;

	/* Cam hổ phách: sao đánh giá và tia chớp "báo giá nhanh". Sáng hơn hẳn
	   --ds-color-accent (vàng đồng của nút) nên không dùng chung được — sao màu
	   đồng trông như sao đã tắt.
	   ĐO TỪ ẢNH THIẾT KẾ ĐÃ NÉN — cần đối chiếu brand kit như màu accent. */
	--ds-color-amber: #F0A02C;

	/* Nền vòng tròn bọc icon. Hai chặng của một gradient, để riêng vì widget
	   nào cũng có thể cần cái bọt xanh này. */
	--ds-color-bubble-from: #F4F8FE;
	--ds-color-bubble-to: #E4ECF9;

	/* Đổ bóng không có trong tokens.json — dẫn xuất từ màu brand để bóng
	   ám navy thay vì xám chết. Sửa ở đây nếu design có giá trị riêng. */
	--ds-shadow-card: 0 2px 8px rgba(0, 29, 73, .06);
	--ds-shadow-raised: 0 4px 16px rgba(0, 29, 73, .10);

	/* --- Cỡ chữ (desktop) ----------------------------------------------- */
	--ds-fs-h1: 44px;
	--ds-fs-h2: 32px;
	--ds-fs-h3: 24px;
	--ds-fs-h4: 18px;
	--ds-fs-body: 15px;
	--ds-fs-small: 13px;
	--ds-fs-button: 14px;
	--ds-fs-topbar: 12px;
	--ds-fs-nav: 14px;
	--ds-fs-footer-heading: 15px;
	--ds-fs-footer-link: 14px;

	/* --- Độ đậm --------------------------------------------------------- */
	--ds-fw-regular: 400;
	--ds-fw-semibold: 600;
	--ds-fw-bold: 700;
	--ds-fw-black: 800;

	/* --- Line-height ----------------------------------------------------- */
	/* Tiếng Việt có dấu chồng cao: 1.25 là sàn tuyệt đối cho chữ in hoa,
	   thấp hơn là dấu chạm dòng trên. */
	--ds-lh-h1: 1.25;
	--ds-lh-h2: 1.3;
	--ds-lh-h3: 1.35;
	--ds-lh-h4: 1.4;
	--ds-lh-body: 1.7;
	--ds-lh-small: 1.6;
	--ds-lh-button: 1.2;
	--ds-lh-tight: 1.3;
	--ds-lh-base: 1.6;

	/* --- Letter-spacing -------------------------------------------------- */
	--ds-ls-button: .5px;
	--ds-ls-nav: .3px;
	--ds-ls-eyebrow: 1.2px;

	/* --- Khoảng cách (bậc = số × 4px) ------------------------------------ */
	--ds-space-1: 4px;
	--ds-space-2: 8px;
	--ds-space-3: 12px;
	--ds-space-4: 16px;
	--ds-space-6: 24px;
	--ds-space-8: 32px;
	--ds-space-12: 48px;
	--ds-space-16: 64px;
	--ds-space-24: 96px;
	--ds-space-30: 120px;

	/* --- Bo góc --------------------------------------------------------- */
	--ds-radius-sm: 4px;
	--ds-radius-md: 8px;
	--ds-radius-lg: 24px;
	--ds-radius-pill: 999px;

	/* --- Layout --------------------------------------------------------- */
	--ds-max-width: 1200px;
	--ds-gutter: 40px;
	--ds-section-y: 64px;

	/* --- Chuyển động ---------------------------------------------------- */
	--ds-transition: 180ms ease;
}

/* --- Tablet (breakpoint mặc định của Elementor) -------------------------- */

@media (max-width: 1024px) {
	:root {
		--ds-fs-h1: 36px;
		--ds-fs-h2: 28px;
		--ds-fs-h3: 22px;
		--ds-fs-h4: 17px;
		--ds-fs-footer-heading: 14px;

		--ds-gutter: 24px;
		--ds-section-y: 48px;
	}
}

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--ds-fs-h1: 28px;
		--ds-fs-h2: 24px;
		--ds-fs-h3: 20px;
		--ds-fs-h4: 16px;
		--ds-fs-body: 14px;
		--ds-fs-small: 12px;
		--ds-fs-button: 13px;
		--ds-fs-topbar: 11px;
		--ds-fs-footer-heading: 13px;
		--ds-fs-footer-link: 13px;

		--ds-gutter: 16px;
		--ds-section-y: 32px;
	}
}

/* --- Vô hiệu hoá nền hover của reset.css bên thứ ba ---------------------- */

/* Một file reset.css (ver 3.4.9) tô nền hồng #cc3366 cho MỌI
   [type="button"]:hover và :focus trên toàn site. Nút trong widget DS tự lo
   nền/viền, hover chỉ đổi viền hoặc màu chữ — nếu để nó thắng thì mũi tên
   carousel, ô màu, thumbnail, nút đọc thêm… loè nền hồng khi rê chuột.
   Mọi nút DS đều nền trong suốt hoặc bị ảnh/chấm màu phủ kín, nên trả nền về
   trong suốt là đúng cho tất cả. Chỉ bám nút CÓ class ds-* (không bám mọi
   button trong widget DS) để KHÔNG đụng nút submit của Elementor Pro Form nằm
   trong ds-cta-form / ds-sidebar-form. Vẫn hơn specificity [type=button]:hover
   (button + [class*] + :hover) mà không cần !important. */
button[class*="ds-"]:hover,
button[class*="ds-"]:focus {
	background-color: transparent;
}

/* Container gắn class ds-hide-empty tự ẩn khi không còn widget nào bên trong.
   Widget DS không có gì để in (vd ds-term-cards ở ngành không có mô hình con)
   thì Elementor bỏ hẳn widget, nhưng container vẫn in kèm padding — thành một
   khoảng trống 64px giữa trang. Chỉ áp cho container có class, không đụng
   container rỗng cố ý ở chỗ khác. */
.e-con.ds-hide-empty:not(:has(.elementor-widget)) {
	display: none;
}

/* Cột gắn ds-grow giãn ra lấp chỗ cột bên cạnh vừa bị ds-hide-empty ẩn đi.
   Khi đủ cột thì tổng bề rộng đã 100%, flex-grow không có chỗ để giãn. */
.e-con.ds-grow {
	flex-grow: 1;
	/* Để widget bên trong biết cột đang rộng hay hẹp (xem material-cards.css). */
	container-type: inline-size;
}