/* =============================================================================
   Trang danh thiếp công khai — lớp trình bày

   Tailwind lo phần tiện ích, file này lo những thứ tiện ích không diễn đạt gọn:
   nhịp khoảng cách giữa các khối, kiểu tiêu đề, lớp phủ ảnh bìa, hiệu ứng mờ
   mép của băng cuộn ngang.

   Màu đều lấy từ biến của mẫu giao diện (smocard-templates.css) nên tự hợp với
   cả 7 bộ màu, sáng lẫn tối.
   ============================================================================= */

/* ---------- Thang cỡ chữ ----------
   Bảy bậc, không hơn. Trước đây hai file này dùng 20 giá trị font-size khác
   nhau, trong đó 12 bậc chen nhau trong khoảng 11.5–16.5px cách nhau 0,5px —
   mắt không phân biệt được, chỉ tạo cảm giác lộn xộn. Tỉ lệ dưới đây lấy theo
   tokens.css của trang marketing để cả site cùng một nhịp chữ.

   Đổi cỡ chữ thì đổi ở đây, đừng ghi số thẳng vào selector. */
:root {
    --t-label: 12px;   /* nhãn nhỏ, chữ hoa, meta */
    --t-sm:    13px;   /* phụ đề, chú thích */
    --t-body:  15px;   /* chữ chính */
    --t-lg:    17px;   /* tên sản phẩm, tiêu đề mục nhỏ */
    --t-title: 20px;   /* tiêu đề khối */
    --t-stat:  28px;   /* con số năng lực */
    --t-name:  30px;   /* tên chủ thẻ — to nhất trên trang */

    /* ---------- Chuyển động ----------
       Trước đây các transition ở file này không ghi easing nên rơi về `ease`
       mặc định của trình duyệt, trong khi premium-card.css dùng
       cubic-bezier(.22,1,.36,1) — hai cảm giác chuyển động khác nhau trên
       cùng một trang. Giờ cả hai file dùng chung một đường cong. */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --dur-fast: .15s;
    --dur-base: .25s;

    /* ---------- Mau nut goi dien ----------
       Xanh la kieu nut "Call" cua iPhone. Co tinh KHONG lay tu bien mau cua mau
       giao dien: y nghia "goi dien" o day gan voi thoi quen he dieu hanh chu
       khong phai voi thuong hieu cua chu the, doi theo bo mau la mat cai do.
       Toi hon so voi #34C759 cua iOS de chu trang tren nen dat tren 4.5:1 —
       #34C759 nguyen ban chi dat khoang 2.3:1, doc rat met ngoai nang. Lan dau
       dat #0E8A43 (4.53:1), do lai tren trang that thi phan BIEU TUONG chi ra
       4.43 nen ha them mot bac nua. */
    --c-call: #0C7C3C;
}

/* ---------- Nhịp chung ----------
   Trước đây mỗi khối tự đặt padding riêng (pt-lg, py-xl, pt-xl pb-lg...) nên
   khoảng cách giữa các khối lộn xộn. Giờ mọi khối dùng chung một nhịp. */
.sc-block {
    padding: 26px 20px;
}
.sc-block + .sc-block,
.sc-anchor + .sc-anchor > .sc-block {
    padding-top: 0;
}
/* Khối tràn viền (băng cuộn ngang) tự lo padding hai bên */
.sc-block--bleed {
    padding-left: 0;
    padding-right: 0;
}

/* ---------- Tiêu đề khối ----------
   Thanh màu nhỏ bên trái tạo điểm nhấn và nhịp thị giác, thay cho việc mọi
   tiêu đề đều là chữ đậm cùng cỡ. */
.sc-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    font-size: var(--t-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-on-surface);
    letter-spacing: -0.01em;
}
.sc-title::before {
    content: '';
    width: 3px;
    height: 17px;
    border-radius: 2px;
    background: var(--c-primary);
    flex: none;
}
.sc-block--bleed .sc-title {
    padding-left: 20px;
}

/* ---------- Thẻ nội dung ----------
   Một cấp lồng duy nhất. Trước đây là nền tối → thẻ sáng hơn chút → thẻ con,
   ba lớp gần trùng màu nên không lớp nào nổi. */
