:root {
    --sh2-ink: #211914;
    --sh2-muted: #6f6257;
    --sh2-cream: #f4eadb;
    --sh2-paper: #fbf6ed;
    --sh2-line: #cbb9a2;
    --sh2-red: #8d1815;
    /* Bảng "Ivory Contrast" cho chữ trên banner */
    --sh2-banner-tieu-de: #f7e9d3;
    --sh2-banner-chu: #f4e8d6;
    --sh2-nut-nen: #8d1818;
    --sh2-nut-chu: #fff4e7;
    --sh2-deep-red: #65100f;
    --sh2-gold: #9c673e;
    --sh2-serif: "Cormorant Garamond", Georgia, serif;
    --sh2-sans: "Manrope", Arial, sans-serif;
    /* /demo4 dùng Inter cho dòng nhãn nhỏ và link chữ */
    --sh2-ui: "Inter", "Manrope", Arial, sans-serif;
}

html { scroll-behavior: smooth; }
body.sh2-page {
    margin: 0;
    color: var(--sh2-ink);
    background: var(--sh2-paper);
    font-family: var(--sh2-sans);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0;
}
body.sh2-page *, body.sh2-page *::before, body.sh2-page *::after { box-sizing: border-box; }
body.sh2-page img { display: block; max-width: 100%; }
body.sh2-page a { color: inherit; text-decoration: none; }
body.sh2-page button { color: inherit; font: inherit; }
.sh2 { min-width: 0; overflow: hidden; background: var(--sh2-paper); }
.sh2 h1, .sh2 h2, .sh2 h3, .sh2 p { margin-top: 0; }
.sh2 h1, .sh2 h2, .sh2 h3 { font-family: var(--sh2-serif); font-weight: 500; line-height: .96; }

.sh2-header {
    position: absolute;
    z-index: 50;
    top: 0;
    left: 0;
    right: 0;
    height: 126px;
    display: grid;
    /* Giống /silver-house: hai cột ngoài bằng nhau nên logo ở giữa luôn cân
       tuyệt đối, không phụ thuộc bề ngang menu hay cụm nút bên phải. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 30px;
    padding: 0 56px;
    /* Mẫu banner: header không có nền riêng, nó nằm đè lên phần trần sáng của
       ảnh. Chỉ phủ một lớp kem mờ rất nhẹ từ trên xuống để chữ luôn đọc được
       kể cả khi ảnh banner sau này được thay bằng ảnh tối hơn. */
    background: linear-gradient(180deg, rgba(248, 239, 226, .82), rgba(248, 239, 226, .34) 70%, rgba(248, 239, 226, 0));
    border-bottom: 0;
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.sh2-header.is-sticky {
    position: fixed;
    height: 88px;
    background: #f8efe2;
    box-shadow: 0 8px 28px rgba(45, 25, 15, .1);
}
body.admin-bar .sh2-header.is-sticky { top: 32px; }
/* Logo lấy từ /silver-house là ảnh gần vuông (114×112) chứ không phải
   khối chữ nằm ngang như bản cũ, nên bề ngang phải nhỏ lại để chiều cao
   vừa trong thanh header 102px, và nhỏ thêm khi header thu gọn. */
/* Logo nằm giữa và to hơn hẳn bản trước (78px). */
.sh2-logo { justify-self: center; width: 100px; transition: width .3s ease; }
.sh2-header.is-sticky .sh2-logo { width: 68px; }
/* Logo đã được xoá nền trắng nên không cần mix-blend-mode nữa —
   trước đây header có nền đặc nên không thấy, giờ header trong suốt
   thì khối trắng của ảnh lộ thành một ô sáng trên nền ảnh banner. */
.sh2-logo img { width: 100%; height: auto; }
/* Menu trái bám sát logo, menu phải cũng vậy — cụm nút bị đẩy ra mép. */
.sh2-nav { display: flex; align-items: center; gap: 18px; }
.sh2-nav-left { justify-content: flex-end; }
.sh2-nav-right { justify-content: flex-start; }
.sh2-header-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
}
.sh2-nav a {
    position: relative;
    padding: 12px 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}
.sh2-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 7px;
    height: 1px;
    background: var(--sh2-red);
    transition: right .25s ease;
}
.sh2-nav a:hover::after, .sh2-nav a:focus-visible::after { right: 0; }
.sh2-header-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.sh2-icon-btn, .sh2-menu-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.sh2-icon-btn { display:inline-grid; place-items:center; font-family: var(--sh2-serif); font-size: 27px; line-height: 1; }
.sh2 .sh2-card-link { display:block; width:fit-content; margin-top:10px; padding-block:5px; font:500 12px/1.5 var(--sh2-sans); color:inherit; text-decoration:underline; text-underline-offset:4px; }
.sh2 a:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.sh2-header-book {
    padding: 12px 20px;
    color: #fff !important;
    background: var(--sh2-red);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid var(--sh2-red);
    transition: color .25s ease, background .25s ease;
}
.sh2-header-book:hover { color: var(--sh2-red) !important; background: transparent; }
.sh2-language { display: flex; align-items: center; gap: 7px; font-size: 10px; }
.sh2-language i { width: 1px; height: 12px; background: var(--sh2-line); }
/* Từ 901px trở lên không cần nút này vì menu đã nằm sẵn trên thanh header;
   dưới 900px vẫn phải có, đó là cách duy nhất mở menu trên điện thoại. */
.sh2-menu-btn { display: none; place-content: center; gap: 5px; }
.sh2-menu-btn i { display: block; width: 24px; height: 1px; background: var(--sh2-ink); transition: transform .25s ease, opacity .25s ease; }

