/**
 * Base typography + components.
 *
 * Colour rule enforced throughout: --sk-electric is a *fill* and an *on-dark*
 * colour. It is never used for text or icons on a light surface. Interactive
 * text on white uses --sk-link.
 */

/* ==========================================================================
   Base
   ========================================================================== */

body {
	font-family: var(--sk-font-body);
	font-size: var(--sk-text-base);
	line-height: var(--sk-text-base-lh);
	color: var(--sk-on-surface);
	background-color: var(--sk-surface-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title {
	font-family: var(--sk-font-heading);
	color: var(--sk-on-surface);
	font-weight: 700;
}

/*
 * Astra applies `text-transform: capitalize` to headings. In Vietnamese that
 * capitalises every syllable — "Mẹ bầu và em bé" becomes "Mẹ Bầu Và Em Bé".
 * Force it off; the `body` prefix outranks Astra's generated CSS.
 */
body h1, body h2, body h3, body h4, body h5, body h6,
body .entry-title,
body .sk-card__title,
body .sk-row-card__title,
body .sk-footer__heading {
	text-transform: none;
}

h1, .entry-title {
	font-size: var(--sk-text-3xl);
	line-height: var(--sk-text-3xl-lh);
	letter-spacing: var(--sk-tracking-tight);
}

h2 { font-size: var(--sk-text-2xl); line-height: var(--sk-text-2xl-lh); }
h3 { font-size: var(--sk-text-xl); line-height: var(--sk-text-xl-lh); font-weight: 600; }

a {
	color: var(--sk-link);
	text-decoration: none;
	transition: color var(--sk-transition);
}

a:hover,
a:focus {
	color: var(--sk-link-hover);
}

/* Focus is a solid ink outline — no halo, in keeping with the no-shadow rule. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--sk-ink);
	outline-offset: 2px;
	border-radius: var(--sk-radius-sm);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.sk-container {
	width: 100%;
	max-width: var(--sk-container);
	margin-inline: auto;
	padding-inline: var(--sk-margin-mobile);
}

@media (min-width: 783px) {
	.sk-container { padding-inline: var(--sk-margin-desktop); }
}

.sk-section { padding-block: var(--sk-section-y); }

.sk-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--sk-3);
	margin-bottom: var(--sk-6);
}

.sk-section-head h2 { margin: 0; }

.sk-section-head p {
	margin: var(--sk-1) 0 0;
	color: var(--sk-on-surface-variant);
}

/* Electric rule under section headings — the accent doing structural work. */
.sk-section-head h2::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-top: var(--sk-1);
	border-radius: var(--sk-radius-full);
	background: var(--sk-electric);
}

/* "Xem tất cả" style inline link. */
.sk-more-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--sk-text-sm);
	font-weight: 700;
	color: var(--sk-link);
	white-space: nowrap;
}

.sk-more-link:hover { color: var(--sk-link-hover); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.sk-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-1);
	font-family: var(--sk-font-body);
	font-size: var(--sk-text-sm);
	font-weight: 700;
	line-height: var(--sk-text-sm-lh);
	padding: 13px var(--sk-3);
	border-radius: var(--sk-radius-full);
	border: var(--sk-stroke-w) solid transparent;
	cursor: pointer;
	transition: background-color var(--sk-transition), color var(--sk-transition);
}

/* The signature control: electric fill, ink label — 14.22:1. */
.sk-btn--primary {
	background-color: var(--sk-electric);
	color: var(--sk-ink);
}

.sk-btn--primary:hover,
.sk-btn--primary:focus {
	background-color: var(--sk-electric-soft);
	color: var(--sk-ink);
}

.sk-btn--secondary {
	background-color: transparent;
	border-color: var(--sk-ink);
	color: var(--sk-ink);
}

.sk-btn--secondary:hover,
.sk-btn--secondary:focus {
	background-color: var(--sk-ink);
	color: var(--sk-electric);
}

/* For use on ink backgrounds. */
.sk-btn--on-dark {
	background-color: var(--sk-electric);
	color: var(--sk-ink);
}

.sk-btn--ghost {
	background-color: var(--sk-surface-low);
	color: var(--sk-link);
	justify-content: center;
	width: 100%;
}

.sk-btn--ghost:hover { background-color: var(--sk-surface-container); }