.sc-card {
    background: var(--c-surface);
    border: 1px solid var(--c-outline-variant);
    border-radius: var(--c-radius-card, 14px);
    box-shadow: var(--c-shadow-card, 0 1px 3px rgba(10, 14, 26, .07));
}

/* ---------- Ảnh bìa ----------
   Lớp phủ tối dần ở đáy để tên và ảnh đại diện luôn đọc được, dù ảnh bìa sáng
   hay tối. Trước đây dải gradient cắt ngang cụt, nhìn như chưa hoàn thiện. */
.sc-cover {
    position: relative;
    /* Anh la thu duy nhat co mau tren ca trang. Truoc day no chi cao 148px trong
       khi danh sach thong tin ben duoi thi thoai mai — dau tu nguoc voi vai tro. */
    height: 200px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.sc-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, .10) 0%,
        rgba(0, 0, 0, 0) 42%,
        rgba(0, 0, 0, .34) 100%);
}
/* Nền dự phòng khi chưa có ảnh bìa: dùng chính màu thương hiệu của mẫu */
.sc-cover--blank {
    background:
        /* van cheo mo tao chat lieu, tranh cam giac "mot khoi mau phang" */
        repeating-linear-gradient(115deg,
            rgba(255, 255, 255, .055) 0 2px,
            transparent 2px 13px),
        radial-gradient(90% 120% at 88% -20%,
            color-mix(in srgb, var(--c-primary) 45%, #ffffff) 0%,
            transparent 58%),
        linear-gradient(150deg,
            color-mix(in srgb, var(--c-primary) 92%, #ffffff) 0%,
            var(--c-primary) 46%,
            color-mix(in srgb, var(--c-primary) 62%, #000000) 100%);
}

/* ---------- Ảnh đại diện ---------- */
.sc-avatar {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--c-surface-container);
    box-shadow: 0 0 0 4px var(--c-surface), 0 6px 18px rgba(10, 14, 26, .18);
}
.sc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-avatar-initial {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--t-name); font-weight: 700; line-height: 1;
    background: var(--c-primary);
    color: var(--c-on-primary);
}

/* ---------- Tên và chức danh ----------
   Căn trái, cỡ chữ chênh rõ. Trước đây tất cả căn giữa và tên chỉ nhỉnh hơn
   tiêu đề khối một chút nên không ai là nhân vật chính. */
.sc-name {
    margin: 14px 0 0;
    font-size: var(--t-name);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--c-on-surface);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.sc-role {
    margin: 6px 0 0;
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--c-on-surface-variant);
}
.sc-role strong { color: var(--c-on-surface); font-weight: 600; }
/* Khau hieu bo gach doc va chu nghieng. Truoc day trong 400px dau man hinh co
   BA kieu canh le khac nhau: ten (khong dau hieu), khau hieu (gach doc + nghieng),
   tieu de khoi (gach doc xanh) — mat khong biet bam vao dau. */
.sc-tagline {
    margin: 10px 0 0;
    font-size: var(--t-body);
    line-height: 1.55;
    color: var(--c-on-surface-variant);
}

/* ---------- Hàng icon mạng xã hội ----------
   XUỐNG DÒNG, không cuộn ngang.

   Trước đây khối này là một băng cuộn ngang (`overflow-x: auto`) với thanh
   cuộn bị ẩn và KHÔNG có dải mờ báo hiệu — `.sc-rail-wrap::after` chỉ dùng cho
   các băng khác. Hệ quả: trên màn 412px vừa đúng 5 icon lọt khung
   ((412 − 40 lề) ÷ (62 + 12) = 5,02), icon thứ sáu trở đi nằm ngoài tầm nhìn
   mà không một dấu hiệu nào. Chủ thẻ thêm tám liên kết, khách chỉ thấy năm, và
   không ai biết là còn.

   Ghi chú cũ ở đây viết "khối Mạng xã hội (3 icon, không cuộn)" — giả định ấy
   đúng lúc viết và sai ngay khi có người dùng thật.

   Vuốt ngang hợp với băng SẢN PHẨM: ở đó mỗi thẻ to, người xem lướt qua là
   thường. Danh sách kênh liên lạc thì ngược lại — khách cần thấy ĐỦ ngay, và
   thứ họ tìm có thể là cái cuối cùng. Xuống dòng thì mọi icon đều hiện. */
.sc-rail {
    display: grid;
    /* ĐÚNG 5 cột mỗi hàng, không phụ thuộc bề ngang máy. Trước đây dùng
       `auto-fill` nên số cột đổi theo màn: 5 ô ở khổ 412px nhưng chỉ 4 ở khổ
       360px — cùng một tấm thẻ mà mỗi máy một kiểu xếp. */
    grid-template-columns: repeat(5, 54px);
    /* Cột rộng đúng bằng icon và dàn đều: icon đầu sát lề trái, icon cuối sát
       lề phải, khe ở giữa tự chia. Nhờ vậy hàng icon thẳng hàng với tiêu đề
       khối ở cả hai mép, thay vì thừa ra một khoảng lẻ bên phải. */
    justify-content: space-between;
    row-gap: 16px;
    padding: 2px 20px 6px;
}

/* Khong dung scroll-snap o day.
   scroll-snap-align: start canh the dau tien vao mep vung cuon, va dong tac do
   TRIET TIEU 20px padding trai ben tren - lam bang cuon lech 20px so voi cac
   khoi khac (do duoc: 15px so voi 35px). Loi chi xuat hien khi bang du dai de
   cuon, nen khoi Mang xa hoi (3 icon, khong cuon) van dung con San pham va
   Danh gia thi lech. */
.sc-rail-wrap { position: relative; }
.sc-rail-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 6px;
    width: 34px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--c-background));
}

