/*!
 * Đại Dương Glass — Design tokens "Architectural Glass" (2026–2027)
 * Nội dung: 1) Font tự host + fallback metric  2) CSS custom properties  3) Base áp token lên Flatsome.
 * Luồng DESIGN sở hữu. Tên biến cố định theo CONTRACTS 4.3 (giá trị có thể tinh chỉnh).
 * Audit: PERF-05, UI-U-09, UI-U-11, UI-U-12, UI-U-13, UI-U-14.
 */

/* =====================================================================
   1. FONTS — Inter 400/600 + Playfair Display 700, woff2 tĩnh từ Google Fonts CSS2 API
   (subset latin, latin-ext, vietnamese; giấy phép SIL OFL 1.1 — xem assets/fonts/OFL-*.txt).

   THỨ TỰ KHAI BÁO CÓ CHỦ Ý: khi unicode-range chồng nhau, trình duyệt xét @font-face
   khai báo SAU trước (CSS Fonts 4 §4.5). Google khai báo vietnamese → latin-ext → latin nên
   chữ ă/đ/ơ/ư (nằm trong cả latin-ext và vietnamese) sẽ kéo file latin-ext 35KB. Ở đây khai báo
   latin-ext → vietnamese → latin: trang tiếng Việt chỉ tải latin + vietnamese (~29KB/weight).
   ===================================================================== */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-400-vietnamese.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-600-vietnamese.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/playfair-display-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/playfair-display-700-vietnamese.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/playfair-display-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------
   Fallback metric (giảm CLS lúc swap font — PERF-05 VERIFY corrected).
   Số liệu TÍNH TỪ METRICS THẬT, không chép số mẫu:
   - Web font: đọc bảng head/hhea/OS/2/hmtx/cmap của chính 9 file woff2 ở trên
     (Inter: UPM 2048, hhea 1984/-494/0; Playfair Display Bold: UPM 1000, hhea 1082/-251/0).
   - Font hệ thống: Roboto-Regular/Bold.ttf (v2.137, UPM 2048), arial.ttf/arialbd.ttf (v7.06),
     georgiab.ttf (v5.59), timesbd.ttf, NotoSerif-Bold.ttf.
   - size-adjust = độ rộng trung bình (em) của web font / của fallback, trọng số theo tần suất
     ký tự thật của 492.584 ký tự nội dung bài + sản phẩm tiếng Việt trên site.
   - ascent/descent/line-gap-override = hhea của web font / UPM / size-adjust (cách của next/font, fontaine).
   Script: .tmp/design/fontmetrics.js → metrics.json.
   Android (đa số khách) có Roboto + Noto Serif; Windows/macOS/iOS có Arial, Georgia, Times.
   --------------------------------------------------------------------- */
@font-face {
	font-family: "Inter Fallback";
	font-weight: 400;
	src: local("Roboto"), local("Roboto-Regular");
	size-adjust: 107.16%;
	ascent-override: 90.40%;
	descent-override: 22.51%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Inter Fallback";
	font-weight: 500 700;
	src: local("Roboto Bold"), local("Roboto-Bold");
	size-adjust: 107.20%;
	ascent-override: 90.37%;
	descent-override: 22.50%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Inter Fallback Arial";
	font-weight: 400;
	src: local("Arial"), local("ArialMT");
	size-adjust: 105.26%;
	ascent-override: 92.03%;
	descent-override: 22.92%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Inter Fallback Arial";
	font-weight: 500 700;
	src: local("Arial Bold"), local("Arial-BoldMT");
	size-adjust: 99.67%;
	ascent-override: 97.19%;
	descent-override: 24.20%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Playfair Fallback";
	font-weight: 700;
	src: local("Georgia Bold"), local("Georgia-Bold");
	size-adjust: 90.01%;
	ascent-override: 120.21%;
	descent-override: 27.89%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Playfair Fallback Noto";
	font-weight: 700;
	src: local("Noto Serif Bold"), local("NotoSerif-Bold");
	size-adjust: 90.43%;
	ascent-override: 119.64%;
	descent-override: 27.75%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Playfair Fallback Times";
	font-weight: 700;
	src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT");
	size-adjust: 106.10%;
	ascent-override: 101.98%;
	descent-override: 23.66%;
	line-gap-override: 0%;
}