.sh2-hero {
    position: relative;
    /* Tỉ lệ banner trong mẫu là 0,45 lần chiều ngang trang. */
    /* /demo4 để banner cao 780px ở màn 1920 (0,41 lần chiều ngang). */
    min-height: clamp(560px, 45vw, 780px);
    /* Ảnh nền có hiệu ứng tiến vào chậm (sh2HeroVaoTrong) nên nó luôn to hơn khung
       khoảng 13px mỗi cạnh. Lớp phủ kem chỉ nằm gọn trong khung, nên phần ảnh
       tràn xuống dưới không được phủ và lộ ra thành một vệt ngang ở chân
       banner — thấy rõ nhất ở nửa trái, nơi lớp phủ đậm nhất.
       overflow:hidden cắt gọn phần tràn đó. */
    overflow: hidden;
    background: var(--sh2-cream);
    isolation: isolate;
}
.sh2-hero-image {
    position: absolute;
    z-index: -3;
    top: 0;
    right: 0;
    /* Ảnh trải hết chiều ngang; phần chữ đọc được nhờ lớp phủ kem bên dưới. */
    width: 100%;
    height: 100%;
    max-width: none !important;
    object-fit: cover;
    object-position: 62% center;
    /* Tâm phóng đặt ở hốc đỏ cuối hành lang (khoảng 50% ngang, 42% dọc) nên
       khung hình từ từ tiến vào trong phòng chứ không phóng đều ra bốn phía. */
    transform-origin: 50% 42%;
    transform: scale(1.02);
    animation: sh2HeroVaoTrong 12s ease-in-out infinite alternate;
    will-change: transform;
    backface-visibility: hidden;
}
.sh2-hero-wash {
    position: absolute;
    z-index: -2;
    inset: 0;
    /* Chữ banner chuyển sang màu ngà nên lớp phủ phải tối lại thì mới đọc được.
       Cố ý để trong suốt ở dải trên cùng để thanh header (chữ nâu đậm trên nền
       kem mờ) không bị ám tối theo. */
    background:
        linear-gradient(180deg, rgba(30, 17, 10, 0) 0%, rgba(30, 17, 10, .3) 17%, rgba(30, 17, 10, .48) 52%, rgba(30, 17, 10, .58) 100%),
        linear-gradient(90deg, rgba(30, 17, 10, .58) 0%, rgba(30, 17, 10, .34) 42%, rgba(30, 17, 10, .06) 72%, rgba(30, 17, 10, 0) 100%);
}
.sh2-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, rgba(35, 17, 8, .04), transparent 32%, rgba(28, 12, 5, .06));
}
.sh2-hero-copy {
    position: absolute;
    left: 5.6%;
    top: 27%;
    width: min(520px, 42vw);
}
/* Đo trên mẫu banner: dòng "TINH HOA BẠC" rộng khoảng 23% chiều ngang trang. */
.sh2-hero-copy h1 {
    margin-bottom: 20px;
    color: var(--sh2-banner-tieu-de);
    font-size: clamp(38px, 3.25vw, 52px);
    text-transform: uppercase;
}
.sh2-hero-copy p, .sh2-hero-copy small { color: var(--sh2-banner-chu); }
.sh2-hero-copy p { margin-bottom: 3px; font-size: 12px; font-weight: 600; }
.sh2-hero-copy small { display: block; margin-bottom: 27px; font-size: 11px; }
.sh2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    transition: transform .25s ease, color .25s ease, background .25s ease;
}
.sh2-btn:hover { transform: translateY(-2px); }
.sh2-btn-red { color: var(--sh2-nut-chu) !important; background: var(--sh2-nut-nen); }
.sh2-btn-red:hover { background: var(--sh2-deep-red); }
/* Thẻ "Mở cửa tham quan miễn phí" ở góc banner đã bỏ hẳn — cả HTML lẫn style.
   Trước đây chỉ ẩn bằng display:none, nhưng dưới 620px lại có một luật khác
   đặt display:grid đè lên nên nó hiện lại và che mất tiêu đề banner.
   Giờ mở cửa và địa chỉ vẫn có đủ ở dải "Chào đón bạn ghé thăm" cuối trang. */
.sh2-text-link {
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 1px solid currentColor;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.sh2-band {
    display: grid;
    grid-template-columns: minmax(250px, 30%) 1fr;
    align-items: stretch;
    gap: 0;
    padding: 44px 54px;
    background: var(--sh2-paper) url("assets/home/silver-house-2/02_bg_cream.jpg") center / cover;
    border-bottom: 1px solid rgba(93, 66, 45, .16);
}
/* Nới cột chữ và bớt khoảng đệm phải: "CHUYỆN CỦA BẠC" và "TRONG KHÔNG
   GIAN 3D" là hai dòng dài nhất trang, trước đây bị hụt chỗ nên gãy dòng. */
.sh2-intro { align-self: center; max-width: 420px; padding-right: clamp(26px, 2.8vw, 48px); }
.sh2-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 19px;
    color: var(--sh2-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}
.sh2-eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }
/* Bản trước 3.5vw khiến tiêu đề tràn cột và tự xuống dòng sai chỗ:
   "CÂU / CHUYỆN / SILVER / HOUSE" thay vì hai dòng như mockup. 2.7vw để
   dòng dài nhất của mỗi section vừa đúng bề ngang cột trái. */
.sh2-intro h2 { margin-bottom: 22px; font-size: clamp(28px, 2.5vw, 37px); text-transform: uppercase; }
.sh2-intro > p:not(.sh2-eyebrow) { margin-bottom: 28px; color: var(--sh2-muted); font-size: 12px; }

/* =========================================================================
   Dải nối giữa banner và phần bên dưới — theo /demo4
   ========================================================================= */