/* ---------- Dòng thông tin ---------- */
.sc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
}
.sc-row + .sc-row { border-top: 1px solid var(--c-outline-variant); }
.sc-row-icon {
    width: 34px; height: 34px; flex: none;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-primary-fixed);
    color: var(--c-primary);
}
.sc-row-label { font-size: var(--t-label); color: var(--c-on-surface-variant); line-height: 1.3; }
.sc-row-value { font-size: var(--t-body); font-weight: 600; color: var(--c-on-surface); line-height: 1.35; }

/* ---------- Thẻ sản phẩm ---------- */
.sc-item {
    width: 216px;
    flex: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sc-item-media { height: 124px; position: relative; background: var(--c-surface-container); }
.sc-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-item-badge {
    position: absolute; top: 8px; left: 8px;
    padding: 3px 8px; border-radius: 999px;
    font-size: var(--t-label); font-weight: 800; letter-spacing: .04em;
    background: var(--c-primary); color: var(--c-on-primary);
}
.sc-item-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.sc-item-name { font-size: var(--t-body); font-weight: 700; line-height: 1.3; color: var(--c-on-surface); }
.sc-item-sub { font-size: var(--t-label); color: var(--c-on-surface-variant); }
.sc-item-foot { margin-top: auto; padding-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-item-price { font-size: var(--t-body); font-weight: 700; color: var(--c-primary); }

/* ---------- Đánh giá ---------- */
.sc-review { width: 258px; flex: none; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.sc-review-quote {
    font-size: var(--t-sm); line-height: 1.6; color: var(--c-on-surface-variant);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-review-who { display: flex; align-items: center; gap: 9px; }
.sc-review-ava {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--t-body);
    background: var(--c-primary-fixed); color: var(--c-primary);
}
.sc-stars { display: flex; gap: 1px; color: #F5A524; }

/* ---------- Mạng xã hội ---------- */
/* Icon can trai thay vi can giua: icon 54px nam giua cot 62px se lech 4px so
   voi mep cac khoi khac. Rieng phan TEN thi can giua duoi icon — xem
   .sc-social-name. */
.sc-social { width: 54px; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-decoration: none; }
/* Icon để trần, không hộp bao. Trước đây mỗi icon nằm trong một ô trắng bo
   góc có viền và bóng — với những icon vốn đã có nền riêng (Zalo, Facebook,
   Gmail) thì thành hai lớp khung lồng nhau, nhìn rối và bé đi.
   Giữ nguyên 54px làm VÙNG CHẠM, chỉ bỏ phần trang trí. */
.sc-social-badge {
    width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--dur-fast) var(--ease);
}
.sc-social:active .sc-social-badge { transform: scale(.94); }
.sc-social-badge img {
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: 12px;   /* bo nhẹ theo mép icon, không phải khung riêng */
}
/* Ten can giua DUOI ICON chu khong can giua trong cot 62px: hop chu rong dung
   54px bang icon nen hai mep trai van thang hang voi le cua cac khoi khac —
   canh giua ca cot se day icon dau tien lech 4px vao trong. Ten dai hon 54px
   (Facebook, Instagram) tran deu hai ben, an toan vi cot con 8px du cong voi
   12px khe giua hai muc. */
.sc-social-name {
    width: 54px;
    text-align: center;
    white-space: nowrap;
    font-size: var(--t-label);
    color: var(--c-on-surface-variant);
}

/* ---------- Đoạn giới thiệu ----------
   Khối chữ dài duy nhất trên tấm thẻ, nên nó quyết định trang trông có đọc được
   hay không.

   Cắt bớt bằng CHIỀU CAO chứ không phải `-webkit-line-clamp`: đoạn giới thiệu
   gồm nhiều thẻ <p>, mà line-clamp chỉ đếm dòng bên trong đúng một hộp chữ —
   đặt lên phần tử cha thì nó cắt ở chỗ không ai đoán được. Mở ra thì bỏ trần
   chiều cao.

   Mép dưới làm mờ dần thay vì cắt phẳng: chữ đứt ngang thân giữa một nền phẳng
   trông như lỗi hiển thị, còn mờ dần thì tự nó nói "còn nữa, bấm đi". Màu mờ
   phải trùng nền thẻ (--c-surface), lệch một chút là hiện ra một vệt xám. */
.sc-bio-card { padding: 18px 18px 14px; }

.sc-bio {
    position: relative;
    max-height: 7.6em;              /* ~5 dòng */
    overflow: hidden;
    font-size: var(--t-body);
    line-height: 1.65;
    color: var(--c-on-surface-variant);
}
.sc-bio p + p { margin-top: 9px; }
.sc-bio::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2.4em;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--c-surface) 0%, transparent), var(--c-surface));
    pointer-events: none;
}
.sc-bio.la-mo { max-height: none; }
.sc-bio.la-mo::after { content: none; }