/* Gutenberg/Astra buttons inherit the primary treatment. */
.wp-block-button__link,
.ast-button,
button.ast-button,
input[type="submit"] {
	background-color: var(--sk-electric);
	color: var(--sk-ink);
	border-radius: var(--sk-radius-full);
	font-family: var(--sk-font-body);
	font-weight: 700;
	border: none;
	transition: background-color var(--sk-transition);
}

.wp-block-button__link:hover,
.ast-button:hover,
input[type="submit"]:hover {
	background-color: var(--sk-electric-soft);
	color: var(--sk-ink);
}

/* ==========================================================================
   Chips
   ========================================================================== */

.sk-chip {
	display: inline-block;
	align-self: flex-start;   /* card bodies are column flex; avoid stretching */
	font-size: var(--sk-text-xs);
	line-height: var(--sk-text-xs-lh);
	font-weight: 700;
	letter-spacing: var(--sk-tracking-wide);
	padding: 5px 10px;
	border-radius: var(--sk-radius-full);
	background-color: var(--sk-chip-bg);
	color: var(--sk-chip-fg);
	text-transform: uppercase;
}

/* On photography and ink panels the chip goes solid electric. */
.sk-chip--onimage {
	background-color: var(--sk-electric);
	color: var(--sk-ink);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.sk-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--sk-surface);
	border: var(--sk-stroke);
	border-radius: var(--sk-radius-md);
	overflow: hidden;
	transition: border-color var(--sk-transition);
}

.sk-card:hover {
	border-color: var(--sk-teal-deep);
}

.sk-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--sk-surface-container);
}

.sk-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.sk-card:hover .sk-card__media img { transform: scale(1.05); }

.sk-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 160px;
	font-size: var(--sk-text-3xl);
	color: var(--sk-teal);
	background: linear-gradient(135deg, var(--sk-surface-container), var(--sk-electric-wash));
}

.sk-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--sk-1);
	padding: var(--sk-3);
}

.sk-card__title {
	font-family: var(--sk-font-heading);
	font-size: var(--sk-text-xl);
	line-height: var(--sk-text-xl-lh);
	font-weight: 700;
	margin: 0;
	color: var(--sk-on-surface);
}

.sk-card__title a { color: inherit; }
.sk-card:hover .sk-card__title a { color: var(--sk-link); }

.sk-card__excerpt {
	margin: 0;
	color: var(--sk-on-surface-variant);
}

.sk-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: var(--sk-1);
	font-size: var(--sk-text-xs);
	color: var(--sk-on-surface-variant);
}

.sk-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sk-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Overlay card ------------------------------------------------------- */

/*
 * The overlay card is the archive's featured snippet. It dropped the stroke on
 * the theory that a full-bleed photo needs no edge, but it then sat beside
 * stroked cards in the same bento row with no border of its own — the one
 * unframed surface on the page. It keeps the standard ink edge like the
 * homepage lead card; on a dark photo the stroke reads as a silhouette.
 */
.sk-card--overlay {
	justify-content: flex-end;
	min-height: 400px;
	border: var(--sk-stroke);
	background-color: var(--sk-ink);
}

.sk-card--overlay .sk-card__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.sk-card--overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgb(0 22 24 / 0.92) 0%, rgb(0 22 24 / 0.45) 50%, rgb(0 22 24 / 0.05) 100%);
}

.sk-card--overlay .sk-card__body {
	position: relative;
	z-index: 2;
	flex: 0;
	padding: var(--sk-4);
}

.sk-card--overlay .sk-card__title,
.sk-card--overlay .sk-card__title a { color: var(--sk-on-dark); }
.sk-card--overlay .sk-card__excerpt { color: var(--sk-on-dark-variant); }
.sk-card--overlay .sk-card__meta { color: var(--sk-on-dark-variant); }
.sk-card--overlay:hover .sk-card__title a { color: var(--sk-electric); }

/* ---- Compact card ------------------------------------------------------- */

.sk-card--compact .sk-card__title {
	font-size: var(--sk-text-md);
	line-height: var(--sk-text-md-lh);
	font-weight: 700;
}

/* ---- Row card ----------------------------------------------------------- */

.sk-row-card {
	position: relative;
	display: grid;
	grid-template-columns: 112px 1fr auto;
	align-items: center;
	gap: var(--sk-3);
	padding: var(--sk-2) 0;
	border-bottom: 1px solid var(--sk-ink);
}