.sh2-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    height: 70px;
    padding: 0 24px;
    background: #f5f0e8;
    border-bottom: 1px solid #d4cdc3;
}
.sh2-strip span {
    font-family: var(--sh2-serif);
    font-size: 13px;
    letter-spacing: .02em;
    color: #5e574e;
    white-space: nowrap;
}
.sh2-strip b { font-size: 9px; font-weight: 700; color: #241e18; }

/* =========================================================================
   Chữ của hai dải "Câu chuyện" và "Sơn Đỏ" — lấy đúng thông số /demo4:
   nhãn nhỏ Inter 10px, tiêu đề Cormorant 52px giãn chữ âm, đoạn văn cũng là
   Cormorant 14px chứ không phải font sans như các dải còn lại.
   ========================================================================= */
.sh2-story .sh2-eyebrow,
.sh2-heritage .sh2-eyebrow {
    font-family: var(--sh2-ui);
    margin-bottom: 10px;
    font-size: 10px;
    font-weight: 400;
    line-height: 13px;
    letter-spacing: .09em;
}

.sh2-story .sh2-intro h2,
.sh2-heritage .sh2-intro h2 {
    margin-bottom: 20px;
    font-size: clamp(34px, 2.9vw, 52px);
    font-weight: 400;
    line-height: .93;
    letter-spacing: -.045em;
}

.sh2-story .sh2-intro > p:not(.sh2-eyebrow),
.sh2-heritage .sh2-intro > p:not(.sh2-eyebrow) {
    margin-bottom: 14px;
    font-family: var(--sh2-serif);
    font-size: 14px;
    line-height: 1.45;
}

.sh2-story .sh2-text-link,
.sh2-heritage .sh2-text-link {
    font-family: var(--sh2-ui);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: none;
}

/* Cột trái 27% như mọi dải khác, để khung video thẳng hàng với dãy hiện vật
   ngay bên dưới — trước đây dải này dùng 30% nên video thụt vào. */
.sh2-story { min-height: 388px; grid-template-columns: minmax(250px, 27%) 1fr; }

/* --- Video giới thiệu ---------------------------------------------------
   Video gốc 16:9, khung ở đây rộng hơn nên phải cắt bớt chiều cao. Phần
   trên và dưới của khung hình chỉ là nền đỏ trống, riêng logo chìm nằm ở
   góc trên bên phải — vì vậy neo ảnh ở 15% để gần như không cắt phía trên
   (giữ trọn logo) mà dồn phần cắt xuống dưới.
   Nền khung để sẵn màu đỏ của video, tránh loé một mảng sáng lúc chưa tải. */
.sh2-story-video {
    position: relative;
    overflow: hidden;
    height: clamp(320px, 34vw, 640px);
    background: #5e1013;
}
.sh2-story-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
}

.sh2-heritage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(250px, 27%) 1fr;
    gap: 0;
    padding: 40px 54px;
    color: #fff;
    background: var(--sh2-red) url("assets/home/silver-house-2/03_bg_red.jpg") center / cover;
}
.sh2-intro-light { max-width: 400px; padding: 10px 40px 10px 0; }
.sh2-intro-light .sh2-eyebrow, .sh2-intro-light > p:not(.sh2-eyebrow) { color: #ecd8c6; }
.sh2-intro-light .sh2-text-link { color: #fff; }
.sh2-card-rail { display: grid; min-width: 0; }

/* --- Bốn hiện vật ------------------------------------------------------
   Mẫu vẽ mỗi hiện vật thành một tấm thẻ đỏ trầm riêng, cách nhau bằng khe
   hở, ảnh phủ kín bề ngang thẻ và phần chữ nằm luôn trong thẻ. Bản trước là
   một dải liền chia bằng vạch dọc 1px, ảnh để object-fit:contain nên lộ cả
   viền sáng có sẵn trong file ảnh, trông như mỗi món bị đóng khung.
   Màu nền thẻ lấy đúng màu nền của bốn tấm ảnh (khoảng rgb(70,2,1)) để ảnh
   và phần chữ liền thành một khối.                                        */
.sh2-heritage-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sh2-heritage-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #470201;
}
.sh2-heritage-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    transition: transform .55s ease;
}
.sh2-artifact-image { display: block; overflow: hidden; flex: none; }
.sh2-heritage-card:hover img { transform: scale(1.045); }
.sh2-heritage-card > div { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 20px; }
.sh2-heritage-card .sh2-zone-link { font: 500 14px/1.5 var(--sh2-sans); color: #f1d4ac; }
.sh2-zone-link span { display: block; font-size: 12px; margin-top: 4px; }
.sh2-heritage-card h3 { font-size: 26px; line-height: 1.15; margin: 0; letter-spacing: 0; }
.sh2-heritage-card > div > p { font-size: 14px; line-height: 1.6; color: #f2e1d3; }
.sh2-heritage-card .sh2-card-link { margin-top: auto; font-size: 14px; }
.sh2-heritage .sh2-intro h2 { font-size: 42px; line-height: 1.05; letter-spacing: 0; }
.sh2-heritage .sh2-intro > p:not(.sh2-eyebrow) { font: 400 16px/1.65 var(--sh2-sans); }
.sh2-heritage .sh2-text-link { font-size: 14px; line-height: 1.6; letter-spacing: 0; }
.sh2-heritage-card b { font-family: var(--sh2-serif); font-size: 33px; font-weight: 400; line-height: 1; }
.sh2-heritage-card p { margin: 2px 0 0; font-size: 12px; }
.sh2-heritage-card small { display: block; margin-top: 2px; font-size: 9px; color: rgba(255,255,255,.72); }
/* --- Chấm tròn cho hai băng ảnh (chỉ dùng ở khổ điện thoại) --- */
.sh2-rail-dots { display: none; }
.sh2-rail-dots button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.sh2-rail-dots span {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(120, 88, 60, .32);
    transition: width .28s ease, background-color .28s ease;
}
.sh2-rail-dots button.is-on span { width: 20px; background: var(--sh2-gold); }
/* Dải Sơn Đỏ nền đỏ nên chấm phải sáng màu. */
.sh2-heritage .sh2-rail-dots span { background: rgba(255, 255, 255, .38); }
.sh2-heritage .sh2-rail-dots button.is-on span { background: #e7ccb4; }

.sh2-rail-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 44px;
    height: 52px;
    border: 0;
    background: transparent;
    font-family: var(--sh2-serif);
    font-size: 40px;
    cursor: pointer;
}
.sh2-heritage .sh2-rail-arrow { color: #fff; }
.sh2-rail-arrow-left { left: calc(27% - 15px); }
.sh2-rail-arrow-right { right: 18px; }

.sh2-workshop { grid-template-columns: minmax(250px, 27%) 1fr; padding-bottom: 0; }
.sh2-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sh2-process-card { position: relative; min-height: 320px; overflow: hidden; border-right: 3px solid var(--sh2-paper); color: #fff; background: #191613; }
.sh2-process-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; filter: sepia(.18) contrast(1.1); transition: transform .7s ease, opacity .35s ease; }
.sh2-process-card:hover img { transform: scale(1.05); opacity: .9; }
.sh2-process-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,5,3,.65), rgba(10,6,4,.45) 65%, rgba(10,6,4,.85)); pointer-events: none; }
.sh2-process-card > div { position: relative; z-index: 2; padding: 18px 18px 76px; pointer-events: none; }
.sh2-process-card b { display: block; margin-bottom: 6px; font-family: var(--sh2-serif); font-size: 31px; font-weight: 400; }
.sh2-process-card h3 { margin-bottom: 8px; font-family: var(--sh2-sans); font-size: 14px; font-weight: 600; line-height: 1.45; text-transform: uppercase; }
.sh2-process-card p { font-size: 13px; line-height: 1.6; }
.sh2-process-open { position: absolute; z-index: 3; inset: 0; display: flex; align-items: flex-end; padding: 18px; color: #fff; }
.sh2-process-open > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; border-top: 1px solid rgba(255,255,255,.6); font: 500 13px/1.5 var(--sh2-sans); }
.sh2 .sh2-process-open:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.sh2-packages {
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(250px, 27%) 1fr;
    align-items: center;
    margin: 28px -54px 0;
    padding: 30px 54px;
    background: rgba(255,255,255,.48);
    border-top: 1px solid var(--sh2-line);
}
.sh2-packages-copy { padding-right: 35px; }
/* Khối chữ này trước đây đứng riêng một kiểu: nhãn sát chữ, đoạn mô tả nhỏ,
   link dùng text-decoration:underline nên gạch chân dính sát chân chữ, khác
   hẳn các section còn lại. Nay dùng chung đúng nhịp và đúng kiểu link
   (.sh2-text-link — gạch dưới là border có khoảng thở). */