/* Nut mo/thu: chu thuong, khong vien — no la lua chon phu, khong duoc canh
   tranh voi hai nut hanh dong o thanh duoi. */
.sc-bio-toggle {
    margin-top: 10px;
    display: flex; align-items: center; gap: 2px;
    background: none; border: none; padding: 0;
    font-family: inherit; font-size: var(--t-sm); font-weight: 600;
    color: var(--c-primary); cursor: pointer;
}
.sc-bio-toggle:hover { text-decoration: underline; }
.sc-bio-toggle .material-symbols-outlined { transition: transform var(--dur-base) var(--ease); }
@media (prefers-reduced-motion: reduce) {
    .sc-bio-toggle .material-symbols-outlined { transition: none; }
}

/* ---------- Thanh hành động cố định ---------- */
.sc-actionbar {
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 50;
}
.sc-actionbar-inner {
    max-width: 390px; margin: 0 auto;
    display: flex; align-items: center; gap: 9px;
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
    background: var(--c-surface-container-lowest);
    border-top: 1px solid var(--c-outline-variant);
    box-shadow: 0 -6px 24px rgba(10, 14, 26, .12);
}
.sc-btn {
    height: 46px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: var(--t-body); font-weight: 700; text-decoration: none;
    border: none; cursor: pointer; font-family: inherit;
    transition: transform var(--dur-fast) var(--ease);
}
.sc-btn:active { transform: scale(.97); }
.sc-btn--primary { flex: 1.35; background: var(--c-primary); color: var(--c-on-primary); box-shadow: 0 4px 14px color-mix(in srgb, var(--c-primary) 35%, transparent); }
.sc-btn--call { flex: 1; background: var(--c-call); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--c-call) 32%, transparent); }
.sc-btn--icon { width: 46px; flex: none; background: transparent; color: var(--c-on-surface-variant); }