.sk-row-card:last-child { border-bottom: none; }

.sk-row-card__media {
	border-radius: var(--sk-radius-sm);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--sk-surface-container);
}

.sk-row-card__media img { width: 100%; height: 100%; object-fit: cover; }

.sk-row-card__title {
	font-family: var(--sk-font-heading);
	font-size: var(--sk-text-md);
	line-height: var(--sk-text-md-lh);
	font-weight: 700;
	margin: 4px 0;
}

.sk-row-card__title a { color: var(--sk-on-surface); }
.sk-row-card:hover .sk-row-card__title a { color: var(--sk-link); }

.sk-row-card__excerpt {
	margin: 0;
	font-size: var(--sk-text-sm);
	color: var(--sk-on-surface-variant);
}

.sk-row-card__chevron { color: var(--sk-outline); }

@media (max-width: 600px) {
	.sk-row-card { grid-template-columns: 88px 1fr; }
	.sk-row-card__chevron { display: none; }
}

/* ==========================================================================
   Icons
   ========================================================================== */

.sk-icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -0.125em;
}

.sk-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--sk-radius-full);
	font-size: var(--sk-text-lg);
	background-color: var(--sk-ink);
	color: var(--sk-electric);
}

/* ==========================================================================
   Brand lockup — logo mark + wordmark
   ========================================================================== */

.sk-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.sk-brand__mark {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	display: block;
}

.sk-brand__text {
	font-family: var(--sk-font-heading);
	font-weight: 700;
	font-size: var(--sk-text-lg);
	line-height: var(--sk-text-lg-lh);
	letter-spacing: var(--sk-tracking-tight);
	color: var(--sk-ink);
	white-space: nowrap;
}

.site-title,
.site-title a,
.ast-site-title-wrap .site-title a {
	font-family: var(--sk-font-heading);
	font-weight: 700;
	font-size: var(--sk-text-lg);
	letter-spacing: var(--sk-tracking-tight);
	color: var(--sk-ink);
	text-transform: none;
	white-space: nowrap;
}

.site-title a:hover { color: var(--sk-link); }

/*
 * Header lockup. Astra renders the site title as plain text, so the mark is
 * attached as a ::before background rather than by overriding Astra's header
 * markup — it survives Astra updates and needs no logo upload.
 */
.site-title a::before {
	content: "";
	display: inline-block;
	width: 34px;
	height: 34px;
	margin-right: 10px;
	vertical-align: -0.34em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M32 8a24 24 0 1 0 24 24' stroke='%23001618' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M32 20a12 12 0 1 1-12 12' stroke='%2300a4ab' stroke-width='7' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='32' r='5' fill='%234af7ff'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width: 480px) {
	.site-title a::before { width: 26px; height: 26px; margin-right: 7px; }
}

@media (max-width: 480px) {
	.site-title, .site-title a, .sk-brand__text { font-size: var(--sk-text-base); white-space: normal; }
	.sk-brand__mark { width: 30px; height: 30px; }
}

/* ==========================================================================
   Header
   ========================================================================== */

/*
 * Electric-blue bar closed by a solid ink stroke. Everything on it is ink —
 * 14.22:1 — so nav, wordmark and icons all read at full strength.
 *
 * `body` prefixes outrank Astra's generated `.ast-primary-header-bar` rule
 * (0,1,0) without resorting to !important.
 */
body .site-header,
body .ast-primary-header-bar,
body .main-header-bar,
body .ast-primary-header-bar.ast-primary-header {
	background-color: var(--sk-electric);
	border-bottom: var(--sk-stroke);
}

body .site-title,
body .site-title a,
body .ast-site-title-wrap .site-title a {
	color: var(--sk-ink);
}

body .site-title a:hover { color: var(--sk-link-hover); }

.main-header-menu > .menu-item > .menu-link,
.ast-header-break-point .main-header-menu .menu-link {
	font-family: var(--sk-font-body);
	font-size: var(--sk-text-sm);
	font-weight: 700;
	color: var(--sk-ink);
}

.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .current-menu-ancestor > .menu-link {
	color: var(--sk-ink);
}

/* Solid ink underline marks the active section — a stroke, not a shadow. */
.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .current-menu-ancestor > .menu-link {
	border-bottom: 3px solid var(--sk-ink);
}