/* =====================================================================
   2. TOKENS
   Màu lấy từ logo (uploads/2019/10/Logo_Dai_Duong_Glass.png): navy #352D52, xanh #3666A3, đỏ #EC1F27.
   Mọi cặp chữ/nền dùng trong component đã kiểm tra WCAG 2.x (.tmp/design/contrast.js):
   ink-900/surface 17.6:1 · ink-700/surface 10.7:1 · ink-500/surface 6.5:1 · brand-600/surface 5.9:1
   trắng/brand-600 5.9:1 · trắng/call 5.4:1 · trắng/zalo 4.75:1 · on-dark/brand-900 11.3:1
   champagne-600/surface 5.3:1 · line-strong/surface 3.9:1 (viền input, ≥3:1) · accent-red chỉ làm điểm nhấn.
   ===================================================================== */
:root {
	/* Chữ */
	--ddg-ink-900: #1a1726;
	--ddg-ink-700: #3f3b51;
	--ddg-ink-500: #5f5b70;

	/* Bề mặt "sương kính" */
	--ddg-surface: #ffffff;
	--ddg-surface-2: #f6f7fa;
	--ddg-surface-glass: #edf1f6;
	--ddg-line: #dfe3ea;
	--ddg-line-strong: #7a8193;

	/* Thương hiệu */
	--ddg-brand-950: #15111f;
	--ddg-brand-900: #1f1a33;
	--ddg-brand-700: #352d52;
	--ddg-brand-600: #3666a3;
	--ddg-brand-100: #e9eff8;
	--ddg-accent-red: #ec1f27;
	--ddg-champagne-600: #86672b;
	--ddg-champagne-300: #d8c59e;

	/* Kênh liên hệ */
	--ddg-call: #0b7a3f;
	--ddg-call-700: #08632f;
	--ddg-zalo: #0068ff;
	--ddg-zalo-700: #0052cc;
	--ddg-messenger: #0866ff;

	/* Chữ trên nền tối, trạng thái */
	--ddg-on-dark: #d5d2e0;
	--ddg-on-dark-muted: #b3afc4;
	--ddg-danger: #b42318;
	--ddg-danger-bg: #fef3f2;
	--ddg-success: #067647;
	--ddg-success-bg: #ecfdf3;
	--ddg-focus: var(--ddg-brand-600);

	/* Chữ */
	--ddg-font-sans: "Inter", "Inter Fallback", "Inter Fallback Arial", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--ddg-font-display: "Playfair Display", "Playfair Fallback", "Playfair Fallback Noto", "Playfair Fallback Times", Georgia, "Noto Serif", "Times New Roman", serif;
	--ddg-fs-12: 0.75rem;
	--ddg-fs-14: 0.875rem;
	--ddg-fs-16: 1rem;
	--ddg-fs-18: 1.125rem;
	--ddg-fs-20: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	--ddg-fs-24: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
	--ddg-fs-30: clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem);
	--ddg-fs-40: clamp(1.75rem, 1.2rem + 2.6vw, 2.5rem);
	--ddg-fs-48: clamp(1.875rem, 1.15rem + 3.4vw, 3rem);
	--ddg-lh-body: 1.7;    /* dấu tiếng Việt chồng tầng cần khoảng thở */
	--ddg-lh-heading: 1.3; /* không dưới 1.25 */
	--ddg-measure: 68ch;

	/* Khoảng cách — bước 4px */
	--ddg-space-1: 4px;
	--ddg-space-2: 8px;
	--ddg-space-3: 12px;
	--ddg-space-4: 16px;
	--ddg-space-6: 24px;
	--ddg-space-8: 32px;
	--ddg-space-12: 48px;
	--ddg-space-16: 64px;

	/* Hình khối */
	--ddg-radius-sm: 6px;
	--ddg-radius-md: 10px;
	--ddg-radius-lg: 16px;
	--ddg-radius-pill: 999px;
	--ddg-shadow-1: 0 1px 2px rgba(26, 23, 38, 0.06), 0 1px 1px rgba(26, 23, 38, 0.04);
	--ddg-shadow-2: 0 2px 6px rgba(26, 23, 38, 0.06), 0 16px 40px rgba(26, 23, 38, 0.1);
	--ddg-container: 1200px;

	/* Chuyển động */
	--ddg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ddg-dur-1: 150ms;
	--ddg-dur-2: 240ms;

	/* Chiều cao Contact Dock mobile; = 0 khi không có dock (xem components.css) */
	--ddg-dock-h: 0px;
}