.sh2-packages .sh2-eyebrow { margin-bottom: 14px; color: var(--sh2-gold); }
.sh2-packages-copy span {
    display: block;
    margin-bottom: 18px;
    color: var(--sh2-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* --- Năm gói trải nghiệm ------------------------------------------------
   Trải đều hết cột phải và ngăn nhau bằng vạch dọc, đúng như mockup. Bản
   trước dùng một ảnh PNG ghép sẵn nên cụm icon co lại ở giữa, không chạm
   được hai mép cột.
   Icon vẫn lấy từ file PNG ghép đó: đặt background-size 500% rồi dịch
   background-position để mỗi ô lộ đúng một icon. Khung ô giữ đúng tỉ lệ của
   một ô trong ảnh (68.4 / 138) nên icon không bị bóp méo.                */
.sh2-package-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    row-gap: 24px;
    margin: 0;
    padding: 0 30px 0 0;
    list-style: none;
}
.sh2-package-list li { min-width: 0; border-left: 1px solid rgba(120, 88, 60, .22); }
.sh2-package-list li:first-child { border-left: 0; }
.sh2-package-list a {
    display: block;
    padding: 2px 10px;
    text-align: center;
    transition: transform .25s ease;
}
.sh2-package-list a:hover { transform: translateY(-3px); }
.sh2-package-list i {
    display: block;
    width: 100%;
    max-width: 54px;
    margin: 0 auto 8px;
    /* Quét file PNG 342×138 thấy mỗi ô có nét vẽ ở hai vùng: y 36–73 là icon,
       y 90–98 là chữ BASIC/PREMIUM… đã in sẵn. Khung dưới đây chỉ lấy dải
       y 30–80 nên chỉ còn icon, tránh lặp chữ với thẻ <b> bên dưới.
       500% theo chiều ngang để tách 5 ô; 276% = 138/50 theo chiều dọc. */
    aspect-ratio: 68 / 50;
/* Đổi tên tệp thay vì giữ tên cũ: đường dẫn ảnh nằm trong CSS nên không
       gắn được tham số phiên bản như ảnh trong template, mà bản cũ (nền
       trắng đục) đã nằm sẵn trong bộ nhớ đệm của trình duyệt và CDN. */
    background-image: url("assets/home/silver-house-2/16_icon_packages-trong.png");
    background-repeat: no-repeat;
    background-size: 500% 276%;
    background-position: calc(var(--sh2-pkg) * 25%) 34%;
}
.sh2-package-list b {
    display: block;
    color: var(--sh2-gold);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sh2-package-list small { display: block; margin-top: 8px; color: var(--sh2-muted); font-size: 13px; line-height: 1.6; }
.sh2-package-image { width: 100%; max-width: 120px; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 auto 12px; }
.sh2-package-meta { display: block; margin-top: 10px; color: var(--sh2-ink); font-size: 12px; line-height: 1.6; }
.sh2-packages-next {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--sh2-serif);
    font-size: 34px;
    line-height: 1;
    color: var(--sh2-muted);
}
.sh2-packages-next:hover { color: var(--sh2-red); }

.sh2-collection { position: relative; grid-template-columns: minmax(250px, 27%) 1fr; }
.sh2-product-rail { min-width: 0; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 9px) / 4); gap: 3px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.sh2-product-rail::-webkit-scrollbar { display: none; }
.sh2-product-card { position: relative; min-height: 300px; overflow: hidden; scroll-snap-align: start; color: #fff !important; background: #181411; }
.sh2-product-card img { width: 100%; height: 100%; object-fit: cover; opacity: .88; transition: transform .65s ease, opacity .3s ease; }
.sh2-product-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(9,5,3,.84)); }
.sh2-product-card:hover img { transform: scale(1.055); opacity: 1; }
.sh2-product-card div { position: absolute; z-index: 2; left: 22px; right: 18px; bottom: 18px; }
.sh2-product-card h3 { margin-bottom: 4px; font-family: var(--sh2-sans); font-size: 13px; font-weight: 500; line-height: 1.5; text-transform: uppercase; }
.sh2-product-card p { margin: 0; font-size: 13px; }
.sh2 .sh2-product-card:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.sh2-collection .sh2-rail-arrow-left { left: calc(27% - 17px); }
.sh2-collection .sh2-rail-arrow-right { right: 16px; }