/* ---------- Khung 390px chỉ dành cho màn hình lớn ----------
   Khung hẹp + bóng đổ là để giả lập màn điện thoại KHI xem trên máy tính. Trên
   chính điện thoại nó lại phản tác dụng: máy hiện nay rộng 412–430px CSS nên
   tấm thẻ thừa ra khoảng 20px xám mỗi bên, trong khi thanh điều hướng trên
   (`w-full`) vẫn tràn hết chiều ngang — hai cạnh lề không khớp nhau, nhìn như
   trang bị lỗi chứ không ra chủ ý.

   Mốc 560px chứ không phải 640px: điện thoại rộng nhất hiện nay khoảng 430px
   CSS, còn từ 560px trở lên là máy gập mở ra hoặc máy tính bảng — ở đó khung
   hẹp lại đúng, cho tràn toàn màn thì một dòng chữ dài quá ngưỡng dễ đọc.

   Viết `main.sc-shell` chứ không phải `.sc-shell`: tailwind.css nạp SAU file
   này, nên `.max-w-[390px]` bằng điểm ưu tiên sẽ thắng — thêm tên thẻ để vượt
   lên một bậc. */
@media (max-width: 559px) {
    main.sc-shell { max-width: none; box-shadow: none; }
    .sc-actionbar-inner { max-width: none; }
}

/* ---------- Chân trang ---------- */
.sc-footer { padding: 30px 20px calc(96px + env(safe-area-inset-bottom)); text-align: center; }
.sc-footer-brand { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-body); font-weight: 700; color: var(--c-on-surface); }
.sc-footer-links { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: var(--t-sm); }
.sc-footer-links a { color: var(--c-on-surface-variant); text-decoration: none; }
/* Mau chu KHONG dung --c-outline: bien do danh cho duong ke, do tuong phan cua
   no tren nen trang chi dat 3.94:1 — duoi nguong 4.5:1 cho chu nho. Do duoc
   bang trinh duyet tren chinh trang nay. */
.sc-footer-note { margin-top: 12px; font-size: var(--t-label); color: var(--c-on-surface-variant); }
.sc-footer-cta {
    display: inline-flex; margin-top: 16px; padding: 9px 18px; border-radius: 999px;
    font-size: var(--t-sm); font-weight: 700; text-decoration: none;
    background: var(--c-surface); border: 1px solid var(--c-outline-variant); color: var(--c-primary);
}

@media (prefers-reduced-motion: reduce) {
    .sc-btn, .sc-social-badge { transition: none; }
}

/* =============================================================================
   Danh tinh doanh nghiep trong khoi thong tin
   ============================================================================= */
.sc-org {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 14px;
    background: var(--c-surface-container-low);
    border-bottom: 1px solid var(--c-outline-variant);
}
.sc-org-logo {
    width: 46px; height: 46px; flex: none;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-primary-fixed);
    color: var(--c-primary);
}
.sc-org-name {
    display: flex; align-items: center; gap: 5px;
    font-size: var(--t-lg); font-weight: 700; line-height: 1.25;
    color: var(--c-on-surface);
}
.sc-org-role {
    display: block; margin-top: 2px;
    font-size: var(--t-sm); color: var(--c-on-surface-variant);
}

/* =============================================================================
   Muc luc nhanh — thu bien trang thanh mot "web mini"

   Danh thiep dai nhung nguoi xem thuong chi can mot thu: bang gia, dich vu,
   hay danh gia. Thanh nay cho ho nhay thang toi do thay vi cuon mo.
   ============================================================================= */
.sc-jump {
    position: sticky;
    top: 48px;                 /* ngay duoi thanh dieu huong cao 48px */
    z-index: 40;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-outline-variant);

    /* Ba thanh dinh cung luc an 172px tren man hinh 844px. Muc luc la thu can
       khi NGUOI XEM DI TIM, khong phai khi ho dang doc: cuon xuong thi no lui
       ra sau thanh tren (z-index thap hon), cuon len thi tro lai ngay. */
    transition: transform var(--dur-base) var(--ease);
}
body.is-nav-hidden .sc-jump { transform: translateY(calc(-100% - 48px)); }
.sc-jump-rail {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 9px 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;

    /* Chip dung tron ven o hai dau thay vi bi cat giua chu. Truoc day chip dau
       chi con hien mot ky tu, nhin nhu vo layout chu khong nhu mot bang cuon. */
    scroll-snap-type: x proximity;
    scroll-padding-inline: 20px;
}
.sc-jump-rail > * { scroll-snap-align: start; }