/* Astra's "filled" social style tints icons with a near-white global colour,
   which disappears on the electric bar. Repoint at the ink. */
body .site-header .ast-builder-social-element svg,
body .site-header .ast-builder-social-element .ahfb-svg-iconset svg {
	fill: var(--sk-ink);
}

body .site-header .ast-builder-social-element:hover svg { fill: var(--sk-link-hover); }

/* Search sits as a white, ink-stroked pill on the electric bar. */
.ast-header-search .search-field,
.site-header .search-field {
	background-color: var(--sk-surface);
	border: var(--sk-stroke);
	border-radius: var(--sk-radius-full);
	padding: var(--sk-1) var(--sk-2);
	color: var(--sk-on-surface);
	transition: border-color var(--sk-transition);
}

.ast-header-search .search-field:focus,
.site-header .search-field:focus {
	border-color: var(--sk-link);
	outline: none;
}

/* Mobile toggle also needs to read as ink on electric. */
body .ast-header-break-point .menu-toggle,
body .ast-mobile-menu-trigger-minimal {
	background: transparent;
	color: var(--sk-ink);
}

/* ==========================================================================
   Footer — ink panel, the largest dark surface on the site
   ========================================================================== */

.sk-footer {
	background-color: var(--sk-ink);
	color: var(--sk-on-dark-variant);
	padding-block: var(--sk-8) var(--sk-6);
}

.sk-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sk-6);
}

@media (min-width: 783px) {
	.sk-footer__inner { grid-template-columns: 2fr 1fr 1fr; gap: var(--sk-8); }
}

.sk-footer .sk-brand__text { color: var(--sk-on-dark); }

.sk-footer__text {
	margin: var(--sk-2) 0 0;
	max-width: 34rem;
	font-size: var(--sk-text-sm);
	line-height: var(--sk-text-base-lh);
	color: var(--sk-on-dark-variant);
}

.sk-footer__heading {
	font-size: var(--sk-text-sm);
	font-weight: 700;
	letter-spacing: var(--sk-tracking-wide);
	color: var(--sk-electric);
	margin: 0 0 var(--sk-2);
	text-transform: uppercase;
}

.sk-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sk-1);
}

.sk-footer__col a {
	color: var(--sk-on-dark-variant);
	font-size: var(--sk-text-sm);
	text-decoration: none;
}

.sk-footer__col a:hover {
	color: var(--sk-electric);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Astra's copyright strip closes the ink block. */
.ast-small-footer,
.site-footer,
.site-primary-footer-wrap {
	background-color: var(--sk-ink);
	color: var(--sk-on-dark-variant);
	border-top: 1px solid rgb(255 255 255 / 0.12);
}

/*
 * Astra's footer builder paints each row from its own Customizer setting —
 * the "above footer" row carries a hard-coded #eee that lands *inside* the
 * ink .site-footer and reads as a grey band under the dark footer. The value
 * arrives per-element rather than through a stylesheet rule, so !important is
 * the only thing that reaches it. Scoped to the three builder rows only.
 */
.site-above-footer-wrap,
.site-below-footer-wrap,
.site-primary-footer-wrap {
	background-color: var(--sk-ink) !important;
	color: var(--sk-on-dark-variant);
}

.site-above-footer-wrap a,
.site-below-footer-wrap a {
	color: var(--sk-electric);
}

.ast-small-footer a,
.site-footer a { color: var(--sk-electric); }

/* ==========================================================================
   Article content
   ========================================================================== */

.entry-content {
	font-size: var(--sk-text-md);
	line-height: var(--sk-text-md-lh);
	color: var(--sk-on-surface-variant);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	color: var(--sk-on-surface);
	margin-top: var(--sk-6);
	margin-bottom: var(--sk-2);
}

/*
 * Astra sizes in-article headings via `h2, .entry-content :where(h2)`. The
 * :where() contributes nothing, but the `.entry-content` ahead of it scores
 * 0,1,0 and outranks a bare `h2` selector — so headings inside posts ignored
 * the ramp and rendered at 1.667rem. Match its specificity to pull them back.
 *
 * The same selector carries Astra's `text-transform: capitalize`, and the
 * `body h1…h6` reset further up loses to it for exactly the same reason: it
 * scores 0,0,2. So post headings kept title-casing every Vietnamese syllable
 * — "Các Loại Quánh Phổ Biến Nhất Hiện Nay" — while headings everywhere else
 * on the site read correctly. Undo it here, at the specificity that wins.
 */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 { text-transform: none; }

.entry-content h2 { font-size: var(--sk-text-2xl); line-height: var(--sk-text-2xl-lh); }
.entry-content h3 { font-size: var(--sk-text-xl); line-height: var(--sk-text-xl-lh); }
.entry-content h4 { font-size: var(--sk-text-lg); line-height: var(--sk-text-lg-lh); }

.entry-content a {
	color: var(--sk-link);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--sk-electric);
}

