/* Tu luu tren host (tai tu Google Fonts). Chi bo ky tu latin, latin-ext, tieng Viet. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-italic-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:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-italic-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:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-italic-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:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-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: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-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-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:500;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:500;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:500;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-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:600;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:600;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}
/* Hanoi Art Gallery — palette taken from the live site (header gold gradient, brand red band) */
:root {
  --gold: #BD9546;
  --gold-light: #C09751;
  --gold-deep: #A8772D;
  --gold-text: #7A5518;      /* gold darkened for text on light backgrounds (AA contrast) */
  --sand: #DBC3A9;           /* from legacy stylesheet */
  --gold-pale: #F7F1E6;
  --red: #A71D22;
  --red-deep: #830000;
  --red-hover: #8E171B;
  --ink: #222222;
  --ink-2: #444444;
  --muted: #666666;
  --line: #E7DED0;
  --grey: #CCCCCC;
  --paper: #FFFFFF;
  --canvas: #FBF8F3;
  --footer: #1E1A15;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --gutter: clamp(1rem, 4vw, 3rem);
  --radius: 2px;
  --ratio-painting: 3 / 4;   /* painting cards: portrait */
  --ratio-artist: 3 / 4;     /* artist cards + portrait: portrait */
  --ratio-news: 1 / 1;       /* blog cards + about photo: square */
  --zoom-scale: 1.05;        /* hover zoom on thumbnails */
  --zoom-time: .6s;
  --thumb-fit: cover;        /* crop-fill the frame (use "contain" to show the whole artwork) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 76px) + var(--tabbar-h, 0px) + 16px); }
body { margin: 0; font: 400 18px/1.75 var(--sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }   /* <picture> WebP không tạo khung riêng: bố cục giữ nguyên như <img> trần */
a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red-deep); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; color: var(--ink); margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--red); color: #fff; padding: .6rem 1rem; z-index: 999; }
.skip:focus { left: 1rem; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i { width: 1.05em; height: 1.05em; }

/* ---------- buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.8rem; font: 500 1rem/1.2 var(--sans); letter-spacing: .04em; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--red); border-color: var(--red); }
.btn-ghost:hover { background: var(--red); color: #fff; }
.btn-light { color: #fff; border-color: rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .15); }
.btn-light:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn[disabled] { opacity: .6; cursor: wait; }
.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; color: var(--red); text-decoration: none; transition: gap .25s; }
.link-arrow:hover { gap: .75rem; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold-deep) 100%); box-shadow: 0 1px 0 rgba(0, 0, 0, .08); transition: background-color .35s, box-shadow .35s; }
.header-inner { max-width: 1440px; margin: 0 auto; padding: .55rem var(--gutter); display: flex; align-items: center; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand img { width: 58px; height: 58px; transition: width .3s, height .3s; }
.brand-name { font: 600 clamp(1.15rem, 2.2vw, 1.7rem)/1 var(--serif); letter-spacing: .08em; text-transform: uppercase; color: #1B1B1B; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 1.8rem); }
.site-nav a { color: #1B1B1B; text-decoration: none; font-size: 1rem; font-weight: 500; letter-spacing: .02em; padding: .35rem 0; border-bottom: 1px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current] { border-bottom-color: var(--red); color: var(--red-deep); }
.site-nav .nav-cta { background: var(--red); color: #fff; padding: .55rem 1.1rem; border: 0; border-radius: var(--radius); }
.site-nav .nav-cta:hover, .site-nav .nav-cta[aria-current] { background: var(--red-deep); color: #fff; }
.site-nav .lang a { font-size: .85rem; letter-spacing: .1em; border: 1px solid rgba(0, 0, 0, .35); padding: .3rem .55rem; }
.lang-switch, .nav-extra { display: none; }
.nav-toggle { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; color: var(--ink); }
.bars, .bars::before, .bars::after { display: block; width: 24px; height: 2px; background: currentColor; transition: transform .3s, opacity .3s; }
.bars { position: relative; }
.bars::before, .bars::after { content: ''; position: absolute; left: 0; }
.bars::before { top: -7px; }
.bars::after { top: 7px; }
.site-header.is-scrolled .brand img { width: 46px; height: 46px; }
/* kính lúp: máy tính đứng cuối menu ngang, điện thoại đứng trước nút 3 gạch */
.search-toggle { order: 1; display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: .5rem; background: none; border: 0; cursor: pointer; color: #1B1B1B; }
.search-toggle svg { width: 22px; height: 22px; }
.search-toggle:hover, .search-toggle[aria-expanded="true"] { color: var(--red-deep); }
.site-search { background: var(--paper); border-top: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .3); }
.site-search[hidden] { display: none; }
.site-search-inner { max-width: 760px; margin: 0 auto; padding: .7rem var(--gutter); display: flex; gap: .5rem; }
.site-search input { flex: 1; min-width: 0; }
.site-search .btn { flex: none; min-height: 48px; padding: 0 1rem; }
.site-search .btn svg { width: 20px; height: 20px; }

/* Home: header floats over the hero until scrolled */
.page-home .site-header.is-overlay {
  position: fixed; left: 0; right: 0; box-shadow: none;
  background: linear-gradient(to bottom, rgba(18, 11, 6, .62) 0%, rgba(18, 11, 6, .38) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1);
}
.page-home .site-header.is-overlay::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(230, 197, 138, 0) 0%, rgba(230, 197, 138, .55) 30%, rgba(230, 197, 138, .55) 70%, rgba(230, 197, 138, 0) 100%);
}
.page-home .site-header.is-overlay.is-scrolled::after { opacity: 0; }
.page-home .site-header.is-overlay:not(.is-scrolled) .brand-name { text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 16px rgba(0, 0, 0, .6); }
.page-home .site-header.is-overlay .brand-name, .page-home .site-header.is-overlay .site-nav a, .page-home .site-header.is-overlay .nav-toggle, .page-home .site-header.is-overlay .search-toggle { color: #fff; }
.page-home .site-header.is-overlay .site-nav .lang a { border-color: rgba(255, 255, 255, .6); }
.page-home .site-header.is-overlay.is-scrolled { background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold-deep) 100%); box-shadow: 0 2px 12px rgba(0, 0, 0, .12); -webkit-backdrop-filter: none; backdrop-filter: none; }
.page-home .site-header.is-overlay.is-scrolled .brand-name, .page-home .site-header.is-overlay.is-scrolled .site-nav a, .page-home .site-header.is-overlay.is-scrolled .nav-toggle, .page-home .site-header.is-overlay.is-scrolled .search-toggle { color: #1B1B1B; }
.page-home .site-header.is-overlay.is-scrolled .site-nav .nav-cta { color: #fff; }
.page-home .site-header.is-overlay.is-scrolled .site-nav .lang a { border-color: rgba(0, 0, 0, .35); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: clamp(600px, 38vw, 800px); padding-top: 100px; overflow: hidden; background: #140d08; display: flex; align-items: flex-end; }
.hero-media, .hero-shade { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 37% center; opacity: 0; transition: opacity 1.8s ease-in-out; }
.hero-slide.is-active { opacity: 1; animation: kenburns 8s ease-in-out forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
.hero-shade { background: linear-gradient(to top, rgba(28, 14, 6, .88) 0%, rgba(28, 14, 6, .35) 45%, rgba(20, 10, 4, .12) 100%); }
.hero-content { position: relative; z-index: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter) clamp(2.5rem, 6vw, 4.5rem); color: #fff; }
.hero-logo { width: clamp(64px, 7vw, 96px); height: auto; margin-bottom: 1.2rem; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .5)); }
.hero h1 { color: #fff; font-weight: 400; font-size: clamp(2.4rem, 5vw, 4.4rem); letter-spacing: .02em; margin-bottom: .25em; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.hero h1 em { color: #E6C58A; font-style: italic; }
/* Khách thấy dòng vàng nhỏ và nhạt: to hơn, vàng sáng hơn, chữ đứng (nét nghiêng của Cormorant rất mảnh), bóng đổ đậm hơn.
   Font tự lưu chỉ có độ đậm 400 nên không tăng font-weight được. */
.hero-lead {
	font: 400 clamp(1.45rem, 2.5vw, 2.1rem)/1.3 var(--serif); letter-spacing: .01em; color: #F3D089; margin: 0 0 .7rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 2px 18px rgba(0, 0, 0, .6);
}
.hero-sub { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: rgba(255, 255, 255, .85); margin-bottom: 1.8rem; }

/* ---------- trust band (legacy red band) ---------- */
.trust-dots { display: none; }
.trust { background: var(--red); color: #fff; }
.trust-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1440px; display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-grid li { padding: 2.4rem 1.8rem; border-right: 1px solid rgba(255, 255, 255, .18); }
.trust-grid li:last-child { border-right: 0; }
.trust-grid svg { width: 36px; height: 36px; stroke: var(--sand); stroke-width: 1.2; margin-bottom: .9rem; }
.trust-grid h2 { color: #fff; font-size: 1.4rem; margin-bottom: .4rem; }
.trust-grid p { font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, .86); margin: 0; }

/* ---------- sections ---------- */
.section { max-width: 1440px; margin: 0 auto; padding: clamp(2.4rem, 4.5vw, 3.75rem) var(--gutter); }
.section-tint { max-width: none; background: var(--canvas); }
.section-tint > * { max-width: calc(1440px - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.section-flush { padding-top: .5rem; }
.section-head { margin-bottom: clamp(1.2rem, 2.2vw, 1.9rem); }
.page-top .section-head { margin-bottom: .9rem; }
.section-head h1, .section-head h2 { font-size: clamp(2.1rem, 3.6vw, 3rem); font-weight: 400; margin-bottom: .25em; }
.section-head h1::after, .section-head h2::after { content: ''; display: block; width: 56px; height: 2px; margin-top: .6rem; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); }
.section-sub { color: var(--muted); font-size: 1.1rem; margin: .8rem 0 0; }
.eyebrow { font: 600 .8rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin: 0 0 .6rem; }
.eyebrow a { text-decoration: none; }
.section-foot { margin-top: 2.2rem; margin-bottom: 0; }
.page-top { max-width: 1440px; margin: 0 auto; padding: 1.4rem var(--gutter) .25rem; }

.crumbs ol { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; font-size: .9rem; color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: .35rem; color: var(--grey); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--red); }

/* ---------- painting cards ---------- */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2rem 1.4rem; }
.card { position: relative; }
.card a { display: block; color: inherit; text-decoration: none; }
/* Liên kết của tranh phủ kín thẻ, nên bấm chỗ nào cũng vào tranh… */
.card .card-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
/* …trừ liên kết chất liệu: nổi lên trên và gạch chân nhẹ cho biết bấm được. */
.card .card-meta a {
	display: inline; position: relative; z-index: 1; color: inherit;
	text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .28); text-underline-offset: 2px;
}
.card .card-meta a:hover, .card .card-meta a:focus-visible { color: var(--red); text-decoration-color: currentColor; }
.card-media { background: var(--canvas); }
.card .card-media { aspect-ratio: var(--ratio-painting); overflow: hidden; }
.card .card-media img { width: 100%; height: 100%; object-fit: var(--thumb-fit); transition: transform var(--zoom-time) ease; }
.card .card-body { padding-top: .9rem; }
.card .card-title { font-size: 1.35rem; margin: 0 0 .15rem; }
.card .card-link:hover, .card .card-link:focus-visible { color: var(--red); }
.card .card-meta { font-size: .93rem; color: var(--muted); margin: 0; line-height: 1.5; }
.card .card-meta span { display: block; }
.card .card-meta span:first-child { color: var(--ink-2); }
.badge { display: inline-block; font: 600 .7rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: .38rem .6rem; border-radius: 1px; }
.card .badge { margin: .15rem 0 .45rem; }
.badge-ok { background: var(--red); color: #fff; }
.badge-sold { background: #5A5550; color: #fff; }

/* ---------- artists ---------- */
.artist-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2rem 1.4rem; }
.artist-card a { display: block; color: inherit; text-decoration: none; }
.artist-media { aspect-ratio: var(--ratio-artist); overflow: hidden; background: var(--canvas); }
.artist-media img { width: 100%; height: 100%; object-fit: var(--thumb-fit); transition: transform var(--zoom-time) ease; }
.section-tint .artist-media, .section-tint .card-media { background: #fff; }
.artist-overlay { padding-top: .9rem; border-top: 2px solid var(--gold); margin-top: .6rem; }
.artist-overlay h3 { font-size: 1.45rem; margin: 0; }
.artist-card a:hover h3 { color: var(--red); }
.artist-overlay span { color: var(--muted); font-size: .95rem; }

/* ---------- about split ---------- */
.about { background: var(--gold-pale); padding: clamp(3rem, 6vw, 4.5rem) var(--gutter); }
.about-split { max-width: calc(1440px - 2 * var(--gutter)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about-media img { width: 100%; aspect-ratio: var(--ratio-news); object-fit: cover; }
.about-text { display: flex; flex-direction: column; justify-content: center; }
.about-text h2 { font-size: clamp(2.1rem, 3.4vw, 2.8rem); font-weight: 400; }
.about-text p:not(.eyebrow):not(.loc) { color: var(--ink-2); font-size: 1.08rem; }
.loc { display: flex; align-items: center; gap: .5rem; color: var(--red) !important; font-weight: 500; letter-spacing: .02em; }

/* ---------- testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.testi { position: relative; margin: 0; padding: 2.4rem 2rem 2rem; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); }
.testi::before { content: '\201C'; position: absolute; top: .2rem; right: 1.2rem; font: 5rem/1 var(--serif); color: var(--sand); }
.stars { color: var(--gold-deep); letter-spacing: .15em; font-size: .95rem; margin-bottom: .8rem; }
.testi blockquote { margin: 0 0 1.2rem; font: italic 400 1.3rem/1.6 var(--serif); color: var(--ink); }
.testi figcaption { font-size: .98rem; color: var(--muted); }
.testi strong { color: var(--ink); font-weight: 600; }

/* ---------- blog cards ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.6rem; }
.post-card a { display: block; height: 100%; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--line); }
.post-media { aspect-ratio: var(--ratio-news); overflow: hidden; background: var(--canvas); }
.post-media img { width: 100%; height: 100%; object-fit: var(--thumb-fit); transition: transform var(--zoom-time) ease; }

/* Gentle zoom on hover / keyboard focus for every thumbnail */
.card:hover .card-media img, .card:focus-within .card-media img,
.artist-card a:hover .artist-media img, .artist-card a:focus-visible .artist-media img,
.post-card a:hover .post-media img, .post-card a:focus-visible .post-media img { transform: scale(var(--zoom-scale)); }
.post-body { padding: 1.3rem 1.4rem 1.5rem; }
.post-body time { font-size: .85rem; color: var(--gold-text); letter-spacing: .04em; }
.post-body h3 { font-size: 1.45rem; margin: .3rem 0 .5rem; }
.post-card a:hover h3 { color: var(--red); }
.post-body p { color: var(--muted); font-size: 1rem; }

/* ---------- CTA (legacy gold header gradient) ---------- */
.cta { text-align: center; padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter); background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold-deep) 100%); }
.cta > * { max-width: calc(1440px - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.cta h2 { font-size: clamp(2.1rem, 3.6vw, 2.9rem); font-weight: 400; color: #1B1B1B; }
.cta p { margin: 0 auto 2rem; color: #2A2016; font-size: 1.1rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.cta .btn-ghost { color: #1B1B1B; border-color: #1B1B1B; }
.cta .btn-ghost:hover { background: #1B1B1B; color: #fff; }

/* ---------- artwork detail ---------- */
.artwork { max-width: 1440px; margin: 0 auto; padding: .5rem var(--gutter) clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.artwork-media { position: sticky; top: 96px; }
.zoom { position: relative; display: block; width: 100%; padding: clamp(1rem, 3vw, 2.5rem); border: 0; background: var(--canvas); cursor: zoom-in; }
.zoom img { margin: 0 auto; max-height: 78vh; width: auto; object-fit: contain; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45); }
.zoom-hint { position: absolute; right: .8rem; bottom: .8rem; display: inline-flex; align-items: center; gap: .4rem; font: 500 .85rem var(--sans); color: var(--ink); background: rgba(255, 255, 255, .9); padding: .35rem .6rem; }
.artwork-nav { display: flex; justify-content: space-between; margin-top: 1rem; font-size: .95rem; }
.artwork-nav a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--muted); }
.artwork-nav a:hover { color: var(--red); }
.artwork-info h1 { font-size: clamp(2.3rem, 4vw, 3.4rem); font-weight: 400; }
.lead { font-size: 1.15rem; color: var(--ink-2); }
.specs { margin: 1.6rem 0; border-top: 1px solid var(--line); }
.specs div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--muted); font-size: .95rem; }
.specs dd { margin: 0; font-weight: 500; }
.artwork-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: .8rem; }
.call { color: var(--muted); font-size: .98rem; }
.ship-info { list-style: none; padding: 1.2rem 0 0; margin: 1.2rem 0; border-top: 1px solid var(--line); display: grid; gap: .8rem; }
.ship-info li { display: flex; align-items: center; gap: 1rem; font-size: .98rem; color: var(--ink-2); }
.ship-info img { width: 48px; height: auto; }

/* ---------- artist page ---------- */
.artist-hero { max-width: 1440px; margin: 0 auto; padding: .5rem var(--gutter) 2rem; display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
.artist-portrait img { width: 100%; aspect-ratio: var(--ratio-artist); object-fit: var(--thumb-fit); background: var(--canvas); }
/* Biography: portrait photo in a 1/3 column, text in 2/3 */
.section-tint > .bio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.bio-portrait { margin: 0; position: sticky; top: calc(var(--header-h, 76px) + var(--tabbar-h, 56px) + 1.5rem); }
.bio-portrait img { width: auto; max-width: 100%; height: auto; background: #fff; padding: .6rem; box-shadow: 0 20px 40px -24px rgba(40, 20, 5, .45); }
.bio-text > :first-child { margin-top: 0; }
.artist-hero h1 { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 400; }
.count { color: var(--muted); }
.tabbar { position: sticky; top: var(--header-h, 76px); z-index: 30; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: box-shadow .3s; }
.tabbar.is-stuck { box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .35); }
.tabbar-inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 2rem; }
.tabbar-name { font: 500 1.35rem/1 var(--serif); color: var(--ink); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; pointer-events: none; }
.tabbar.is-stuck .tabbar-name { opacity: 1; transform: none; }
.tabbar-links { display: flex; gap: clamp(1.2rem, 3vw, 2.6rem); margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.tabbar-links::-webkit-scrollbar { display: none; }
.tabbar-links a { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: 1.05rem 0; font-size: 1rem; font-weight: 500; letter-spacing: .02em; color: var(--muted); text-decoration: none; white-space: nowrap; }
.tabbar-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transition: transform .3s; }
.tabbar-links a:hover { color: var(--ink); }
.tabbar-links a.is-active { color: var(--red); }
.tabbar-links a.is-active::after { transform: scaleX(1); }
.tabbar-links small { font-size: .78rem; color: var(--gold-text); background: var(--gold-pale); padding: .15rem .45rem; border-radius: 99px; }

/* ---------- prose (CMS content) ---------- */
.prose { font-size: 1.08rem; color: var(--ink-2); }
.prose h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 1.6em 0 .5em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.5rem; margin: 1.4em 0 .4em; }
.prose img { margin: 1.5rem auto; height: auto; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.prose td, .prose th { border: 1px solid var(--line); padding: .5rem .7rem; }
.prose blockquote { margin: 1.5rem 0; padding-left: 1.2rem; border-left: 3px solid var(--gold); font-family: var(--serif); font-size: 1.3rem; font-style: italic; }

.page-top-article { max-width: calc(1000px + 2 * var(--gutter)); }
.article { max-width: calc(1000px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem); }
.article-head { max-width: none; }
.article-head time { color: var(--gold-text); font-size: .92rem; letter-spacing: .03em; }
.article-head h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); font-weight: 400; margin-top: .4rem; }
.article-cover { margin: 2rem 0 2.5rem; }
.article-cover img { width: 100%; }
.article-body { margin: 0; font-size: 1.12rem; }

.general { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.general-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.general:not(:has(.contact-card)) { grid-template-columns: 1fr; }
.general-intro .general-main { grid-template-columns: minmax(0, 1fr); }
.general-main:not(:has(.page-cover)) { grid-template-columns: minmax(0, 1fr); }
/* About page: one 1000px content column from the title down to the visit block */
.page-cover { margin: 0; }
.page-cover img { width: 100%; }
.contact-card { background: var(--gold-pale); border-top: 3px solid var(--gold); padding: 1.8rem; position: sticky; top: 100px; }
.contact-card h2 { font-size: 1.6rem; }
.contact-card p { display: flex; gap: .6rem; align-items: flex-start; font-size: 1rem; }
.contact-card svg { margin-top: .35rem; color: var(--red); }

/* ---------- visit us (about page) ---------- */
.visit { background: var(--gold-pale); padding: clamp(3.5rem, 7vw, 6rem) var(--gutter); }
.visit-inner { max-width: calc(1440px - 2 * var(--gutter)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
.visit-media { margin: clamp(2rem, 4vw, 3.5rem) 0; position: relative; z-index: 1; min-height: 360px; }
.visit-media img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 30px 60px -30px rgba(40, 20, 5, .55); }
.visit-card { position: relative; z-index: 2; margin-left: -4rem; background: #fff; border-top: 3px solid var(--gold); padding: clamp(1.8rem, 4vw, 3rem); box-shadow: 0 24px 50px -28px rgba(40, 20, 5, .35); }
.visit-card h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 400; margin-bottom: .4rem; }
.visit-lead { color: var(--muted); font-size: 1rem; }
.visit-name { display: flex; flex-direction: column; padding: 1rem 0; margin: .4rem 0 .6rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.visit-name strong { font: 600 1.15rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.visit-name span { font-size: .95rem; color: var(--muted); }
.visit-list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.visit-list li { display: flex; gap: .9rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px dashed var(--line); }
.visit-list li:last-child { border-bottom: 0; }
.visit-list svg { width: 1.25rem; height: 1.25rem; margin-top: .2rem; color: var(--gold-deep); }
.visit-list div { display: flex; flex-direction: column; }
.visit-k { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.visit-v { font-size: 1.05rem; color: var(--ink); }
.visit-v a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--sand); }
.visit-v a:hover { color: var(--red); border-color: var(--red); }
.visit-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn svg { width: 1.1em; height: 1.1em; }

/* ---------- forms ---------- */
.enquiry { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--red); padding: clamp(1.4rem, 4vw, 2.6rem); }
.form-title { font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 400; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.field { margin: 0 0 1.1rem; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { display: block; font-size: .92rem; font-weight: 500; margin-bottom: .35rem; color: var(--ink-2); }
.field abbr { color: var(--red); text-decoration: none; }
input, select, textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid #CFC5B6; border-radius: var(--radius); padding: .7rem .8rem; min-height: 48px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold-deep); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red); }
.radio { display: inline-flex !important; align-items: center; gap: .45rem; margin-right: 1.4rem; font-weight: 400 !important; }
.radio input { width: auto; min-height: 0; }
.form-note { font-size: .88rem; color: var(--muted); }
.form-status { margin: 1rem 0 0; font-weight: 500; }
.form-status.ok { color: #1E6B35; }
.form-status.err { color: var(--red); }
.enquiry.is-sent > :not(.form-status) { display: none; }
.enquiry.is-sent .form-status { margin: 0; padding: 1.2rem 0; font-size: 1.15rem; text-align: center; }

/* ---------- trang chuyên mục theo chất liệu ---------- */
.medium-intro { max-width: none; margin: 0 0 .6rem; position: relative; }
.medium-below { max-width: 72ch; margin: 3rem auto 1rem; }
.medium-faq { margin-top: 2rem; }
.medium-faq h3 { margin-top: 1.2em; }
.medium-intro p { margin: 0 0 1rem; color: var(--ink-2); }
.medium-intro p:last-child { margin-bottom: 0; }
/* Nội dung dài thì thu gọn, site.js gắn lớp — không có JS vẫn hiện đủ chữ. */
.medium-intro.is-clamped { max-height: 8.4rem; overflow: hidden; }
.medium-intro.is-clamped::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.4rem; pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--paper));
}
.medium-intro.is-open { max-height: none; }
.medium-intro.is-open::after { display: none; }
.intro-toggle {
	display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 1.6rem; padding: 0;
	background: none; border: 0; cursor: pointer; color: var(--red);
	font: 500 .95rem/1 var(--sans); letter-spacing: .02em; text-decoration: underline; text-underline-offset: 3px;
}
.intro-toggle:hover { color: var(--red-deep); }
/* Mũi tên vẽ bằng viền, không dùng ký tự — font tự lưu không có sẵn dấu "›". */
.intro-toggle::after {
	content: ""; width: .4em; height: .4em; margin-top: -.22em;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .25s, margin-top .25s;
}
.intro-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: .14em; }
.medium-foot { display: flex; flex-wrap: wrap; gap: 1.2rem 2.2rem; }
.article-cta { margin: 2rem 0 0; padding: 1rem 1.2rem; background: var(--canvas); border-left: 3px solid var(--gold); }
.article-cta p { margin: 0; font-size: .98rem; }
.article-cta a { color: var(--red); }
.article-cta span { margin: 0 .3rem; opacity: .5; }
.medium-links { margin: -.6rem 0 1.4rem; font-size: .95rem; color: var(--muted); }
.medium-links a { color: var(--red); }
.medium-links span { margin: 0 .3rem; opacity: .5; }

/* ---------- kết quả tìm & pager ---------- */
.search-results { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.2rem; }
.search-results .btn { min-height: 40px; padding: .4rem .9rem; font-size: .9rem; }
.search-results .btn[hidden] { display: none; }
.search-results:has(> .btn[hidden]) { margin-bottom: 0; }
.filter-status { margin: 0; font-size: .95rem; color: var(--muted); }
.filter-status:empty { display: none; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: 3rem; }
.pager a, .pager span { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .6rem; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.pager a:hover { border-color: var(--red); color: var(--red); }
.pager [aria-current] { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- footer ---------- */
.site-footer { background: var(--footer); color: #CFC6B8; border-top: 4px solid var(--gold); }
/* Mẫu chân trang khách duyệt 24/09/2026: hàng trên (thương hiệu | Khám phá | Dành cho nhà sưu tầm),
   hàng giữa (Liên hệ | Thanh toán | Vận chuyển), hàng cuối (bản quyền | chính sách | lên đầu). */
.footer-top, .footer-mid { max-width: 1440px; margin: 0 auto; padding: 3.5rem var(--gutter) 2.5rem; display: grid; }
.footer-top { grid-template-columns: 1.5fr 1fr 1.2fr; }
.footer-mid { grid-template-columns: 1.3fr 1fr 1fr; padding-top: 2.5rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-col { padding: 0 2rem; border-left: 1px solid rgba(255, 255, 255, .1); }
.footer-top > :first-child, .footer-mid > :first-child { padding: 0 2rem 0 0; border-left: 0; }
.footer-col > p { font-size: .95rem; line-height: 1.6; margin: 0 0 .8rem; }
.footer-brand img { width: 56px; height: 56px; margin-bottom: .8rem; }
.footer-name { font: 600 1.4rem/1.2 var(--serif); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-light); margin-bottom: .6rem; }
.footer-brand p:not(.footer-name) { font-size: .98rem; }
.footer-h { font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 1.1rem; }
.footer-links, .footer-contact, .footer-social, .footer-legal { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .5rem; }
.site-footer a { color: #EDE6DA; text-decoration: none; }
.site-footer a:hover { color: var(--gold-light); text-decoration: underline; }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .7rem; font-size: .98rem; }
.footer-contact svg { margin-top: .4rem; color: var(--gold-light); }
.footer-social { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.3rem; }
.footer-social a { display: inline-flex; align-items: center; gap: .5rem; color: var(--gold-light); text-decoration: none; }
.footer-social a:hover { color: #fff; }
.footer-social svg { width: 22px; height: 22px; }
.footer-logo { background: #fff; padding: 4px; max-height: 56px; width: auto; margin: .2rem 0 .8rem; }
.site-footer .footer-more { color: var(--gold-light); display: inline-flex; gap: .4rem; align-items: center; }
.site-footer .footer-more svg { width: 16px; height: 16px; margin: 0; }
.footer-bottom { max-width: 1440px; margin: 0 auto; padding: 1.2rem var(--gutter); border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; font-size: .88rem; color: #A89F92; }
.footer-legal { display: flex; flex-wrap: wrap; row-gap: .3rem; }
.footer-legal li + li::before { content: "|"; margin: 0 .7rem; color: rgba(255, 255, 255, .25); }

.qc { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.qc-toggle { width: 58px; height: 58px; border: 0; border-radius: 50%; background: var(--red); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 22px -6px rgba(131, 0, 0, .55); transition: background-color .25s, transform .25s; }
.qc-toggle:hover { background: var(--red-deep); transform: translateY(-2px); }
.qc-toggle svg { grid-area: 1 / 1; width: 26px; height: 26px; stroke-width: 1.6; transition: opacity .25s, transform .3s; }
.qc-toggle .i-close { opacity: 0; transform: rotate(-90deg); }
.qc.is-open .qc-toggle .i-open { opacity: 0; transform: rotate(90deg); }
.qc.is-open .qc-toggle .i-close { opacity: 1; transform: none; }
.qc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; visibility: hidden; }
.qc-list li { opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .25s, transform .25s; }
.qc.is-open .qc-list { visibility: visible; }
.qc.is-open .qc-list li { opacity: 1; transform: none; }
.qc.is-open .qc-list li:nth-last-child(2) { transition-delay: .04s; }
.qc.is-open .qc-list li:nth-last-child(3) { transition-delay: .08s; }
.qc.is-open .qc-list li:nth-last-child(4) { transition-delay: .12s; }
.qc-item { display: inline-flex; align-items: center; gap: .6rem; height: 46px; padding: 0 1.1rem 0 .5rem; border-radius: 99px; background: #fff; color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 500; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .3); }
.qc-item svg { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--red); color: #fff; stroke-width: 1.7; }
.qc-item:hover { color: var(--red); }

.modal { width: min(640px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; overflow: auto; background: #fff; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
.modal::backdrop { background: rgba(20, 12, 6, .65); }
.modal .enquiry { border: 0; padding-top: 0; }
.modal-contacts { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.2rem; margin: 0; padding: 1.1rem 4rem 1rem clamp(1.4rem, 4vw, 2.6rem); font-size: .95rem; background: var(--gold-pale); border-top: 3px solid var(--red); }
.modal-contacts svg { color: var(--red); margin-right: -.8rem; }
.modal-contacts a { color: var(--ink); text-decoration: none; }
.modal-contacts a:hover { color: var(--red); }
.modal-close { position: absolute; top: .55rem; right: .6rem; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; z-index: 1; }
.modal-close:hover { color: var(--red); }
.modal-close svg { width: 22px; height: 22px; }
.modal .form-title { padding-top: 1.4rem; }

.notfound { text-align: center; }
.notfound h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.notfound .grid { margin-top: 3rem; text-align: left; }

dialog.lightbox { padding: 0; border: 0; max-width: 96vw; max-height: 96vh; background: transparent; }
dialog.lightbox::backdrop { background: rgba(10, 8, 6, .92); }
dialog.lightbox img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; }
dialog.lightbox button { position: fixed; top: 1rem; right: 1rem; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #fff; font-size: 1.6rem; cursor: pointer; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .site-nav a { font-size: .95rem; }
  .brand-name { display: none; }
}
@media (max-width: 1024px) {
  .header-inner { gap: .6rem; }
  .lang-switch { display: inline-flex; align-items: center; padding: 3px; border: 1px solid rgba(27, 27, 27, .35); border-radius: 99px; background: rgba(255, 255, 255, .18); flex: none; }
  .lang-switch a { min-width: 42px; height: 34px; padding: 0 .75rem; display: grid; place-items: center; border-radius: 99px; font: 600 .8rem/1 var(--sans); letter-spacing: .1em; color: #1B1B1B; text-decoration: none; transition: background-color .25s, color .25s; }
  .lang-switch a:hover { color: var(--red-deep); }
  .lang-switch a[aria-current] { background: var(--red); color: #fff; box-shadow: 0 2px 6px -2px rgba(131, 0, 0, .6); }
  .page-home .site-header.is-overlay:not(.is-scrolled) .lang-switch { border-color: rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .18); }
  .page-home .site-header.is-overlay:not(.is-scrolled) .lang-switch a:not([aria-current]) { color: #fff; }
  .site-nav .lang { display: none; }
  .nav-open .lang-switch, .nav-open .search-toggle { visibility: hidden; }
  .search-toggle { order: 0; }
  .visit { padding-top: clamp(2.5rem, 6vw, 4rem); }
  .visit-media { margin: 0; min-height: 0; }
  .visit-media img { height: auto; aspect-ratio: 4 / 3; }
  .visit-inner { grid-template-columns: 1fr; }
  .visit-card { margin: -3rem 1rem 0; }
  .grid, .artist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid li:nth-child(2) { border-right: 0; }
  .trust-grid li:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .18); }
  .footer-top { grid-template-columns: 1fr 1fr; row-gap: 2.2rem; }
  .footer-top > .footer-brand { grid-column: 1 / -1; padding: 0; }
  .footer-top > .footer-col:nth-child(2) { padding-left: 0; border-left: 0; }
  .footer-mid { grid-template-columns: 1fr 1fr; row-gap: 2.2rem; }
  .footer-mid > :first-child { grid-column: 1 / -1; padding: 0; }
  .footer-mid > .footer-col:nth-child(2) { padding-left: 0; border-left: 0; }
  .general, .general-main { grid-template-columns: 1fr; }
  .contact-card { position: static; }
  .brand-name { display: inline; }
  .nav-toggle { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
  .site-nav { position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); background: var(--paper); padding: 5.5rem 1.8rem 2rem; transform: translateX(100%); visibility: hidden; transition: transform .35s ease, visibility .35s; box-shadow: -10px 0 30px rgba(0, 0, 0, .15); overflow-y: auto; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--line); }
  .site-nav a, .page-home .site-header.is-overlay .site-nav a { display: block; padding: .9rem 0; color: var(--ink); font-size: 1.1rem; }
  .site-nav .nav-cta { text-align: center; margin: 1rem 0; color: #fff !important; }
  .site-nav .lang { border: 0; padding-top: 1rem; }
  .site-nav .lang a, .page-home .site-header.is-overlay .site-nav .lang a { display: inline-block; width: auto; padding: .45rem 1rem; font-size: .9rem; color: var(--ink); border: 1px solid var(--ink) !important; }
  .nav-open .site-nav { transform: none; visibility: visible; }
  .nav-open body::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(20, 12, 6, .55); }
  .nav-open .qc { visibility: hidden; }
  .nav-toggle { position: relative; z-index: 60; }
  .nav-open .nav-toggle { color: var(--ink) !important; }
  .nav-open .bars { background: transparent; }
  .nav-open .bars::before { transform: translateY(7px) rotate(45deg); }
  .nav-open .bars::after { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 900px) {
  .artwork { grid-template-columns: 1fr; }
  .artwork-media { position: static; }
  .artist-hero { grid-template-columns: 1fr; }
  .section-tint > .bio { grid-template-columns: 1fr; }
  .bio-portrait { position: static; }
  .artist-portrait { max-width: none; }
}
@media (max-width: 768px) {
  .footer-mid { grid-template-columns: 1fr; }
  .footer-mid > .footer-col { padding: 0; border-left: 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-top > .footer-col:nth-child(2) { padding-right: .8rem; }
  .footer-top > .footer-col:nth-child(3) { padding-left: .9rem; }
  .footer-top .footer-h { font-size: 1.05rem; letter-spacing: .04em; }
  .footer-top .footer-links { font-size: .95rem; }
  .footer-legal { column-gap: 1.2rem; }
  .footer-legal li + li::before { content: none; }
  body { font-size: 17px; }
  .grid, .artist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
  .card .card-title { font-size: 1.15rem; }
  .about-split { grid-template-columns: 1fr; }
  .about-media { max-width: none; }
  .testi-grid, .post-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .brand img { width: 46px; height: 46px; }
  .brand-name { font-weight: 700; font-size: 1.3rem; letter-spacing: .045em; }
  .specs div { grid-template-columns: 7.5rem 1fr; }
  /* phones: quick contacts become a bottom bar */
  body { padding-bottom: 64px; }
  .qc { left: 0; right: 0; bottom: 0; gap: 0; }
  .qc-toggle { display: none; }
  .qc-list { visibility: visible; flex-direction: row; width: 100%; gap: 0; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px -10px rgba(0, 0, 0, .25); padding-bottom: env(safe-area-inset-bottom); }
  .qc-list li { flex: 1; opacity: 1; transform: none; }
  .qc-item { width: 100%; height: 64px; flex-direction: column; justify-content: center; gap: .15rem; padding: 0; border-radius: 0; box-shadow: none; font-size: .75rem; }
  .qc-item svg { width: 26px; height: 26px; padding: 0; background: none; color: var(--red); }
  .qc-list li + li .qc-item { border-left: 1px solid var(--line); }
  .tabbar-name { display: none; }
  .tabbar-links { margin-left: 0; width: 100%; justify-content: space-between; }
  .visit-card { margin: -2rem 0 0; }
  .hero-logo { display: none; }
  /* Trang chủ trên điện thoại: 4 tranh nổi bật + 4 họa sĩ (nút "Xem tất cả" vẫn ở dưới) */
  .page-home .grid > .card:nth-child(n+5), .page-home .artist-grid > .artist-card:nth-child(n+5) { display: none; }
}
/* ---------- điện thoại: thu gọn dải đỏ và bộ lọc (trước đây chỉ chạy dưới 374px nên thực tế không có tác dụng) ---------- */
@media (max-width: 768px) {
  /* vuốt ngang: mỗi lần một ô, ô kế tiếp ló ra để người dùng biết còn nữa */
  .trust-grid {
    display: flex; grid-template-columns: none; gap: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .trust-grid::-webkit-scrollbar { display: none; }
  .trust-grid li {
    /* scroll-snap-stop: always → một lần vuốt chỉ nhảy đúng một ô, vuốt mạnh cũng không lướt qua nhiều ô */
    flex: 0 0 90%; scroll-snap-align: start; scroll-snap-stop: always;
    border-right: 1px solid rgba(255, 255, 255, .18); border-bottom: 0;
    padding: .8rem .95rem .75rem; display: grid; grid-template-columns: 20px 1fr; column-gap: .6rem; align-items: start;
  }
  .trust-grid li:last-child { border-right: 0; }
  .trust-grid svg { width: 19px; height: 19px; margin: .15rem 0 0; grid-row: span 2; }
  .trust-grid h2 { font-size: .98rem; line-height: 1.25; margin-bottom: .1rem; }
  .trust-grid p { font-size: .8rem; line-height: 1.4; }
  .trust-dots { display: flex; justify-content: center; gap: .45rem; padding: .1rem 0 .7rem; background: var(--red); }
  .trust-dots button {
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .35); transition: background-color .25s, transform .25s;
  }
  .trust-dots button.is-on { background: var(--sand); transform: scale(1.35); }

  /* kéo lưới lên gần tiêu đề trang (trên điện thoại khoảng trống này quá rộng) */
  .page-top { padding-bottom: .25rem; }
  .page-top .section-head { margin-bottom: .75rem; }
  .section-flush { padding-top: .5rem; }

}
@media (max-width: 480px) {
  .brand { gap: .45rem; min-width: 0; }
  .brand img { width: 34px; height: 34px; }
  .site-header.is-scrolled .brand img { width: 33px; height: 33px; }
  /* nhường hết chỗ thừa cho tên phòng tranh: lề hẹp lại, khoảng cách giữa các khối nhỏ lại */
  .header-inner { padding-left: .7rem; padding-right: .7rem; gap: .5rem; }
  /* khách thấy chữ mờ nhạt: đậm hơn, to hơn, bỏ bớt giãn chữ để vẫn đủ chỗ trên một dòng */
  .brand-name { font-weight: 700; font-size: 1.12rem; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lang-switch a { min-width: 30px; padding: 0 .35rem; font-size: .74rem; }
  .nav-toggle { width: 34px; height: 44px; padding: 0; display: grid; place-items: center; margin-right: -.2rem; }
}
@media (max-width: 374px) {
  .brand img, .site-header.is-scrolled .brand img { width: 31px; height: 31px; }
  .brand-name { font-size: .86rem; letter-spacing: -.01em; }
  .lang-switch a { min-width: 28px; height: 32px; padding: 0 .3rem; font-size: .72rem; }
  .hero { min-height: min(82svh, 700px); }
}
/* ---------- hiệu ứng khi cuộn (site.js gắn lớp .reveal cho phần tử nằm dưới màn hình lúc tải) ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .65, .3, 1); transition-delay: var(--rd, 0s); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-img img { transform: scale(1.06); transition: transform 1.4s cubic-bezier(.2, .65, .3, 1); }
.reveal-img.is-in img { transform: scale(1); }

/* ---------- menu điện thoại kiểu luxury: nền nâu đen ấm → đỏ rượu vang, chữ serif kem, điểm nhấn vàng đồng ---------- */
@media (max-width: 1024px) {
  html.nav-open { overflow: hidden; }
  .nav-open body::after { display: none; }
  .site-nav {
    inset: 0; width: 100%; padding: 6.2rem clamp(1.6rem, 7vw, 3rem) 2rem; display: flex; flex-direction: column;
    background:
      radial-gradient(110% 55% at 100% 0%, rgba(192, 151, 81, .22), transparent 60%),
      radial-gradient(90% 60% at 0% 100%, rgba(131, 0, 0, .45), transparent 65%),
      linear-gradient(165deg, #231a13 0%, #17110d 55%, #230b0c 100%);
    box-shadow: none; transform: none; opacity: 0; transition: opacity .45s ease, visibility .45s;
  }
  .site-nav::before { content: ""; position: absolute; left: clamp(1.6rem, 7vw, 3rem); right: clamp(1.6rem, 7vw, 3rem); top: 5.2rem; height: 1px; background: linear-gradient(90deg, rgba(192, 151, 81, .9), rgba(192, 151, 81, 0)); }
  .nav-open .site-nav { opacity: 1; }
  .site-nav ul { counter-reset: m; }
  .site-nav li { counter-increment: m; border-bottom: 1px solid rgba(219, 195, 169, .14); opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .65, .3, 1); }
  .nav-open .site-nav li { opacity: 1; transform: none; }
  .nav-open .site-nav li:nth-child(1) { transition-delay: .08s; } .nav-open .site-nav li:nth-child(2) { transition-delay: .13s; }
  .nav-open .site-nav li:nth-child(3) { transition-delay: .18s; } .nav-open .site-nav li:nth-child(4) { transition-delay: .23s; }
  .nav-open .site-nav li:nth-child(5) { transition-delay: .28s; } .nav-open .site-nav li:nth-child(6) { transition-delay: .33s; }
  .nav-open .site-nav li:nth-child(7) { transition-delay: .38s; } .nav-open .site-nav li:nth-child(8) { transition-delay: .43s; }
  .site-nav a, .page-home .site-header.is-overlay .site-nav a, .page-home .site-header.is-overlay.is-scrolled .site-nav a {
    display: flex; align-items: baseline; gap: 1rem; padding: .7rem 0; border: 0; color: #F3EBDD;
    font: 400 clamp(1.7rem, 7.2vw, 2.3rem)/1.15 var(--serif); letter-spacing: .01em;
  }
  .site-nav a::before { content: counter(m, decimal-leading-zero); font: 500 .7rem/1 var(--sans); letter-spacing: .16em; color: var(--gold-light); min-width: 1.6rem; transform: translateY(-.35em); }
  .site-nav a:hover, .site-nav a[aria-current], .page-home .site-header.is-overlay .site-nav a[aria-current] { color: #E6C58A; font-style: italic; border: 0; }
  .site-nav li:has(.nav-cta) { border-bottom: 0; padding-top: 1.6rem; }
  .site-nav .nav-cta, .page-home .site-header.is-overlay .site-nav .nav-cta, .page-home .site-header.is-overlay.is-scrolled .site-nav .nav-cta {
    justify-content: center; padding: 1rem 1.2rem; background: transparent; border: 1px solid rgba(192, 151, 81, .75) !important; border-radius: 2px;
    font: 500 .85rem/1 var(--sans) !important; letter-spacing: .22em; text-transform: uppercase; color: #E6C58A !important; font-style: normal !important;
  }
  .site-nav .nav-cta::before { content: none; }
  .site-nav .nav-cta:hover, .site-nav .nav-cta[aria-current] { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); color: #1B1B1B !important; }
  .nav-extra { display: grid; gap: .7rem; margin-top: auto; padding-top: 2rem; opacity: 0; transition: opacity .6s ease .45s; }
  .nav-open .nav-extra { opacity: 1; }
  .nav-extra a, .nav-extra p, .page-home .site-header.is-overlay .nav-extra a { display: flex; align-items: flex-start; gap: .7rem; margin: 0; padding: 0; font: 400 .92rem/1.5 var(--sans); letter-spacing: .01em; color: rgba(243, 235, 221, .78); }
  .nav-extra a::before { content: none; }
  .nav-extra a:hover { color: #E6C58A; font-style: normal; }
  .nav-extra svg { width: 1.05rem; height: 1.05rem; margin-top: .2rem; color: var(--gold-light); flex: none; }
  /* logo, nút ngôn ngữ, nút đóng nổi trên nền tối */
  .nav-open .brand, .nav-open .lang-switch { position: relative; z-index: 60; visibility: visible; }
  .nav-open .brand-name { color: #F3EBDD !important; }
  .nav-open .nav-toggle { color: #F3EBDD !important; }
  .nav-open .lang-switch { border-color: rgba(192, 151, 81, .6); background: rgba(255, 255, 255, .04); }
  .nav-open .lang-switch a:not([aria-current]) { color: #F3EBDD; }
  /* backdrop-filter của header tạo containing block cho position:fixed → tủ menu bị cắt còn đúng chiều cao header.
     Khi mở menu phải tắt nó đi (tủ đã che kín trang nên không mất hiệu ứng gì). */
  .nav-open .site-header, .page-home .nav-open .site-header.is-overlay {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .nav-open .site-header.is-overlay::after { opacity: 0; }
}
@media (max-width: 1024px) and (max-height: 720px) {
  .site-nav { padding-top: 5.4rem; padding-bottom: 1.2rem; }
  .site-nav::before { top: 4.6rem; }
  .site-nav a, .page-home .site-header.is-overlay .site-nav a, .page-home .site-header.is-overlay.is-scrolled .site-nav a { font-size: 1.55rem; padding: .45rem 0; }
  .site-nav li:has(.nav-cta) { padding-top: 1rem; }
  .site-nav .nav-cta, .page-home .site-header.is-overlay .site-nav .nav-cta { padding: .8rem 1rem; }
  .nav-extra { padding-top: 1.2rem; gap: .45rem; }
  .nav-extra a, .nav-extra p, .page-home .site-header.is-overlay .nav-extra a { font-size: .85rem; }
}

/* ---------- thanh liên hệ dưới đáy (điện thoại): thanh nổi tông tối + vàng đồng, tự ẩn khi cuộn xuống ---------- */
@media (max-width: 768px) {
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  .qc { left: 14px; right: 14px; bottom: calc(7px + env(safe-area-inset-bottom)); transition: transform .45s cubic-bezier(.2, .65, .3, 1), opacity .35s ease; }
  .qc.is-hidden { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
  .qc-list {
    padding: 2px; gap: 2px; border-radius: 11px; border: 1px solid rgba(192, 151, 81, .38); border-top: 1px solid rgba(192, 151, 81, .55);
    background: linear-gradient(165deg, rgba(38, 29, 21, .93) 0%, rgba(22, 16, 12, .95) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  .qc-list li + li .qc-item { border-left: 0; }
  .qc-item {
    height: 36px; gap: .12rem; border-radius: 9px; background: transparent; color: rgba(243, 235, 221, .86);
    font: 500 .52rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; transition: background-color .25s, color .25s;
  }
  .qc-item svg { width: 15px; height: 15px; color: var(--gold-light); stroke-width: 1.6; }
  .qc-item:hover, .qc-item:active { background: rgba(255, 255, 255, .07); color: #E6C58A; }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
  :root { --zoom-scale: 1; }
}
@media print {
  .site-header, .site-footer, .qc, .modal, .tabbar, .enquiry, .site-search, .search-results { display: none; }
}