/* Mo dan hai mep de bao cho nguoi xem biet con noi dung phia ngoai. */
.sc-jump {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.sc-jump-rail::-webkit-scrollbar { display: none; }
.sc-jump-chip {
    flex: none;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: var(--c-on-surface-variant);
    background: var(--c-surface-container);
    border: 1px solid transparent;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sc-jump-chip:active,
.sc-jump-chip.is-current {
    background: var(--c-primary-fixed);
    color: var(--c-primary);
    border-color: var(--c-primary-fixed-dim);
}

/* Chua cho de tieu de khong bi thanh dinh che khi nhay toi */
.sc-anchor { scroll-margin-top: 104px; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sc-jump-chip { transition: none; }
}

/* ---------------------------------------------------------------------------
   Khoi "Hinh anh" cua dong the Basic.
   Luoi 2 cot, o vuong. Anh nguoi dung tai len co du moi ti le nen phai cat
   bang object-fit, neu khong luoi se rach.
   --------------------------------------------------------------------------- */
.sc-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* So le thi anh dau tien chiem tron be ngang — het hang trong o cuoi. */
.sc-gallery > .sc-shot:first-child:nth-last-child(odd) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
}

.sc-shot {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--c-radius-card);
    background: var(--c-surface-container);
}
.sc-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sc-shot figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 20px 10px 8px;
    font-size: var(--t-label);
    font-weight: 600;
    line-height: 1.35;
    color: #FFFFFF;
    background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent);
    /* Chu thich dai thi cat mot dong, khong de no che het anh */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Gap / mo mot danh sach dai.

   Dat o day chu khong o premium-card.css vi ca hai dong the deu dung: khoi
   Hinh anh cua Basic va khoi bo suu tap cua Premium.
   --------------------------------------------------------------------------- */

/* Muc vuot qua so luong hien san. Chi an khi vung chua CHUA duoc mo. */
.is-collapsible > .is-more { display: none; }
.is-collapsible.is-open > .is-more { display: block; }
/* Dong danh sach la flex (dau dong / anh nam canh chu). Mo ra ma de `block`
   thi anh va chu xep chong len nhau — phai tra dung display cua no. */
.is-collapsible.is-open > .bni-item.is-more { display: flex; }

.sc-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--c-outline-variant);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-primary);
    font-family: inherit;
    font-size: var(--t-sm);
    font-weight: 700;
    cursor: pointer;
}
.sc-more-btn .material-symbols-outlined { transition: transform var(--dur-base) var(--ease); }
.sc-more-btn[aria-expanded="true"] .material-symbols-outlined { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .sc-more-btn .material-symbols-outlined { transition: none; }
}


/* ---------- Tiêu đề thanh trên ----------
   Hai lớp chữ chồng nhau, đổi khi cuộn qua phần đầu thẻ. Class .is-scrolled do
   IntersectionObserver trong Index.cshtml gắn lên <body>. */
.sc-topbar-title {
    position: relative;
    display: grid;
    min-width: 0;
    padding: 0 8px;
}
.sc-topbar-title > span {
    grid-area: 1 / 1;
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--c-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--dur-base) var(--ease);
}
.sc-topbar-owner {
    opacity: 0;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--c-on-surface);
}
body.is-scrolled .sc-topbar-generic { opacity: 0; }
body.is-scrolled .sc-topbar-owner { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .sc-topbar-title > span { transition: none; }
}

/* ---------- Hai nhóm khối ----------
   Khối "khoe" (sản phẩm, con số, hình ảnh, video) là thứ chủ thẻ muốn người xem
   dừng lại. Khối "tra cứu" (thông tin doanh nghiệp, địa chỉ, tài liệu) là thứ
   người xem tìm khi cần. Trước đây cả hai trình bày giống hệt nhau. */
