/*
Theme Name: An Thư
Theme URI: https://anthu.today
Author: An Thư The Diamond Store
Description: Theme tạp chí sang trọng cho anthu.today – tin tức là chính, kèm video thật từng món (xem liên tục kiểu Reels), kiến thức trang sức, giá vàng An Thư và tỷ giá. Mỗi video có trang riêng liên kết về sản phẩm trên anthu.vn.
Version: 3.1.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: Proprietary
Text Domain: anthu
*/

/* =========================================================================
   Tokens
   ====================================================================== */
:root {
	--at-bg: #FFFFFF;
	--at-surface: #FFFFFF;
	--at-soft: #F6F6F4;
	--at-ink: #0B0B0C;
	--at-ink-2: #2B2B2D;
	--at-night: #0B0B0C;
	--at-muted: #6E6E70;
	--at-line: #E7E7E5;
	--at-line-2: #EFEFED;
	--at-line-3: #CFCFCC;
	--at-accent: #0F5C4E;
	--at-accent-light: #DCE7E3;
	--at-dark-text: #EDEDEB;
	--at-dark-muted: #A3A3A3;
	--at-dark-line: #2A2A2C;
	--at-up: #0F5C4E;
	--at-down: #9B3B2B;
	--at-up-dark: #8FC9B6;
	--at-down-dark: #F0A08E;
	--at-serif: 'Cormorant Garamond', 'Times New Roman', serif;
	--at-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--at-wrap: 1240px;
	--at-ease: cubic-bezier(.2, .7, .2, 1);
}

/* =========================================================================
   Base
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--at-bg); color: var(--at-ink); font-family: var(--at-sans); font-size: 16px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--at-ink); text-decoration: none; transition: color .25s; }
a:hover, a:focus-visible { color: var(--at-accent); }
:focus-visible { outline: 2px solid var(--at-accent); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--at-serif); font-weight: 500; line-height: 1.12; margin: 0; letter-spacing: -.005em; }
em { font-style: italic; }
.at-wrap { max-width: var(--at-wrap); margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.at-center { text-align: center; margin-top: 48px; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 999; clip: auto; width: auto; height: auto; background: var(--at-ink); color: #fff; padding: 10px 16px; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--at-up); } .down { color: var(--at-down); }

.at-eyebrow { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--at-accent); font-weight: 500; margin: 0 0 14px; }
.at-meta { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--at-muted); }
.at-meta .at-cat { color: var(--at-accent); font-weight: 600; }
.at-link { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 5px; display: inline-block; }
.at-link--plain { border: 0; padding: 0; }

/* Buttons */
.at-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 30px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; background: var(--at-ink); color: var(--at-bg); border: 1px solid var(--at-ink); cursor: pointer; font-family: inherit; transition: background .3s var(--at-ease), color .3s, border-color .3s; }
.at-btn:hover, .at-btn:focus-visible { background: var(--at-accent); border-color: var(--at-accent); color: #fff; }
.at-btn--sm { min-height: 42px; padding: 0 22px; }
.at-btn--ghost { background: transparent; color: var(--at-ink); }
.at-btn--gold { background: var(--at-accent-light); border-color: var(--at-accent-light); color: var(--at-night); }
.at-btn--gold:hover, .at-btn--gold:focus-visible { background: #fff; border-color: #fff; color: var(--at-night); }
.at-btn--line { background: transparent; border-color: rgba(233,225,211,.45); color: var(--at-dark-text); }
.at-btn--line:hover, .at-btn--line:focus-visible { border-color: var(--at-accent-light); background: transparent; color: var(--at-accent-light); }
.at-btn--line-dark { background: transparent; color: var(--at-ink); border-color: var(--at-ink); }
.at-iconbtn { width: 44px; height: 44px; border: 1px solid var(--at-line); background: transparent; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--at-ink); transition: border-color .25s, color .25s; }
.at-iconbtn:hover { border-color: var(--at-ink); }
.at-iconbtn--dark { border-color: rgba(233,225,211,.3); color: var(--at-dark-text); }
.at-iconbtn--dark:hover { border-color: var(--at-accent-light); color: var(--at-accent-light); }

/* =========================================================================
   Ticker
   ====================================================================== */
.at-ticker { background: var(--at-night); color: var(--at-dark-muted); font-size: 12px; border-bottom: 1px solid var(--at-dark-line); }
.at-ticker .at-wrap { display: flex; align-items: center; gap: 24px; padding-top: 9px; padding-bottom: 9px; }
.at-ticker__label { color: var(--at-accent-light); font-weight: 500; text-transform: uppercase; letter-spacing: .24em; font-size: 10px; flex-shrink: 0; }
.at-ticker__track { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.at-ticker__inner { display: inline-flex; gap: 48px; animation: at-marquee 60s linear infinite; }
.at-ticker__track:hover .at-ticker__inner { animation-play-state: paused; }
.at-ticker__item b { color: var(--at-dark-text); font-weight: 500; margin-right: 8px; }
.at-ticker .up { color: var(--at-up-dark); } .at-ticker .down { color: var(--at-down-dark); }
.at-ticker__more { color: var(--at-accent-light); font-size: 11px; letter-spacing: .12em; flex-shrink: 0; }
.at-ticker__more:hover { color: #fff; }
@keyframes at-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .at-ticker__inner { animation: none; } }

/* =========================================================================
   Header (logo giữa, menu dưới)
   ====================================================================== */
.at-header { background: var(--at-bg); border-bottom: 1px solid var(--at-line); position: relative; z-index: 20; }
.at-header__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-top: 20px; padding-bottom: 14px; }
.at-header__side { display: flex; align-items: center; gap: 10px; }
.at-header__side--end { justify-content: flex-end; }
.at-header__tel { font-size: 12px; letter-spacing: .14em; margin-left: 8px; color: var(--at-muted); }
.at-logo img, .at-logo .custom-logo { height: 52px; width: auto; }
.at-nav ul { list-style: none; margin: 0; padding: 0 0 16px; display: flex; justify-content: center; gap: 40px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.at-nav a { padding: 6px 0; position: relative; }
.at-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--at-accent); transform: scaleX(0); transition: transform .35s var(--at-ease); }
.at-nav a:hover::after, .at-nav .current-menu-item > a::after, .at-nav .current-cat > a::after { transform: scaleX(1); }
.at-menu-toggle { display: none; }
.at-search { display: none; border-top: 1px solid var(--at-line); background: var(--at-surface); }
.at-search.is-open { display: block; }
.at-search form { display: flex; gap: 12px; padding-top: 16px; padding-bottom: 16px; }
.at-search input[type=search] { flex: 1; min-height: 48px; border: 1px solid var(--at-line-3); background: var(--at-bg); padding: 0 16px; font: inherit; }
@media (max-width: 960px) {
	.at-header__top { padding-top: 14px; padding-bottom: 14px; }
	.at-logo img, .at-logo .custom-logo { height: 40px; }
	.at-header__tel { display: none; }
	.at-menu-toggle { display: inline-flex; }
	.at-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--at-bg); border-bottom: 1px solid var(--at-line); }
	.at-nav.is-open { display: block; }
	.at-nav ul { flex-direction: column; gap: 0; padding: 8px 0 16px; text-align: center; }
	.at-nav li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--at-line-2); }
	.at-nav a::after { display: none; }
	.at-header__shop { padding: 0 12px; letter-spacing: .08em; font-size: 11px; white-space: nowrap; }
}