/* =====================================================================
   3. BASE — áp token lên Flatsome ở mức có kiểm soát (không phá layout UX Builder).
   Tiền tố `body` / `html` chỉ để thắng selector phần tử của CSS inline Flatsome/snippet cũ
   mà không cần !important.
   ===================================================================== */
body {
	font-family: var(--ddg-font-sans);
	color: var(--ddg-ink-900);
	line-height: var(--ddg-lh-body);
	text-rendering: optimizeLegibility;
}

body :is(h1, h2, h3) {
	font-family: var(--ddg-font-display);
	font-weight: 700;
	line-height: var(--ddg-lh-heading);
	color: var(--ddg-ink-900);
	font-variant-numeric: lining-nums; /* '3D', '5ly' không dùng số kiểu cổ — UI-U-12 */
	letter-spacing: -0.005em;
	text-wrap: pretty; /* không dùng balance: balance chia đều dòng → tiêu đề trông như bị giới hạn chiều rộng */
}

body :is(h4, h5, h6) {
	font-family: var(--ddg-font-sans);
	font-weight: 600;
	line-height: var(--ddg-lh-heading);
	color: var(--ddg-ink-900);
}

/* Link trong nội dung: cùng font thân bài, gạch chân 1px, tương phản ≥4.5:1 — UI-U-11 */
body :is(.entry-content, .page-content, .ddg-prose) a:not(.button):not(.ddg-btn) {
	color: var(--ddg-brand-600);
	font-family: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--ddg-dur-1) var(--ddg-ease), text-decoration-thickness var(--ddg-dur-1) var(--ddg-ease);
}
body :is(.entry-content, .page-content, .ddg-prose) a:not(.button):not(.ddg-btn):hover {
	color: var(--ddg-brand-700);
	text-decoration-thickness: 2px;
}

/* Không căn đều chữ (khoảng trắng lớn trên mobile) — UI-U-12 */
body :is(p, li)[style*="justify"] {
	text-align: left !important; /* ghi đè style inline trong post_content, không sửa DB */
}

::selection {
	background: var(--ddg-brand-100);
	color: var(--ddg-ink-900);
}

/* Focus bàn phím toàn cục, outline 3px tương phản ≥3:1 — UI-U-14.
   Flatsome có `a:focus,.button:focus,button:focus,input:focus{outline:none}` → selector đủ mạnh (0,2,1). */
html :is(a, button, input, select, textarea, summary, [tabindex], .button):focus-visible {
	outline: 3px solid var(--ddg-focus);
	outline-offset: 2px;
}
:is(.ddg-on-dark, .footer-wrapper) :is(a, button, input, select, textarea, summary, [tabindex], .button) {
	--ddg-focus: #ffffff;
}

/* Mở submenu bằng bàn phím — UI-U-14 */
.nav > li.has-dropdown:focus-within > .nav-dropdown {
	opacity: 1;
	max-height: inherit;
	left: -15px;
}

/* Neo cuộn không bị header dính che */
:is(#bao-gia, .entry-content :is(h2, h3)[id]) {
	scroll-margin-top: 88px;
}

/* Tôn trọng giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}