.entry-content a:hover {
	color: var(--sk-link-hover);
	text-decoration-color: var(--sk-link-hover);
}

/* In-article images carry the same ink stroke as every other surface. */
.entry-content img,
.wp-block-image img {
	border: var(--sk-stroke);
	border-radius: var(--sk-radius-lg);
}

/*
 * A product shot illustrates one paragraph; run at the full 44rem measure it
 * took more of the screen than the section it belongs to, and the roundup ran
 * as thirteen posters with text between them.
 *
 * Both caps matter, because these are not one shape: a square pan and an
 * 800x286 boxed set constrained on width alone would land at wildly different
 * visual weights. Bounding the box on both axes lets each one scale to fit and
 * gives the column a steady rhythm. The files are cropped to the object, so a
 * smaller box does not show a smaller pan — it just stops owning the page.
 */
.entry-content .wp-block-image { text-align: center; }

.entry-content .wp-block-image img {
	max-width: min(100%, 420px);
	max-height: 360px;
	width: auto;
}

.entry-content .wp-block-image figcaption { text-align: center; }

/*
 * Imported posts carry width="1024" attributes and multi-column tables. Either
 * makes the document wider than a phone viewport, at which point the browser
 * scales the whole page down — which is why the header and hero covered only
 * part of the screen on mobile while body text ran off the right edge.
 */
.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content embed {
	max-width: 100%;
	height: auto;
}

.entry-content { overflow-wrap: anywhere; }

/*
 * Tables scroll inside their own box instead of stretching the page, and the
 * rounding lives here rather than on the table.
 *
 * `overflow: hidden` on a `border-collapse: collapse` table clips the
 * collapsed borders, which sit *on* the table's edge rather than inside it:
 * the whole outer frame disappeared and every row rule ran a pixel past where
 * the frame should have been. That is what "mất dòng kẻ" looked like. The
 * wrapper is already a clipping box, so it can carry the radius for free.
 */
.entry-content .wp-block-table,
.entry-content figure.wp-block-table,
.sk-table {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--sk-radius);
}

/*
 * The actual root cause of that mobile break: grid children default to
 * min-width:auto and refuse to shrink below their content's minimum, so a
 * single-column `1fr` track resolves to minmax(auto, 1fr) and one wide table
 * drags the entire page wider than the screen.
 */
.sk-post__inner > *,
.sk-lead__inner > *,
.sk-trust__inner > *,
.sk-split > *,
.sk-bento > *,
.sk-grid > * { min-width: 0; }

.entry-content blockquote {
	border-left: 6px solid var(--sk-electric);
	background-color: var(--sk-surface-low);
	border-radius: 0 var(--sk-radius-md) var(--sk-radius-md) 0;
	padding: var(--sk-3);
	margin-inline: 0;
	color: var(--sk-on-surface);
}

.entry-content ul li::marker,
.entry-content ol li::marker { color: var(--sk-teal-deep); }

.entry-content table {
	border-collapse: collapse;
	width: 100%;
}

.entry-content th {
	background-color: var(--sk-ink);
	color: var(--sk-on-dark);
	font-family: var(--sk-font-heading);
}

.entry-content th,
.entry-content td {
	padding: 12px var(--sk-2);
	border: 1px solid var(--sk-ink);
	text-align: left;
}

/*
 * Inside the header the rule is ink drawn on ink, so the column split was
 * invisible there while every body row kept its own. Only the internal edge
 * lightens — the outer ones stay ink so the frame still reads as one line.
 */
.entry-content thead th:not(:last-child) { border-right-color: var(--sk-on-dark-variant); }