/* Cột trái để 27% giống mọi dải khác, nhờ vậy mép trái khung Matterport
   thẳng hàng với dãy sản phẩm phía trên và dãy bài viết phía dưới —
   trước đây để 31% nên nó thụt vào 72px, tạo một khoảng trống lửng. */
.sh2-showroom { align-items: center; grid-template-columns: minmax(250px, 27%) 1fr; padding-top: 30px; padding-bottom: 30px; }
/* "TRONG KHÔNG GIAN 3D" là dòng dài nhất trang; mockup cũng để tiêu đề này
   nhỏ hơn các section khác để nó gọn trong hai dòng. */
.sh2-showroom .sh2-intro h2 { font-size: clamp(26px, 2.15vw, 32px); }
/* --- Khung tham quan Matterport ---------------------------------------
   Thay cho ảnh mô hình 3D tĩnh. Dùng chung đúng đường dẫn với /silver-house
   nên sửa link ở admin là cả hai trang đổi theo.
   Chiều cao co theo bề ngang màn hình nhưng có chặn trên chặn dưới, để trên
   máy rộng khung không cao quá mà trên máy hẹp vẫn đủ nhìn.               */
.sh2-showroom-tour {
    position: relative;
    overflow: hidden;
    /* Rộng thêm thì cao thêm cho cân: ở 1920px khung là 1312×490. */
    height: clamp(330px, 28vw, 490px);
    background: #241a12;
    box-shadow: 0 18px 46px rgba(54, 29, 15, .16);
}
.sh2-showroom-tour iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.sh2-journal { grid-template-columns: minmax(250px, 27%) 1fr; }
.sh2-journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.sh2-journal-card { background: rgba(255,255,255,.52); border: 1px solid rgba(91,61,39,.18); }
.sh2-journal-card img { width: 100%; height: 140px; object-fit: cover; transition: filter .3s ease; }
.sh2-journal-card:hover img { filter: saturate(1.12) contrast(1.05); }
.sh2-journal-card div { padding: 15px 15px 17px; }
.sh2-journal-card small, .sh2-journal-card time { color: var(--sh2-muted); font-size: 8px; text-transform: uppercase; }
.sh2-journal-card h3 { min-height: 50px; margin: 7px 0 9px; font-family: var(--sh2-sans); font-size: 15px; font-weight: 500; line-height: 1.45; }

/* Ảnh nền đã gộp sẵn nền đỏ bên trái và mặt tiền cửa hàng bên phải.
   Vùng đỏ phẳng của ảnh chỉ kéo tới 30% chiều ngang, trong khi cột địa chỉ
   nằm tới gần 50% — nên phủ thêm một lớp đỏ cùng màu, đặc ở nửa trái rồi tan
   hết ở 60%. Nhờ vậy chữ luôn đọc được mà phần cửa hàng vẫn nguyên. */