/* Khối khoe nổi lên: nền trắng thuần, thoáng hơn, có đường phân cách rõ.
   --c-surface trùng --c-background nên phải dùng surface-container-lowest,
   nếu không hai nhóm ra cùng một màu và cả việc phân nhóm thành vô nghĩa. */
/* Viết kèm .sc-anchor cho đủ độ ưu tiên. Luật gộp khoảng cách ở đầu file
   (`.sc-anchor + .sc-anchor > .sc-block { padding-top: 0 }`) có ba class, còn
   `.sc-showcase > .sc-block` chỉ có hai — nên nó THẮNG và mọi khối khoe đứng
   sau một khối khác đều mất sạch 34px đệm trên: tiêu đề "Sản phẩm nổi bật"
   dính thẳng vào đường viền trên, trông như lọt vào khối phía trước. Đây là
   kiểu lỗi im lặng: đọc riêng luật này thì thấy đúng số 34px. */
.sc-anchor.sc-showcase > .sc-block {
    background: var(--c-surface-container-lowest);
    border-top: 1px solid var(--c-outline-variant);
    border-bottom: 1px solid var(--c-outline-variant);
    padding-top: 34px;
    padding-bottom: 34px;
}
/* Hai khối khoe liền nhau đọc như một mảng trắng liên tục: bỏ đường kẻ giữa và
   thu đệm trên lại, nếu không 34 + 34 thành một khoảng trống 68px giữa hai
   tiêu đề. */
.sc-anchor.sc-showcase + .sc-anchor.sc-showcase > .sc-block {
    border-top: 0;
    padding-top: 8px;
}

/* Khối tra cứu lùi về sau: nền hoà với trang, khoảng cách hẹp hơn. */
.sc-anchor.sc-reference > .sc-block {
    background: transparent;
    padding-top: 22px;
    padding-bottom: 22px;
}
/* Hai khối tra cứu liền nhau thì 22px đệm dưới của khối trên là đủ. */
.sc-anchor.sc-reference + .sc-anchor.sc-reference > .sc-block { padding-top: 0; }

/* =============================================================================
   VÙNG CHẠM TRÊN MÀN CẢM ỨNG
   -----------------------------------------------------------------------------
   Đo trên máy thật ở khổ 390px: tấm thẻ — thứ khách trả 500.000đ để sở hữu và
   đưa cho đối tác — có 5 loại điều khiển dưới ngưỡng 44px, trong đó có cả SỐ
   ĐIỆN THOẠI (20px) là thao tác chính của một tấm danh thiếp.

   Chỉ áp cho con trỏ thô. Trên máy tính giữ nguyên bố cục gọn.

   Không đổi cỡ chữ, chỉ thêm chiều cao chạm — đổi cỡ chữ sẽ phá bố cục thẻ.
   ========================================================================== */
@media (pointer: coarse) {
    /* Nút quay lại / menu ở thanh trên: 32×32 -> 44×44.
       Bám vào <header> có .sc-topbar-title bên trong — thanh trên không có
       class riêng, toàn Tailwind. Selector .sc-topnav tôi viết lúc đầu không
       khớp gì cả và im lặng vô tác dụng. */
    header:has(> .sc-topbar-title) > a,
    header:has(> .sc-topbar-title) > button { width: 44px; height: 44px; }

    /* Thanh mục lục nhảy khối: 36px -> 44px. */
    .sc-jump-chip { min-height: 44px; }

    /* Giá trị trong hàng thông tin — số điện thoại, email, website. Đây là
       thao tác chính của tấm thẻ mà lại là mục tiêu nhỏ nhất (20px). */
    .sc-row-value { display: flex; align-items: center; min-height: 44px; }

    .sc-footer-cta { min-height: 44px; }

    /* Nút menu ba chấm nằm trong <div class="relative"> nên không phải con
       trực tiếp của <header> — bắt bằng chính id của nó. */
    #navMoreBtn { width: 44px; height: 44px; }

    /* Nút "Xem thêm" mở rộng đoạn giới thiệu. */
    #bioToggleBtn { min-height: 44px; }

    /* Hai liên kết chính sách ở chân thẻ. */
    .sc-footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
}