/* =========================================================================
   Sân khấu video (hero)
   ====================================================================== */
.at-stage { background: radial-gradient(120% 90% at 75% 40%, #23201C 0%, var(--at-night) 60%); color: var(--at-dark-text); overflow: hidden; }
.at-stage__inner { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: 40px; align-items: center; padding-top: 72px; padding-bottom: 80px; }
.at-stage .at-eyebrow { color: var(--at-accent-light); }
.at-stage__title { font-size: clamp(42px, 5.2vw, 76px); line-height: 1.02; color: #fff; font-weight: 500; }
.at-stage__title em { color: var(--at-accent-light); font-weight: 500; }
.at-stage__lead { font-size: 16px; line-height: 1.8; color: var(--at-dark-muted); max-width: 440px; margin: 26px 0 34px; }
.at-stage__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.at-stage__controls { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.at-stage__count { font-family: var(--at-serif); font-size: 20px; letter-spacing: .08em; color: var(--at-dark-text); min-width: 76px; text-align: center; }
.at-stage__deck { position: relative; height: min(640px, 72vh); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.at-stage__intro { position: relative; z-index: 2; }
.at-stage__cap { display: none; }
.at-stage__now { margin: 40px 0 0; min-height: 52px; font-family: var(--at-serif); font-size: 22px; line-height: 1.25; color: #fff; }
.at-stage__now b { display: block; font-family: var(--at-sans); font-size: 14px; font-weight: 500; color: var(--at-accent-light); margin-top: 6px; letter-spacing: .04em; }
.at-stage__now s { color: var(--at-dark-muted); font-weight: 400; font-size: 12px; margin-left: 6px; }
.at-stage__item { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 9 / 16; transform: translateX(-50%); overflow: hidden; background: #000; color: #fff; transition: transform .7s var(--at-ease), opacity .7s var(--at-ease), filter .7s; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.at-stage__item img, .at-stage__item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.at-stage__item video { opacity: 0; transition: opacity .6s; z-index: 0; }
.at-stage__item img { z-index: 0; }
.at-stage__cap, .at-stage__item .at-reel__play { z-index: 1; }
.at-stage__item.is-playing video { opacity: 1; }
.at-stage__item:hover, .at-stage__item:focus-visible { color: #fff; }
.at-stage__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 80px 22px 22px; background: linear-gradient(0deg, rgba(13,12,11,.92), rgba(13,12,11,0)); opacity: 0; transition: opacity .5s; }
.at-stage__item.is-active .at-stage__cap { opacity: 1; }
.at-stage__name { display: block; font-family: var(--at-serif); font-size: 24px; line-height: 1.2; }
.at-stage__price { display: block; margin-top: 8px; color: var(--at-accent-light); font-size: 15px; letter-spacing: .04em; }
.at-stage__price s { color: var(--at-dark-muted); font-size: 12px; margin-left: 6px; }
.at-stage__item .at-reel__play { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%) scale(.9); width: 64px; height: 64px; opacity: 0; transition: opacity .4s, transform .4s; }
.at-stage__item.is-active:hover .at-reel__play, .at-stage__item.is-active:focus-visible .at-reel__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.at-stage__item.is-active .at-reel__play svg { width: 20px; height: 20px; }
@media (max-width: 900px) {
	.at-stage__inner { grid-template-columns: 1fr; padding-top: 44px; padding-bottom: 56px; gap: 36px; }
	.at-stage__deck { height: 560px; order: -1; }
	.at-stage__lead { margin: 18px 0 26px; }
	.at-stage__controls { margin-top: 28px; }
}

/* =========================================================================
   Thẻ video + lưới
   ====================================================================== */
.at-reel { position: relative; display: block; overflow: hidden; background: var(--at-night); aspect-ratio: 9 / 16; color: #fff; }
.at-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--at-ease); }
.at-reel:hover img, .at-reel:focus-visible img { transform: scale(1.05); }
.at-reel:hover, .at-reel:focus-visible { color: #fff; }
.at-reel__play { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(246,241,233,.92); color: var(--at-night); display: flex; align-items: center; justify-content: center; }
.at-reel__play svg { width: 13px; height: 13px; margin-left: 2px; }
.at-reel__off { position: absolute; top: 14px; left: 14px; background: var(--at-night); color: var(--at-accent-light); font-size: 11px; letter-spacing: .1em; font-weight: 500; padding: 5px 9px; }
.at-reelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 44px 24px; }
.at-reelcard { min-width: 0; }
.at-reelcard[hidden] { display: none; }
.at-reelcard__body { padding-top: 16px; }
.at-reelcard__cat { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--at-muted); margin: 0 0 6px; }
.at-reelcard__title { font-family: var(--at-serif); font-size: 20px; font-weight: 500; line-height: 1.25; margin: 0; }
.at-reelcard__price { margin: 8px 0 0; font-size: 14px; letter-spacing: .02em; }
.at-reelcard__price b { color: var(--at-accent); font-weight: 600; }
.at-reelcard__price s { color: var(--at-muted); font-size: 12px; margin-left: 6px; }

.at-reelgrid--side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
.at-reelgrid--side .at-reelcard__title { font-size: 16px; }
@media (max-width: 600px) { .at-reelgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; } .at-reelcard__title { font-size: 17px; } }

/* Chips lọc */
.at-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 28px; }
.at-chip { min-height: 40px; padding: 0 20px; border: 1px solid var(--at-line-3); background: transparent; color: var(--at-ink); font: inherit; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; transition: all .25s; }
.at-chip:hover { border-color: var(--at-ink); color: var(--at-ink); }
.at-chip[aria-pressed=true], .at-chip[aria-current=page] { background: var(--at-ink); border-color: var(--at-ink); color: var(--at-bg); }

/* Danh mục mua sắm anthu.vn */
.at-shopcats__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.at-shopcat { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--at-night); color: #fff; }
.at-shopcat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; transition: transform 1.1s var(--at-ease), opacity .5s; }
.at-shopcat:hover img { transform: scale(1.05); opacity: .62; }
.at-shopcat:hover { color: #fff; }
.at-shopcat__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 18px 20px; background: linear-gradient(0deg, rgba(13,12,11,.95) 30%, rgba(13,12,11,0)); font-family: var(--at-serif); font-size: 22px; line-height: 1.15; }
.at-shopcat__label small { display: block; font-family: var(--at-sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--at-accent-light); margin-top: 10px; }

/* =========================================================================
   Trình xem video toàn màn hình
   ====================================================================== */
.at-viewer { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--at-night); color: var(--at-dark-text); overflow: hidden; }
.at-viewer::backdrop { background: var(--at-night); }
.at-viewer[open] { display: flex; align-items: center; justify-content: center; }
.at-viewer__stage { display: flex; align-items: center; justify-content: center; gap: 48px; width: 100%; height: 100%; padding: 24px; }
.at-viewer__frame { position: relative; height: min(92vh, 900px); aspect-ratio: 9 / 16; max-width: 100%; background: #000; overflow: hidden; transition: transform .45s var(--at-ease), opacity .45s; }
.at-viewer__frame.is-out-up { transform: translateY(-6%); opacity: 0; }
.at-viewer__frame.is-out-down { transform: translateY(6%); opacity: 0; }
.at-viewer__video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.at-viewer__ext { position: absolute; inset: auto 24px 40px; text-align: center; }
.at-viewer__progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,.18); }
.at-viewer__progress span { display: block; height: 100%; width: 0; background: var(--at-accent-light); }
.at-viewer__mute { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(13,12,11,.55); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.at-viewer__mute svg { width: 20px; height: 20px; }
.at-viewer__mute .i-on { display: none; }
.at-viewer.is-sound .at-viewer__mute .i-on { display: block; }
.at-viewer.is-sound .at-viewer__mute .i-off { display: none; }
.at-viewer__info { width: 340px; flex-shrink: 0; }
.at-viewer__count { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--at-accent-light); margin: 0 0 16px; }
.at-viewer__title { font-size: 34px; line-height: 1.12; color: #fff; }
.at-viewer__price { font-size: 18px; margin: 14px 0 26px; }
.at-viewer__price b { color: var(--at-accent-light); font-weight: 500; }
.at-viewer__price s { color: var(--at-dark-muted); font-size: 14px; margin-left: 6px; }
.at-viewer__buy { width: 100%; }
.at-viewer__page { display: inline-block; margin-top: 18px; color: var(--at-dark-text); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.at-viewer__page:hover { color: var(--at-accent-light); }
.at-viewer__hint { margin-top: 40px; font-size: 12px; color: var(--at-dark-muted); }
.at-viewer__nav { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; }
.at-viewer__nav button, .at-viewer__close { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(233,225,211,.3); background: transparent; color: var(--at-dark-text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.at-viewer__nav button:hover, .at-viewer__close:hover { border-color: var(--at-accent-light); color: var(--at-accent-light); }
.at-viewer__nav svg, .at-viewer__close svg { width: 20px; height: 20px; }
.at-viewer__close { position: absolute; top: 20px; right: 28px; }
@media (max-width: 900px) {
	.at-viewer__stage { padding: 0; gap: 0; }
	.at-viewer__frame { height: 100%; width: 100%; aspect-ratio: auto; }
	.at-viewer__video { object-fit: contain; }
	.at-viewer__info { position: absolute; left: 0; right: 0; bottom: 0; width: auto; padding: 56px 18px 18px; background: linear-gradient(0deg, rgba(13,12,11,.97) 55%, rgba(13,12,11,0)); pointer-events: none; }
	.at-viewer__info a { pointer-events: auto; }
	.at-viewer__title { font-size: 20px; }
	.at-viewer__price { margin: 6px 0 12px; font-size: 16px; }
	.at-viewer__buy { min-height: 44px; }
	.at-viewer__hint, .at-viewer__page { display: none; }
	.at-viewer__count { margin-bottom: 8px; }
	.at-viewer__nav { right: 12px; top: auto; bottom: 200px; transform: none; }
	.at-viewer__nav button { width: 44px; height: 44px; background: rgba(13,12,11,.4); }
	.at-viewer__close { top: 14px; right: 12px; width: 44px; height: 44px; background: rgba(13,12,11,.4); z-index: 2; }
	.at-viewer__mute { top: 14px; left: 12px; right: auto; bottom: auto; }
}

/* =========================================================================
   Trang chi tiết video
   ====================================================================== */
.at-vpage { background: radial-gradient(120% 90% at 30% 30%, #23201C 0%, var(--at-night) 60%); color: var(--at-dark-text); }
.at-vpage__inner { display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: 64px; padding-top: 56px; padding-bottom: 72px; align-items: start; }
.at-vpage__player { position: relative; }
.at-vpage__video, .at-vpage__player .at-reel { width: 100%; aspect-ratio: 9 / 16; background: #000; display: block; object-fit: cover; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.at-vpage__next { position: absolute; inset: 0; background: rgba(13,12,11,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 8px; }
.at-vpage__next[hidden] { display: none; }
.at-vpage__next p { margin: 0; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--at-accent-light); }
.at-vpage__next strong { font-family: var(--at-serif); font-size: 26px; font-weight: 500; color: #fff; line-height: 1.2; }
.at-vpage__next .at-vpage__countdown { font-family: var(--at-serif); font-size: 44px; letter-spacing: 0; color: #fff; margin: 12px 0; text-transform: none; }
.at-vpage .at-eyebrow { color: var(--at-accent-light); margin-top: 28px; }
.at-vpage__title { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.06; color: #fff; }
.at-vpage__price { margin: 22px 0 30px; font-size: 22px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.at-vpage__price b { color: var(--at-accent-light); font-weight: 500; font-family: var(--at-serif); font-size: 34px; }
.at-vpage__price s { color: var(--at-dark-muted); font-size: 15px; }
.at-vpage__off { font-size: 11px; letter-spacing: .12em; border: 1px solid var(--at-accent-light); color: var(--at-accent-light); padding: 4px 8px; }
.at-vpage__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.at-vpage__desc { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--at-dark-line); font-size: 15px; line-height: 1.85; color: var(--at-dark-muted); max-width: 640px; }
.at-vpage__desc a { color: var(--at-accent-light); text-decoration: underline; text-underline-offset: 3px; }
.at-vpage__facts { margin: 28px 0 0; display: grid; gap: 14px; max-width: 640px; }
.at-vpage__facts div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; font-size: 14px; border-bottom: 1px solid var(--at-dark-line); padding-bottom: 14px; }
.at-vpage__facts dt { color: var(--at-dark-muted); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding-top: 3px; }
.at-vpage__facts dd { margin: 0; color: var(--at-dark-text); }
.at-vpage__facts a { color: var(--at-dark-text); }
.at-breadcrumb { font-size: 12px; color: var(--at-muted); letter-spacing: .06em; }
.at-breadcrumb--dark, .at-breadcrumb--dark a { color: var(--at-dark-muted); }
.at-breadcrumb--dark a:hover { color: var(--at-accent-light); }
@media (max-width: 860px) {
	.at-vpage__inner { grid-template-columns: 1fr; gap: 32px; padding-top: 24px; }
	.at-vpage__player { max-width: 420px; width: 100%; margin: 0 auto; }
}

/* Đầu trang danh sách video */
.at-vhead { background: var(--at-night); color: var(--at-dark-text); text-align: center; padding: 72px 0 56px; }
.at-vhead .at-eyebrow { color: var(--at-accent-light); }
.at-vhead h1 { font-size: clamp(40px, 5vw, 68px); color: #fff; }
.at-vhead p { color: var(--at-dark-muted); max-width: 560px; margin: 18px auto 0; }
.at-vhead .at-chip { color: var(--at-dark-text); border-color: rgba(233,225,211,.3); }
.at-vhead .at-chip:hover { border-color: var(--at-accent-light); color: var(--at-accent-light); }
.at-vhead .at-chip[aria-current=page] { background: var(--at-accent-light); border-color: var(--at-accent-light); color: var(--at-night); }

/* =========================================================================
   Sections, cards, tin tức
   ====================================================================== */
.at-section { margin-top: 120px; }
.at-section--first { margin-top: 96px; }
.at-section__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--at-line-3); padding-bottom: 18px; margin-bottom: 40px; }
.at-section__head--center { display: block; text-align: center; border: 0; padding: 0; margin-bottom: 48px; }
.at-section__title { font-size: clamp(34px, 3.6vw, 52px); }

.at-card__media { display: block; overflow: hidden; background: var(--at-soft); }
.at-card__media img { width: 100%; object-fit: cover; transition: transform 1.1s var(--at-ease); }
.at-card:hover .at-card__media img { transform: scale(1.04); }
.at-card .at-meta { margin-top: 20px; }
.at-card__title { font-size: 26px; margin: 12px 0; line-height: 1.2; }
.at-card__excerpt { font-size: 15px; line-height: 1.7; color: var(--at-muted); margin: 0; }
.ratio-16-5 { aspect-ratio: 16 / 5; } .ratio-16-6 { aspect-ratio: 16 / 6; } .ratio-16-7 { aspect-ratio: 16 / 7; }
.at-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 48px 32px; }
.at-row { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--at-line); align-items: center; }
.at-row:first-child { padding-top: 0; }
.at-row__thumb { flex-shrink: 0; width: 132px; overflow: hidden; background: var(--at-soft); }
.at-row__thumb img { width: 132px; height: 88px; object-fit: cover; }
.at-row__title { font-size: 21px; line-height: 1.25; margin: 6px 0 0; }
.at-news__grid { display: flex; flex-wrap: wrap; gap: 48px; }
.at-news__lead { flex: 3 1 560px; min-width: 0; }
.at-news__lead .at-card__title { font-size: 36px; }
.at-news__list { flex: 2 1 340px; min-width: 0; }

/* =========================================================================
   Trang chủ tạp chí
   ====================================================================== */
.at-front { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; padding-top: 56px; }
.at-front__title { font-size: clamp(36px, 4vw, 58px); line-height: 1.06; margin: 14px 0 16px; }
.at-front__excerpt { font-size: 17px; line-height: 1.75; color: var(--at-muted); margin: 0 0 22px; max-width: 680px; }
.at-front__side { border-left: 1px solid var(--at-line); padding-left: 40px; display: flex; flex-direction: column; }
.at-front__item { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--at-line); align-items: start; }
.at-front__item:last-child { border-bottom: 0; }
.at-front__item:nth-child(2) { padding-top: 6px; }
.at-front__item .at-meta { margin-top: 0; }
.at-front__subtitle { font-size: 22px; line-height: 1.22; margin: 8px 0 0; }
@media (max-width: 900px) {
	.at-front { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; }
	.at-front__side { border-left: 0; padding-left: 0; }
	.at-front__item { grid-template-columns: 112px minmax(0, 1fr); }
}

/* Dải video trên trang chủ */
.at-vband { background: var(--at-night); color: var(--at-dark-text); margin-top: 120px; padding: 80px 0 72px; }
.at-vband .at-eyebrow { color: var(--at-accent-light); }
.at-vband__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.at-vband__head h2 { font-size: clamp(32px, 3.6vw, 50px); color: #fff; max-width: 640px; }
.at-vband__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.at-vband__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 20px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #3A352E transparent; }
.at-vband__row .at-reelcard { scroll-snap-align: start; }
.at-reelcard--dark .at-reelcard__cat { color: var(--at-dark-muted); }
.at-reelcard--dark .at-reelcard__title a { color: var(--at-dark-text); }
.at-reelcard--dark .at-reelcard__title a:hover { color: var(--at-accent-light); }
.at-reelcard--dark .at-reelcard__price b { color: var(--at-accent-light); }
.at-reelcard--dark .at-reelcard__price s { color: var(--at-dark-muted); }
@media (max-width: 760px) { .at-vband { margin-top: 88px; padding: 56px 0; } .at-vband__row { grid-auto-columns: 46%; } }

/* Kiến thức */
.at-knowledge { display: flex; flex-wrap: wrap; gap: 48px; }
.at-knowledge__intro { flex: 1 1 260px; min-width: 0; }
.at-knowledge__intro h2 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.05; margin-bottom: 18px; }
.at-knowledge__intro p { font-size: 15px; line-height: 1.75; color: var(--at-muted); margin: 0 0 24px; }
.at-knowledge__feature { flex: 3 1 520px; min-width: 0; }
.at-knowledge__feature .at-card__title { font-size: 32px; }
.at-knowledge__list { flex: 2 1 340px; min-width: 0; }

/* Theo chuyên mục */
.at-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 48px; }
.at-cats__col { border-top: 2px solid var(--at-ink); padding-top: 18px; }
.at-cats__name { font-size: 28px; margin-bottom: 20px; }
.at-cats__lead { font-size: 22px; line-height: 1.25; margin: 16px 0 6px; }
.at-cats__list { list-style: none; margin: 0; padding: 0; }
.at-cats__list li { padding: 14px 0; border-bottom: 1px solid var(--at-line); font-family: var(--at-serif); font-size: 19px; line-height: 1.3; }
.at-cats__more { display: inline-block; margin-top: 16px; }

/* =========================================================================
   Showroom
   ====================================================================== */
.at-showroom { margin-top: 140px; border-top: 1px solid var(--at-line); border-bottom: 1px solid var(--at-line); background: var(--at-soft); }
.at-showroom__inner { text-align: center; padding-top: 96px; padding-bottom: 96px; }
.at-showroom h2 { font-size: clamp(34px, 4vw, 56px); max-width: 820px; margin: 0 auto 20px; }
.at-showroom__addr { color: var(--at-muted); margin: 0 0 34px; letter-spacing: .02em; }
.at-cta { text-align: center; padding-top: 96px; padding-bottom: 96px; }
.at-cta h2 { font-size: 48px; max-width: 760px; margin: 0 auto 18px; line-height: 1.1; }
.at-cta p { font-size: 15px; color: var(--at-muted); margin: 0 0 30px; }
.at-cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* =========================================================================
   Giá vàng / tỷ giá
   ====================================================================== */
.at-box { background: var(--at-surface); border: 1px solid var(--at-line); padding: 28px; }
.at-box__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.at-box__title { font-size: 28px; }
.at-box__note { font-size: 12px; color: var(--at-muted); margin: 6px 0 18px; }
.at-table { width: 100%; border-collapse: collapse; }
.at-table th { font-family: var(--at-sans); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--at-muted); font-weight: 500; text-align: right; padding: 0 0 12px; border-bottom: 1px solid var(--at-line); }
.at-table th:first-child, .at-table td:first-child { text-align: left; }
.at-table td { padding: 14px 0; border-bottom: 1px solid var(--at-line-2); text-align: right; font-size: 15px; vertical-align: top; }
.at-table td:first-child { font-weight: 500; }
.at-table td.num, .at-table th + th { white-space: nowrap; padding-left: 14px; }
.at-table small { display: block; font-size: 12px; }
.at-table--big th { padding: 18px 28px; background: #FBF8F2; }
.at-table--big td { padding: 20px 28px; font-size: 16px; vertical-align: middle; }
.at-table--big .price { font-family: var(--at-serif); font-size: 26px; font-weight: 600; }
.at-scrollx { overflow-x: auto; position: relative; }
.at-scrollx table { min-width: 480px; }
.at-tablebox { background: var(--at-surface); border: 1px solid var(--at-line); overflow-x: auto; position: relative; }
.at-tablebox .at-table--fx { min-width: 560px; }
.at-tablebox .at-foot { font-size: 12px; color: var(--at-muted); margin: 0; padding: 16px 28px; }
.at-empty { color: var(--at-muted); font-size: 14px; padding: 12px 0; }

.at-band { background: var(--at-night); color: var(--at-dark-text); }
.at-band h2, .at-band h3 { color: #fff; }
.at-band .at-eyebrow { color: var(--at-accent-light); }
.at-band__inner { padding-top: 80px; padding-bottom: 80px; }
.at-band__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--at-dark-line); padding-bottom: 18px; }
.at-band__head h2 { font-size: clamp(32px, 3.4vw, 46px); }
.at-band__more { color: var(--at-accent-light); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.at-band__more:hover { color: #fff; }
.at-band__cols { display: flex; flex-wrap: wrap; gap: 64px; margin-top: 36px; }
.at-band__col { flex: 1 1 420px; min-width: 0; }
.at-band__col h3 { font-size: 28px; margin-bottom: 4px; }
.at-band__src { font-size: 13px; color: var(--at-dark-muted); margin: 0 0 22px; }
.at-band .at-table th { color: var(--at-dark-muted); border-bottom-color: #3A352E; }
.at-band .at-table td { border-bottom-color: var(--at-dark-line); }
.at-band .at-table td:first-child { color: #fff; font-weight: 400; }
.at-band .at-table td:first-child b { color: #fff; letter-spacing: .06em; font-weight: 500; }
.at-band .at-table td:first-child span { color: var(--at-dark-muted); font-size: 13px; }
.at-band .at-table td b { color: #fff; font-weight: 500; }
.at-band .up { color: var(--at-up-dark); } .at-band .down { color: var(--at-down-dark); }
.at-band .at-empty { color: var(--at-dark-muted); }

.at-converter { flex: 2 1 340px; min-width: 0; border: 1px solid #3A352E; padding: 32px; align-self: start; color: var(--at-dark-text); }
.at-converter h3 { font-size: 30px; margin-bottom: 20px; color: #fff; }
.at-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; flex: 1; }
.at-field label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--at-dark-muted); }
.at-field input, .at-field select { height: 48px; background: var(--at-night); border: 1px solid #4A443B; color: #fff; padding: 0 14px; font: inherit; font-size: 16px; }
.at-converter__row { display: flex; gap: 12px; }
.at-converter__result { border-top: 1px solid #3A352E; padding-top: 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.at-converter__result span { font-size: 13px; color: var(--at-dark-muted); }
.at-converter__result output { font-family: var(--at-serif); font-size: 34px; color: var(--at-accent-light); }

.at-tabs { display: inline-flex; border: 1px solid var(--at-ink); }
.at-tabs button { min-height: 44px; padding: 0 26px; border: 0; background: transparent; color: var(--at-ink); font: inherit; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.at-tabs button[aria-selected=true] { background: var(--at-ink); color: var(--at-bg); }
.at-tabpanel[hidden] { display: none; }

.at-market__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; padding-top: 64px; }
.at-market__head h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.05; }
.at-market__src { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; color: var(--at-muted); }
.at-market__body { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 28px; }
.at-market__main { flex: 999 1 640px; min-width: 0; }
.at-market__aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.at-darkcard { background: var(--at-night); color: var(--at-dark-text); padding: 30px; }
.at-darkcard .t { font-family: var(--at-serif); font-size: 28px; line-height: 1.2; margin: 0 0 14px; color: #fff; }
.at-darkcard p { font-size: 14px; line-height: 1.7; color: var(--at-dark-muted); margin: 0 0 22px; }

/* =========================================================================
   Bài viết
   ====================================================================== */
.at-single__head { max-width: 900px; margin: 0 auto; padding: 64px 28px 40px; text-align: center; }
.at-single__title { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.06; margin: 0 0 22px; }
.at-single__byline { display: flex; justify-content: center; gap: 14px; align-items: center; font-size: 13px; color: var(--at-muted); flex-wrap: wrap; }
.at-dash { width: 24px; height: 1px; background: var(--at-line-3); display: inline-block; }
.at-single__cover img { width: 100%; max-height: 540px; object-fit: cover; background: var(--at-soft); }
.at-single__body { display: flex; flex-wrap: wrap; gap: 72px; padding-top: 64px; }
.at-single__aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.at-prose { flex: 999 1 600px; min-width: 0; max-width: 760px; font-size: 18px; line-height: 1.9; color: var(--at-ink-2); }
.at-prose > p:first-child { font-family: var(--at-serif); font-size: 24px; line-height: 1.6; color: var(--at-ink); }
.at-prose p { margin: 0 0 22px; }
.at-prose h2 { font-size: 36px; line-height: 1.2; margin: 48px 0 16px; }
.at-prose h3 { font-family: var(--at-sans); font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.at-prose a { color: var(--at-accent); text-decoration: underline; text-underline-offset: 3px; }
.at-prose img, .at-prose figure { margin: 32px 0; }
.at-prose figcaption { font-size: 13px; color: var(--at-muted); margin-top: 8px; }
.at-prose blockquote { margin: 40px 0; padding: 30px 0; border-top: 1px solid var(--at-line-3); border-bottom: 1px solid var(--at-line-3); font-family: var(--at-serif); font-style: italic; font-size: 30px; line-height: 1.35; text-align: center; color: var(--at-ink); }
.at-prose blockquote p { margin: 0; }
.at-prose ul, .at-prose ol { padding-left: 1.4em; margin: 0 0 22px; }
.at-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.at-prose td, .at-prose th { border: 1px solid var(--at-line); padding: 8px 10px; }
.at-inline-cta { margin: 56px 0 0; background: var(--at-night); color: var(--at-dark-text); padding: 36px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.at-inline-cta div { flex: 1 1 320px; }
.at-inline-cta .at-eyebrow { color: var(--at-accent-light); }
.at-inline-cta .t { font-family: var(--at-serif); font-size: 28px; line-height: 1.2; color: #fff; margin: 0; }
.at-inline-cta .at-btn { background: var(--at-accent-light); border-color: var(--at-accent-light); color: var(--at-night); }
.at-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 36px; }
.at-tags a { border: 1px solid var(--at-line-3); padding: 8px 14px; font-size: 13px; }
.at-aside-title { font-family: var(--at-sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--at-muted); font-weight: 500; margin-bottom: 14px; }

.at-archive__head { padding-top: 64px; padding-bottom: 8px; }
.at-archive__head h1 { font-size: clamp(40px, 4.6vw, 64px); }
.at-archive__head p { color: var(--at-muted); max-width: 680px; }
.at-pagination { margin-top: 64px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.at-pagination .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--at-line-3); padding: 0 12px; font-size: 14px; }
.at-pagination .current { background: var(--at-ink); color: var(--at-bg); border-color: var(--at-ink); }

/* =========================================================================
   Footer
   ====================================================================== */
.at-footer { background: var(--at-night); color: var(--at-dark-muted); }
.at-footer a { color: var(--at-dark-text); }
.at-footer a:hover { color: var(--at-accent-light); }
.at-footer__brand { text-align: center; padding-top: 72px; padding-bottom: 40px; border-bottom: 1px solid var(--at-dark-line); }
.at-footer__brand img { height: 60px; width: auto; margin: 0 auto; filter: brightness(0) invert(.9) sepia(.25); }
.at-footer__brand p { max-width: 520px; margin: 18px auto 0; font-size: 14px; }
.at-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; padding-top: 48px; padding-bottom: 48px; }
.at-footer h2 { font-family: var(--at-sans); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--at-accent-light); font-weight: 500; margin-bottom: 18px; }
.at-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.at-footer__bottom { border-top: 1px solid var(--at-dark-line); font-size: 12px; padding-top: 20px; padding-bottom: 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 760px) {
	.at-wrap { padding-left: 18px; padding-right: 18px; }
	.at-section { margin-top: 88px; }
	.at-section--first { margin-top: 64px; }
	.at-news__lead .at-card__title { font-size: 28px; }
	.at-prose { font-size: 17px; }
	.at-ticker__more { display: none; }
	.at-market__src { align-items: flex-start; }
	.at-table--big th, .at-table--big td { padding: 14px 12px; }
	.at-table--big .price { font-size: 21px; }
	.at-tablebox .at-foot { padding: 14px 12px; }
	.at-showroom { margin-top: 96px; }
	.at-showroom__inner { padding-top: 64px; padding-bottom: 64px; }
	.at-band__inner { padding-top: 56px; padding-bottom: 56px; }
	.at-band__col { flex-basis: 100%; }
}


/* =========================================================================
   v3 – Phong cách trang sức kim cương: trắng tinh, nhiều khoảng thở,
   chữ mảnh, đường kẻ mảnh, xanh ngọc thương hiệu An Thư làm điểm nhấn.
   (Các luật dưới đây ghi đè phần trên.)
   ====================================================================== */
body { font-weight: 300; color: var(--at-ink); }
h1, h2, h3, h4 { font-weight: 400; }
.at-eyebrow { color: var(--at-muted); letter-spacing: .34em; font-size: 10.5px; font-weight: 400; }
.at-link { font-size: 11px; letter-spacing: .24em; color: var(--at-ink); }
.at-link:hover { color: var(--at-accent); }
.at-center { margin-top: 44px; }

/* Nút */
.at-btn { min-height: 46px; padding: 0 34px; font-size: 11px; letter-spacing: .26em; font-weight: 400; background: var(--at-ink); border-color: var(--at-ink); color: #fff; }
.at-btn:hover, .at-btn:focus-visible { background: var(--at-accent); border-color: var(--at-accent); color: #fff; }
.at-btn--ghost { background: transparent; color: var(--at-ink); border-color: var(--at-ink); }
.at-btn--ghost:hover { background: var(--at-ink); color: #fff; border-color: var(--at-ink); }
.at-btn--gold { background: #fff; border-color: #fff; color: var(--at-ink); }
.at-btn--gold:hover { background: var(--at-accent-light); border-color: var(--at-accent-light); color: var(--at-ink); }
.at-btnrow { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.at-iconbtn { border-color: var(--at-line); }

/* Thanh giá vàng: mảnh, sáng */
.at-ticker { background: var(--at-soft); color: var(--at-muted); border-bottom: 1px solid var(--at-line); font-size: 11.5px; }
.at-ticker__label { color: var(--at-accent); }
.at-ticker__item b { color: var(--at-ink); font-weight: 400; }
.at-ticker .up { color: var(--at-up); } .at-ticker .down { color: var(--at-down); }
.at-ticker__more { color: var(--at-ink); }
.at-ticker__more:hover { color: var(--at-accent); }

/* Header */
.at-header { background: #fff; }
.at-header__top { padding-top: 26px; padding-bottom: 18px; }
.at-nav ul { font-size: 11px; letter-spacing: .26em; gap: 44px; padding-bottom: 20px; }
.at-nav a::after { background: var(--at-ink); }
.at-header__tel { color: var(--at-ink); font-size: 11px; letter-spacing: .2em; }

/* Bài tiêu điểm */
.at-cover { padding-top: 0; }
.at-cover__media { display: block; max-width: var(--at-wrap); margin: 0 auto; overflow: hidden; background: var(--at-soft); }
.at-cover__media img { width: 100%; aspect-ratio: 16 / 6; object-fit: cover; transition: transform 1.6s var(--at-ease); }
.at-cover__media:hover img { transform: scale(1.02); }
.at-cover__text { text-align: center; max-width: 860px; padding-top: 44px; }
.at-cover__title { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.18; letter-spacing: .04em; font-weight: 300; margin: 16px 0 18px; }
.at-cover__excerpt { color: var(--at-muted); font-size: 15px; line-height: 1.85; margin: 0 auto 26px; max-width: 640px; }
@media (min-width: 1280px) { .at-cover__media { margin-top: 28px; } }

/* Khối nội dung */
.at-block { padding-top: 110px; }
.at-block--soft { background: var(--at-soft); margin-top: 110px; padding-top: 96px; padding-bottom: 96px; }
.at-block__head { text-align: center; margin-bottom: 52px; }
.at-block__head .at-eyebrow::before, .at-block__head .at-eyebrow::after { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--at-line-3); vertical-align: middle; margin: 0 14px; }
.at-block__title { font-size: clamp(32px, 3.2vw, 44px); font-weight: 300; letter-spacing: .01em; }
.at-tabs--line { display: flex; justify-content: center; gap: 36px; border: 0; margin-top: 30px; flex-wrap: wrap; }
.at-tabs--line button { min-height: 40px; padding: 0 0 6px; background: transparent !important; color: var(--at-muted) !important; border-bottom: 1px solid transparent; font-size: 11px; letter-spacing: .24em; }
.at-tabs--line button[aria-selected=true] { color: var(--at-ink) !important; border-bottom-color: var(--at-ink); }
.at-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 900px) { .at-grid3 { grid-template-columns: 1fr; gap: 36px; } .at-block { padding-top: 80px; } .at-block--soft { margin-top: 80px; padding-top: 72px; padding-bottom: 72px; } }

/* Thẻ bài: tiêu đề chữ in hoa mảnh, kiểu nhà kim hoàn */
.at-card__media { background: var(--at-soft); }
.at-card .at-meta { margin-top: 22px; text-align: center; }
.at-grid3 .at-card { text-align: center; }
.at-card__title { font-family: var(--at-sans); font-size: 13px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; line-height: 1.7; margin: 10px 0 0; }
.at-card__excerpt { display: none; }
.at-meta { font-size: 10px; letter-spacing: .24em; }
.at-meta .at-cat { color: var(--at-accent); font-weight: 400; }
.ratio-16-7 { aspect-ratio: 4 / 3; }

/* Video */
.at-vrow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .at-vrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .at-vrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }
.at-reel { background: #111; }
.at-reel__play { top: auto; bottom: 12px; right: 12px; width: 34px; height: 34px; background: rgba(255,255,255,.92); }
.at-reel__off { background: #fff; color: var(--at-ink); font-weight: 400; letter-spacing: .12em; }
.at-reelcard { text-align: center; }
.at-reelcard__cat { display: none; }
.at-reelcard__title { font-family: var(--at-sans); font-size: 11.5px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; }
.at-reelcard__price { font-size: 13px; }
.at-reelcard__price b { color: var(--at-ink); font-weight: 500; }

/* Giá vàng & tỷ giá gọn */
.at-mini__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; max-width: 980px; margin: 0 auto; }
@media (max-width: 760px) { .at-mini__cols { grid-template-columns: 1fr; gap: 40px; } }
.at-mini__h { font-family: var(--at-sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; margin-bottom: 14px; }
.at-mini__h small { color: var(--at-muted); font-weight: 300; letter-spacing: .08em; text-transform: none; margin-left: 6px; }
.at-table--mini th { font-size: 9.5px; padding-bottom: 10px; }
.at-table--mini td { padding: 12px 0; font-size: 14px; font-weight: 300; }
.at-table--mini td:first-child { font-weight: 400; }

/* Showroom gọn */
.at-showroom { margin-top: 110px; background: var(--at-soft); border: 0; }
.at-showroom__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; text-align: left; padding-top: 72px; padding-bottom: 72px; }
.at-showroom h2 { font-size: clamp(30px, 3vw, 40px); font-weight: 300; margin: 0 0 16px; max-width: none; }
.at-showroom__addr { margin: 0 0 26px; line-height: 1.8; }
.at-showroom .at-btnrow { justify-content: flex-start; }
.at-showroom__shop ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
.at-showroom__shop li { padding: 9px 0; border-bottom: 1px solid var(--at-line); font-size: 14px; break-inside: avoid; }
@media (max-width: 860px) { .at-showroom__inner { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; padding-bottom: 56px; } }

/* Footer sáng */
.at-footer { background: #fff; color: var(--at-muted); border-top: 1px solid var(--at-line); }
.at-footer a { color: var(--at-ink); }
.at-footer a:hover { color: var(--at-accent); }
.at-footer__brand { border-bottom: 1px solid var(--at-line); padding-top: 64px; padding-bottom: 36px; }
.at-footer__brand img { filter: none; height: 54px; }
.at-footer h2 { color: var(--at-ink); font-size: 10px; letter-spacing: .28em; }
.at-footer ul { font-size: 13.5px; gap: 10px; }
.at-footer__bottom { border-top: 1px solid var(--at-line); }

/* Trang video sáng */
.at-vpage { background: #fff; color: var(--at-ink); border-bottom: 1px solid var(--at-line); }
.at-vpage .at-eyebrow { color: var(--at-muted); }
.at-vpage__title { color: var(--at-ink); font-weight: 300; letter-spacing: .01em; }
.at-vpage__price b { color: var(--at-ink); font-weight: 400; }
.at-vpage__price s { color: var(--at-muted); }
.at-vpage__off { border-color: var(--at-accent); color: var(--at-accent); }
.at-vpage .at-btn--gold { background: var(--at-ink); border-color: var(--at-ink); color: #fff; }
.at-vpage .at-btn--gold:hover { background: var(--at-accent); border-color: var(--at-accent); }
.at-vpage .at-btn--line { color: var(--at-ink); border-color: var(--at-ink); }
.at-vpage .at-btn--line:hover { background: var(--at-ink); color: #fff; }
.at-vpage__desc { color: var(--at-muted); border-top-color: var(--at-line); }
.at-vpage__desc a { color: var(--at-accent); }
.at-vpage__facts div { border-bottom-color: var(--at-line); }
.at-vpage__facts dt { color: var(--at-muted); }
.at-vpage__facts dd, .at-vpage__facts a { color: var(--at-ink); }
.at-vpage__video, .at-vpage__player .at-reel { box-shadow: none; }
.at-breadcrumb--dark, .at-breadcrumb--dark a { color: var(--at-muted); }
.at-vhead { background: var(--at-soft); color: var(--at-ink); }
.at-vhead h1 { color: var(--at-ink); font-weight: 300; }
.at-vhead p { color: var(--at-muted); }
.at-vhead .at-eyebrow { color: var(--at-muted); }
.at-vhead .at-chip { color: var(--at-ink); border-color: var(--at-line-3); }
.at-vhead .at-chip[aria-current=page] { background: var(--at-ink); border-color: var(--at-ink); color: #fff; }
.at-chip[aria-pressed=true], .at-chip[aria-current=page] { color: #fff; }

/* Dải tối còn dùng ở trang giá vàng/bài viết: đổi sang đen trung tính */
.at-band .at-eyebrow, .at-darkcard .at-eyebrow { color: var(--at-dark-muted) !important; }
.at-inline-cta { background: var(--at-soft); color: var(--at-ink); }
.at-inline-cta .at-eyebrow { color: var(--at-muted); }
.at-inline-cta .t { color: var(--at-ink); font-weight: 300; }
.at-inline-cta .at-btn { background: var(--at-ink); border-color: var(--at-ink); color: #fff; }

/* Bài viết */
.at-single__title { font-weight: 300; letter-spacing: .03em; }
.at-prose { font-weight: 300; }
.at-prose > p:first-child { font-weight: 400; }
.at-row__title { font-family: var(--at-sans); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; font-weight: 400; }
.at-section__title { font-weight: 300; }
.at-section__head { border-bottom-color: var(--at-line); }

/* v3 – điện thoại: gọn hơn */
@media (max-width: 600px) {
	.at-header__shop { display: none; }
	.at-grid3 { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; }
	.at-grid3 > * { scroll-snap-align: start; }
	.at-cover__media img { aspect-ratio: 16 / 7; }
	.at-cover__text { padding-top: 28px; }
	.at-tabs--line { gap: 10px 22px; }
	.at-block__head { margin-bottom: 36px; }
}
.at-btn--line, .at-btn--line-dark { background: transparent; color: var(--at-ink); border-color: var(--at-ink); }
.at-btn--line:hover, .at-btn--line:focus-visible, .at-btn--line-dark:hover { background: var(--at-ink); color: #fff; border-color: var(--at-ink); }
.at-band .at-btn--line, .at-darkcard .at-btn--line { color: #fff; border-color: rgba(255,255,255,.5); }

/* =====================================================================
   Trang chủ kiểu "Tổng quan" (bento): Tin tức · Video · Giá vàng/Tỷ giá · anthu.vn
   ================================================================== */
.at-bento { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); grid-template-areas: "news reel market" "brand brand brand"; gap: 20px; padding-top: 32px; }
.at-bento__news { grid-area: news; }
.at-bento__reel { grid-area: reel; }
.at-bento__market { grid-area: market; display: grid; grid-template-rows: auto 1fr; gap: 20px; }
.at-bento__brand { grid-area: brand; }

.at-tile { border: 1px solid var(--at-line); background: #fff; padding: 24px 26px; min-width: 0; display: flex; flex-direction: column; }
.at-tile--dark { background: var(--at-night); border-color: var(--at-night); color: var(--at-dark-text); }
.at-tile--soft { background: var(--at-soft); border-color: var(--at-soft); }
.at-tile__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--at-line); }
.at-tile--dark .at-tile__head { border-color: var(--at-dark-line); }
.at-tile__title { font-family: var(--at-sans); font-size: 11px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; }
.at-tile__title::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--at-accent); transform: rotate(45deg); margin: 0 12px 2px 0; vertical-align: middle; }
.at-tile--dark .at-tile__title::before { background: var(--at-accent-light); }
.at-tile__more, .at-tile__note { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--at-muted); white-space: nowrap; }
.at-tile__more:hover { color: var(--at-accent); }
.at-tile--dark .at-tile__more { color: var(--at-dark-muted); }
.at-tile--dark .at-tile__more:hover { color: #fff; }
.at-tile__foot { margin: auto 0 0; padding-top: 14px; font-size: 11.5px; color: var(--at-muted); letter-spacing: .04em; }
.at-tile__foot a { color: var(--at-ink); border-bottom: 1px solid var(--at-line-3); padding-bottom: 2px; }
.at-tile__foot a:hover { color: var(--at-accent); border-color: var(--at-accent); }
.at-tile .at-table--mini td { padding: 10px 0; white-space: nowrap; }
.at-tile .at-table--mini td + td { padding-left: 14px; }
.at-bento__cats { align-content: center; }

/* Tin tức */
.at-bento__lead .at-card__media img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; transition: transform 1.1s var(--at-ease); }
.at-bento__lead:hover .at-card__media img { transform: scale(1.03); }
.at-bento__lead .at-meta { margin-top: 18px; }
.at-bento__leadtitle { font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; line-height: 1.2; margin: 8px 0 0; }
.at-bento__list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--at-line); }
.at-bento__list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--at-line-2); }
.at-bento__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.at-bento__list time { font-family: var(--at-serif); font-style: italic; font-size: 17px; color: var(--at-accent); }
.at-bento__list a { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Video nhỏ tự chạy */
.at-minireel { display: flex; flex-direction: column; flex: 1; }
.at-minireel__frame { position: relative; display: block; aspect-ratio: 9 / 16; max-height: 470px; width: 100%; overflow: hidden; background: #000; }
.at-minireel__frame img, .at-minireel__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.at-minireel__frame video { opacity: 0; transition: opacity .5s; }
.at-minireel__frame.is-playing video { opacity: 1; }
.at-minireel__frame::after { content: ''; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(0,0,0,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 7l8 5-8 5z'/%3E%3C/svg%3E") center / 22px no-repeat; transition: opacity .4s; }
.at-minireel__frame.is-playing::after { opacity: 0; }
.at-minireel__frame:hover::after { opacity: 1; }
.at-minireel__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.18); }
.at-minireel__bar span { display: block; height: 100%; width: 0; background: #fff; }
.at-minireel__info { padding: 14px 0 4px; min-height: 64px; }
.at-minireel__name { margin: 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.at-minireel__price { margin: 4px 0 0; font-size: 13px; color: var(--at-dark-muted); }
.at-minireel__price b { color: #fff; font-weight: 500; }
.at-minireel__price s { margin-left: 8px; }
.at-minireel__ctl { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; }
.at-minireel__ctl .at-iconbtn { width: 38px; height: 38px; }
.at-minireel__count { font-family: var(--at-serif); font-style: italic; font-size: 17px; color: var(--at-dark-muted); }

/* Thông tin anthu.vn */
.at-bento__brand { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 34px 40px; }
.at-bento__brand .at-eyebrow { margin-bottom: 10px; }
.at-bento__brandtitle { font-size: clamp(24px, 2.2vw, 30px); font-weight: 300; line-height: 1.2; margin: 0 0 20px; }
.at-bento__brand .at-btnrow { justify-content: flex-start; gap: 10px; }
.at-bento__brand .at-btn { min-height: 42px; padding: 0 20px; font-size: 11px; }
.at-bento__facts { margin: 0; display: grid; gap: 14px; padding-left: 40px; border-left: 1px solid var(--at-line-3); }
.at-bento__facts dt { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--at-muted); }
.at-bento__facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 300; line-height: 1.5; }
.at-bento__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.at-bento__cats a { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--at-line-3); padding: 11px 0; font-size: 10.5px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; transition: border-color .25s, color .25s; }
.at-bento__cats a::after { content: "→"; color: var(--at-muted); letter-spacing: 0; }
.at-bento__cats a:hover { border-color: var(--at-accent); color: var(--at-accent); }

.at-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.at-grid4 .at-card { text-align: center; }
.at-bento ~ .at-block { padding-top: 88px; }
.at-bento-end { height: 96px; }

@media (max-width: 1100px) {
	.at-bento { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "news reel" "market market" "brand brand"; }
	.at-bento__market { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
	.at-bento__brand { grid-template-columns: 1fr 1fr; }
	.at-bento__cats { grid-column: 1 / -1; }
	.at-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
}
@media (max-width: 720px) {
	.at-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "news" "reel" "market" "brand"; gap: 14px; padding-top: 18px; }
	.at-bento__market { grid-template-columns: 1fr; gap: 14px; }
	.at-tile { padding: 20px 18px; }
	.at-bento__brand { grid-template-columns: 1fr; gap: 24px; padding: 28px 20px; }
	.at-bento__facts { padding-left: 0; border-left: 0; border-top: 1px solid var(--at-line-3); padding-top: 20px; }
	/* video ngang hàng: khung nhỏ bên trái, thông tin bên phải */
	.at-minireel { display: grid; grid-template-columns: 44% minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 0 16px; }
	.at-minireel__frame { grid-row: 1 / 3; }
	.at-minireel__info { padding-top: 0; align-self: start; }
	.at-minireel__ctl { gap: 8px; }
	.at-grid4 { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 70%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; }
	.at-grid4 > * { scroll-snap-align: start; }
	.at-bento ~ .at-block .at-vrow { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; }
	.at-bento ~ .at-block .at-vrow > * { scroll-snap-align: start; }
	.at-bento ~ .at-block { padding-top: 64px; }
	.at-bento-end { height: 64px; }
}