.sh2-visit {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 29%) minmax(220px, 21%) 1fr;
    align-items: center;
    min-height: clamp(290px, 17vw, 340px);
    color: #fff;
    background: #690101 url("assets/home/silver-house-2/visit-bg.jpg") center / cover no-repeat;
}
.sh2-visit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(106, 1, 1, .92) 0%, rgba(106, 1, 1, .9) 32%, rgba(106, 1, 1, .5) 46%, rgba(106, 1, 1, 0) 60%);
}
.sh2-visit-copy, .sh2-visit-info { position: relative; z-index: 1; }
.sh2-visit-copy { padding: 34px 40px 34px 54px; }
.sh2-visit .sh2-eyebrow { color: #e4c9b5; }
.sh2-visit h2 { margin-bottom: 22px; font-size: clamp(28px, 2.5vw, 37px); text-transform: uppercase; }
.sh2-visit-actions { display: flex; gap: 12px; }
.sh2-btn-outline { color: #fff !important; border-color: rgba(255,255,255,.75); }
.sh2-btn-outline:hover { color: var(--sh2-red) !important; background: #fff; }
.sh2-visit-info { display: grid; grid-template-columns: 26px 1fr; gap: 14px 8px; padding: 34px 20px; }
.sh2-visit-info span { color: #ecd4c2; font-size: 28px; line-height: 1; }
.sh2-visit-info p { margin: 0; font-size: 12px; }

/* Bố cục theo mẫu: logo — năm cột link — cụm mạng xã hội — email/điện thoại
   dồn sát mép phải. Dải cuối chạy hết bề ngang, chính sách và VI | EN cùng
   nằm về phía phải. */
.sh2-footer {
    display: grid;
    /* Đo trên mẫu: các cột link cách nhau đều 10,4% chiều ngang, cột đầu
       bắt đầu ở 19% và cột "Liên hệ" ở 71%. Bộ fr dưới đây cho đúng mốc đó. */
    grid-template-columns: 1.7fr repeat(5, 1fr) 1.1fr 1.65fr;
    gap: 30px;
    padding: 38px 54px 26px;
    background: var(--sh2-paper);
}
.sh2-footer h3 { margin-bottom: 14px; font-family: var(--sh2-sans); font-size: 9px; font-weight: 600; text-transform: uppercase; }
.sh2-footer a, .sh2-footer p { display: block; margin: 0 0 6px; color: var(--sh2-muted); font-size: 8px; }
.sh2-footer a:hover { color: var(--sh2-red); }
.sh2-footer-brand img { width: 92px; height: auto; margin-bottom: 24px; }
.sh2-footer-brand small { color: var(--sh2-muted); font-size: 7px; }
/* Bốn nút tròn đều nhau, không nút nào bị kéo dài theo độ dài chữ. */
.sh2-footer-social > div { display: flex; gap: 8px; margin-top: 4px; }
.sh2-footer-social > div a {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--sh2-line);
    border-radius: 50%;
    font-size: 10px;
}
.sh2-footer-social > div a:hover { border-color: var(--sh2-red); }

/* Email và số điện thoại nằm ngoài cùng bên phải, canh phải. */
.sh2-footer-reach { text-align: right; }
.sh2-footer-reach a { display: block; margin-bottom: 5px; font-size: 8px; }

/* Dải cuối footer — mockup có hàng chính sách và cụm VI | EN, bản trước thiếu hẳn. */
.sh2-footer-bottom {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 120px;
    margin-top: 6px;
    padding-top: 14px;
}
.sh2-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 44px; }
.sh2-footer-bottom a { margin: 0; font-size: 8px; }
.sh2-footer-bottom .sh2-language { gap: 6px; color: var(--sh2-muted); }
/* Mẫu vẽ mã ngôn ngữ đang chọn nằm trong một ô viền mảnh. */
.sh2-footer-bottom .sh2-language b {
    padding: 3px 8px;
    border: 1px solid var(--sh2-line);
    color: var(--sh2-ink);
    font-weight: 500;
}
.sh2-footer-bottom .sh2-language i { display: none; }
.sh2-footer-bottom .sh2-language a { font-size: 10px; }

.sh2-has-js .sh2-reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.sh2-has-js .sh2-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Đi từ ngoài vào trong: 12 giây tiến vào, 12 giây lùi ra, lặp mãi.
   Điểm sâu nhất đẩy từ 1.17 lên 1.25 nên khung hình vào sâu hơn trong phòng.
   Điểm đầu là scale(1.02) trùng với khai báo tĩnh ở trên, nên nếu trình duyệt
   bỏ qua animation thì ảnh vẫn phủ kín khung, không hở mép. */
@keyframes sh2HeroVaoTrong {
    from { transform: scale(1.02); }
    to   { transform: scale(1.25); }
}

@media (max-width: 1180px) {
    .sh2-header { padding: 0 28px; }
    .sh2-nav { gap: 14px; }
    .sh2-header-book { display: none; }
    .sh2-band, .sh2-heritage { padding-left: 30px; padding-right: 30px; }
    .sh2-packages { margin-left: -30px; margin-right: -30px; padding-left: 30px; padding-right: 30px; }
    .sh2-intro { padding-right: 35px; }
    .sh2-hero-copy { left: 5%; }
    .sh2-footer { padding-left: 30px; padding-right: 30px; gap: 18px; }
}

/* Khối menu gộp, chỉ dùng cho khổ điện thoại. */
.sh2-nav-mobile { display: none; }

@media (max-width: 1100px) {
    .sh2-workshop, .sh2-collection { scroll-margin-top: 90px; }
    .sh2-menu-btn { display: grid; }

    .sh2-nav-left, .sh2-nav-right { display: none; }
    /* Trạng thái đóng là display:none, trạng thái mở là hiện đủ — hiệu ứng
       trượt xuống chỉ là animation không giữ giá trị đầu. Nhờ vậy nếu trình
       duyệt bóp animation thì menu vẫn bung ra bình thường chứ không nằm vô
       hình mà vẫn bấm được như cách dùng opacity + pointer-events. */
    .sh2-nav-mobile {
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        display: none;
        gap: 0;
        padding: 12px 28px 22px;
        background: rgba(248, 239, 226, .98);
        border-bottom: 1px solid var(--sh2-line);
        max-height: calc(100dvh - 68px);
        overflow-y: auto;
    }
    .sh2-nav-mobile.is-open { display: grid; animation: sh2MenuXuong 250ms ease; }
    @keyframes sh2MenuXuong { from { opacity: 0; transform: translateY(-12px); } }
    .sh2-nav-mobile a {
        padding: 12px 0;
        border-bottom: 1px solid rgba(100, 70, 45, .12);
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .sh2-strip { gap: 18px; height: auto; padding: 14px 20px; flex-wrap: wrap; }
    .sh2-strip span { font-size: 12px; }

    /* Menu trái bị ẩn nên không còn chiếm ô lưới nào; nếu để trình duyệt tự
       xếp thì logo rơi về cột 1 còn cụm nút nhảy vào cột giữa. Chỉ định cột
       rõ ràng để logo luôn ở giữa và cụm nút luôn ở mép phải. */
    .sh2-header { height: 80px; grid-template-columns: 1fr auto 1fr; }
    .sh2-logo { grid-column: 2; justify-self: center; }
    .sh2-header-right { grid-column: 3; justify-self: end; }
    .sh2-header.is-sticky { height: 68px; }
    .sh2-header-actions { justify-self: end; }
    .sh2-icon-btn, .sh2-language { display: none; }
    .sh2-menu-btn[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .sh2-menu-btn[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
    .sh2-menu-btn[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .sh2-hero { min-height: 560px; }
    /* Trước đây làm mờ ảnh còn 78% để lấy chỗ cho thẻ trắng; nay bỏ thẻ
       rồi thì để ảnh nguyên độ đậm cho nhìn rõ. */
    .sh2-hero-image { width: 100%; }
    .sh2-hero-wash {
        background:
            linear-gradient(180deg, rgba(30, 17, 10, 0) 0%, rgba(30, 17, 10, .32) 16%, rgba(30, 17, 10, .5) 55%, rgba(30, 17, 10, .6) 100%),
            linear-gradient(90deg, rgba(30, 17, 10, .5) 0%, rgba(30, 17, 10, .24) 55%, rgba(30, 17, 10, 0) 100%);
    }
    .sh2-hero-copy { top: 132px; width: 62%; }
    .sh2-hero-copy h1 { font-size: 46px; }
    .sh2-band, .sh2-heritage, .sh2-workshop, .sh2-collection, .sh2-journal { grid-template-columns: 1fr; }
    .sh2-intro, .sh2-intro-light { max-width: 650px; padding: 0 0 35px; }
    .sh2-intro h2 { font-size: 55px; }
    .sh2-story-video { height: clamp(300px, 46vw, 420px); }
    /* Trước đây bốn thẻ nằm cạnh nhau trong một khung cuộn ngang, phải kéo
       thanh cuộn và luôn thấy thẻ bị cắt dở. Nay mỗi lần đúng một thẻ, dính
       vào giữa khung, thanh cuộn ẩn đi — vuốt tay hoặc để nó tự chạy. */
    .sh2-heritage-rail, .sh2-product-rail {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .sh2-heritage-rail::-webkit-scrollbar,
    .sh2-product-rail::-webkit-scrollbar { display: none; }
    .sh2-heritage-card, .sh2-product-card { scroll-snap-align: center; scroll-snap-stop: always; }
    .sh2-rail-arrow { display: none; }
    .sh2-rail-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; }
    .sh2-workshop .sh2-intro, .sh2-collection .sh2-intro { padding-bottom: 30px; }
    .sh2-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh2-process-card { min-height: 320px; }
    .sh2-packages { grid-template-columns: 1fr; margin-top: 28px; }
    .sh2-packages-copy { display: grid; grid-template-columns: 1fr 1fr; align-items: end; padding-right: 0; }
    .sh2-packages .sh2-eyebrow { grid-column: 1 / -1; }
    .sh2-showroom { grid-template-columns: 1fr; }
    .sh2-showroom-tour { height: clamp(300px, 44vw, 400px); }
    .sh2-journal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Một cột thì chữ trải hết bề ngang nên lớp phủ phải đậm suốt. */
    .sh2-visit { grid-template-columns: 1fr; min-height: 0; background-position: 70% center; }
    .sh2-visit::before {
        background: linear-gradient(90deg, rgba(106, 1, 1, .95) 0%, rgba(106, 1, 1, .82) 60%, rgba(106, 1, 1, .55) 100%);
    }
    .sh2-visit-copy { padding: 36px 28px 8px; }
    .sh2-visit-info { padding: 8px 28px 36px; }
    .sh2-footer { grid-template-columns: repeat(3, 1fr); }
    .sh2-footer-reach { text-align: left; grid-column: span 1; }
    .sh2-footer-bottom { justify-content: space-between; gap: 20px; }
    .sh2-package-list { padding-right: 0; }
    .sh2-packages-next { display: none; }
}

@media (max-width: 620px) {
    .sh2-strip { gap: 12px; padding: 12px 16px; }
    .sh2-strip span { font-size: 11px; }

    body.sh2-page { font-size: 13px; }
    body.admin-bar .sh2-header.is-sticky { top: 46px; }
    /* Ba cột đều nhau để logo nằm đúng tim trang, hamburger sang mép phải. */
    .sh2-header { height: 76px; padding: 0 18px; grid-template-columns: 1fr auto 1fr; }
    .sh2-logo { justify-self: center; width: 68px; }
    /* Bố cục cũ: ảnh chiếm nửa trên, chữ nằm nửa dưới trên nền kem, chỗ trống
       còn lại dành cho thẻ "Mở cửa tham quan". Bỏ thẻ rồi thì cho ảnh phủ trọn
       chiều cao và chữ nằm đè lên như bản máy tính — nhìn rõ ảnh hơn hẳn. */
    .sh2-hero { min-height: clamp(460px, 125vw, 580px); }
    .sh2-hero-image { height: 100%; object-position: 60% center; }
    .sh2-hero-wash {
        background: linear-gradient(180deg, rgba(30, 17, 10, 0) 0%, rgba(30, 17, 10, .36) 15%, rgba(30, 17, 10, .5) 48%, rgba(30, 17, 10, .62) 100%);
    }
    .sh2-hero-copy { top: 24%; left: 20px; width: calc(100% - 40px); }
    .sh2-hero-copy h1 { max-width: 340px; margin-bottom: 16px; font-size: 38px; line-height: .94; }
    .sh2-hero-copy p, .sh2-hero-copy small { max-width: 280px; }
    .sh2-band, .sh2-heritage { padding: 44px 20px; }
    .sh2-intro h2 { font-size: 45px; }
    .sh2-story-video { height: 230px; }
    .sh2-heritage { padding-bottom: 30px; }
    .sh2-heritage-card img { height: auto; }
    .sh2-workshop { padding-bottom: 0; }
    .sh2-process-grid { grid-template-columns: 1fr 1fr; }
    .sh2-process-card { min-height: 270px; }
    .sh2-packages { margin: 25px -20px 0; padding: 20px; }
    .sh2-packages-copy { display: block; }
    /* Năm gói xếp 2 – 2 – 1: gói cuối nằm ngang chiếm trọn hàng dưới cùng. */
    .sh2-package-list {
        grid-template-columns: 1fr 1fr;
        gap: 22px 0;
        padding-right: 0;
    }
    .sh2-package-list li { border-left: 0; }
    .sh2-package-list li:nth-child(even) { border-left: 1px solid rgba(120, 88, 60, .22); }
    .sh2-package-list li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        padding-top: 20px;
        border-top: 1px solid rgba(120, 88, 60, .22);
    }
    .sh2-package-list li:last-child:nth-child(odd) a { max-width: 320px; margin: auto; }
    .sh2-package-list i { max-width: 62px; }
    .sh2-packages-next { display: none; }
    .sh2-product-card { min-height: 300px; }
    .sh2-showroom-tour { height: 260px; }
    .sh2-journal-grid { grid-template-columns: 1fr; }
    .sh2-journal-card { display: grid; grid-template-columns: 43% 57%; }
    .sh2-journal-card img { height: 100%; min-height: 180px; }
    .sh2-journal-card h3 { min-height: 0; }
    .sh2-visit-copy { padding: 34px 20px 6px; }
    .sh2-visit-info { padding: 6px 20px 32px; }
    .sh2-footer { grid-template-columns: 1fr 1fr; padding: 35px 20px; }
    .sh2-footer-brand { grid-column: 1 / -1; }
    .sh2-footer-bottom { flex-wrap: wrap; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sh2 *, .sh2 *::before, .sh2 *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =========================================================================
   Cỡ chữ — kéo lên ngang /silver-house
   ---------------------------------------------------------------------------
   Bản dựng ban đầu để chữ rất nhỏ: link chân trang 8px, tên sản phẩm 11px,
   mô tả các bước 9px, dòng bản quyền 7px. Đo lại /silver-house thì những chỗ
   tương đương lần lượt là 12px, 25px, 12px, 12px.
   Chỗ nào khung chứa rộng tương đương thì lấy đúng số của /silver-house;
   chỗ nào khung hẹp hơn hẳn (thẻ sản phẩm 317px so với ô lớn 640px bên kia)
   thì nâng vừa phải để chữ không tràn ra ngoài thẻ.
   Khối này đặt cuối tệp nên ghi đè các khai báo phía trên; hai dải "Câu chuyện"
   và "Sơn Đỏ" vẫn giữ nguyên cỡ chữ theo /demo4 vì selector ở đó cụ thể hơn.
   ========================================================================= */

/* --- Thanh điều hướng: /silver-house dùng 12px --- */
.sh2-nav a { font-size: 12px; }

/* --- Thẻ bài viết: /silver-house để tiêu đề 24px, ngày 10px --- */
.sh2-journal-card h3 { min-height: 66px; font-size: 20px; line-height: 1.35; }
.sh2-journal-card small, .sh2-journal-card time { font-size: 10px; }

/* --- Thẻ sản phẩm: giá lấy đúng 12px như bên kia, tên nâng lên 14px --- */
.sh2-product-card h3 { font-size: 14px; }
.sh2-product-card p { font-size: 12px; }

/* --- Bốn bước làm nghề --- */
.sh2-process-card h3 { font-size: 14px; }
.sh2-process-card p { max-width: 100%; font-size: 13px; line-height: 1.6; }

/* --- Hiện vật khu Sơn Đỏ: niên đại lấy đúng 12px như bên kia --- */
.sh2-heritage-card p { font-size: 15px; }
.sh2-heritage-card small { margin-top: 3px; font-size: 12px; }

/* --- Các gói trải nghiệm --- */
.sh2-package-list b { font-size: 13px; }
.sh2-package-list small { font-size: 13px; }

/* --- Dải "Chào đón bạn ghé thăm" --- */
.sh2-visit-info p { font-size: 13px; line-height: 1.55; }

/* --- Banner --- */
.sh2-hero-copy p { font-size: 13px; }
.sh2-hero-copy small { font-size: 13px; }

/* --- Chân trang: /silver-house để link 12px --- */
.sh2-footer h3 { margin-bottom: 16px; font-size: 12px; }
.sh2-footer a, .sh2-footer p { margin-bottom: 8px; font-size: 12px; }
.sh2-footer-brand small { font-size: 11px; }
.sh2-footer-reach a { font-size: 12px; }
.sh2-footer-bottom a { font-size: 11px; }
.sh2-footer-bottom .sh2-language { font-size: 12px; }
.sh2-footer-bottom .sh2-language a { font-size: 12px; }
.sh2-footer-social > div a { font-size: 12px; }

@media (max-width: 620px) {
    .sh2-journal-card h3 { min-height: 0; font-size: 18px; }
}

/* --- Đoạn mô tả dưới mỗi tiêu đề section ------------------------------
   Hai dải "Câu chuyện" và "Sơn Đỏ" lấy Cormorant 14px theo /demo4, nhưng
   Cormorant có thân chữ thấp nên nhìn nhỏ hơn hẳn 14px của font sans — đó
   là lý do đoạn "Từ những làng nghề bạc truyền thống Việt Nam…" trông bé.
   Nâng lên 17px để cỡ nhìn ngang với 14px sans của /silver-house.
   Các dải còn lại dùng font sans nên chỉ cần lên đúng 14px như bên đó.   */
.sh2-intro > p:not(.sh2-eyebrow) { font-size: 14px; line-height: 1.75; }

.sh2-story .sh2-intro > p:not(.sh2-eyebrow),
.sh2-heritage .sh2-intro > p:not(.sh2-eyebrow) {
    margin-bottom: 18px;
    font-size: 17px;
    line-height: 1.5;
}

/* Các đoạn mô tả ngắn cùng vai trò ở nơi khác */
.sh2-hero-copy small { font-size: 13.5px; line-height: 1.6; }