/* =============================================================================
   SMOCARD PREMIUM — lop bo sung cho dong the Premium.

   Nguyen tac lan nay: KHONG doi bo mau, KHONG doi kieu chu, KHONG pha khung the.
   Premium dung y nguyen he giao dien cua Basic (bien --c-*, chu Inter, cac lop
   sc-*). File nay chi lam hai viec:

     1. Them cach trinh bay cho vai khoi ma Basic khong co (con so nang luc,
        san pham dang the lon, dich vu danh so, man chot lien he).
     2. Lam chuyen dong muot hon: khoi hien dan, so dem len, anh phong nhe,
        nut nhun khi cham.

   Truoc day file nay tung ap ca mot bo mau nga + chu co chan rieng, va no bien
   the thanh mot trang web khac han. Do khong phai viec cua Premium.
   ============================================================================= */

/* -------------------------------------------------------------------------
   1. Con so nang luc
   ------------------------------------------------------------------------- */

.sc-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--c-outline-variant);   /* ke chi = khe ho giua cac o */
    border: 1px solid var(--c-outline-variant);
    border-radius: var(--c-radius-card);
    overflow: hidden;
}
/* Le thi o dau tran ngang, giu luoi khong bi ho mot o */
.sc-stats > .sc-stat:first-child:nth-last-child(odd) { grid-column: 1 / -1; }

.sc-stat {
    padding: 16px 14px;
    background: var(--c-surface);
    text-align: center;
}
.sc-stat-value {
    display: block;
    font-size: var(--t-stat);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--c-primary);
    font-variant-numeric: tabular-nums;
}
.sc-stat-label {
    display: block;
    margin-top: 5px;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--c-on-surface-variant);
}

/* -------------------------------------------------------------------------
   2. San pham noi bat dang the lon (chi Premium)

   Basic dung bang cuon ngang the 216px. O Premium moi muc chiem tron be ngang
   nen anh to hon han, va co cho cho mo ta.
   ------------------------------------------------------------------------- */

.sc-works { display: flex; flex-direction: column; gap: 14px; }

.sc-work {
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.sc-work-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--c-surface-container);
    overflow: hidden;
}
.sc-work-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.sc-work:active .sc-work-media img { transform: scale(1.04); }
.sc-work-empty { display: grid; place-items: center; height: 100%; color: var(--c-on-surface-variant); }

.sc-work-body { padding: 14px 14px 13px; }
.sc-work-name {
    margin: 0;
    font-size: var(--t-lg);
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-on-surface);
}
.sc-work-sub { margin: 4px 0 0; font-size: var(--t-sm); color: var(--c-on-surface-variant); }
.sc-work-desc {
    margin: 9px 0 0;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--c-on-surface-variant);
    /* Mo ta dai thi cat 3 dong, khong de mot muc day het ca man */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sc-work-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--c-outline-variant);
}
.sc-work-price { font-size: var(--t-lg); font-weight: 800; color: var(--c-primary); }
/* Dung cho ca <a> va <button>: khoi Dich vu mo popup nen phai la button, con
   khoi San pham noi bat van la lien ket. Khong reset thi nut thua nen xam,
   vien va font mac dinh cua trinh duyet. */
.sc-work-more {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--c-primary);
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}
.sc-work-more .material-symbols-outlined { transition: transform var(--dur-base) var(--ease); }
.sc-work:active .sc-work-more .material-symbols-outlined { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   3. Dich vu danh so (chi Premium)
   ------------------------------------------------------------------------- */

.sc-svc-list { margin: 0; padding: 0; list-style: none; }
.sc-svc {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 2px 10px;
    padding: 15px 0;
    border-top: 1px solid var(--c-outline-variant);
}
.sc-svc:first-child { border-top: 0; padding-top: 0; }
.sc-svc-no {
    grid-row: 1 / span 2;
    padding-top: 2px;
    font-size: var(--t-sm);
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--c-primary);
    font-variant-numeric: tabular-nums;
}
.sc-svc-name { margin: 0; font-size: var(--t-lg); font-weight: 700; line-height: 1.32; color: var(--c-on-surface); }
.sc-svc-desc { margin: 6px 0 0; font-size: var(--t-sm); line-height: 1.6; color: var(--c-on-surface-variant); }
.sc-svc-foot { margin-top: 9px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.sc-svc-price { font-size: var(--t-body); font-weight: 700; color: var(--c-primary); }

/* -------------------------------------------------------------------------
   4. Loi chung thuc lon (chi Premium)
   ------------------------------------------------------------------------- */

.sc-voice { position: relative; padding: 20px 16px 16px; }
.sc-voice::before {
    content: "\201C";
    position: absolute;
    top: 2px;
    left: 12px;
    font-family: Georgia, serif;
    font-size: 54px;
    line-height: 1;
    color: var(--c-primary);
    opacity: .16;
}
.sc-voice-slide { display: none; }
.sc-voice-slide.is-on { display: block; }
.sc-voice-text {
    position: relative;
    margin: 0;
    font-size: var(--t-lg);
    line-height: 1.62;
    color: var(--c-on-surface);
}
.sc-voice-who {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--c-outline-variant);
}
.sc-voice-ava {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--c-primary-fixed);
    color: var(--c-primary);
    font-size: var(--t-body);
    font-weight: 800;
}
.sc-voice-ava img { width: 100%; height: 100%; object-fit: cover; }
.sc-voice-name { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--c-on-surface); }
.sc-voice-role { display: block; font-size: var(--t-label); color: var(--c-on-surface-variant); }

.sc-voice-nav { display: flex; gap: 7px; margin-top: 14px; }
.sc-voice-dot {
    width: 22px;
    height: 3px;
    border: 0;
    padding: 0;
    border-radius: 99px;
    background: var(--c-outline-variant);
    cursor: pointer;
    transition: background var(--dur-base) var(--ease);
}
.sc-voice-dot.is-on { background: var(--c-primary); }

.sc-voice-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}
.sc-voice-stars { display: inline-flex; gap: 1px; color: #E9A825; }
.sc-voice-count { font-size: var(--t-sm); font-weight: 600; color: var(--c-on-surface-variant); }

/* -------------------------------------------------------------------------
   5. Man chot lien he (chi Premium)
   ------------------------------------------------------------------------- */

.sc-close {
    padding: 24px 18px 22px;
    text-align: center;
    background: var(--c-primary-fixed);
    border-radius: var(--c-radius-card);
    border: 1px solid var(--c-primary-fixed-dim);
}
.sc-close-title {
    margin: 0;
    font-size: var(--t-title);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--c-on-surface);
    text-wrap: balance;
}
.sc-close-text {
    margin: 9px 0 0;
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--c-on-surface-variant);
}
.sc-close-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.sc-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 13px 18px;
    border-radius: 999px;
    font-size: var(--t-body);
    font-weight: 700;
    text-decoration: none;
    background: var(--c-primary);
    color: var(--c-on-primary);
    transition: transform var(--dur-fast) var(--ease);
}
.sc-close-btn:active { transform: translateY(1px) scale(.99); }
.sc-close-btn--ghost {
    background: var(--c-surface);
    color: var(--c-primary);
    border: 1px solid var(--c-outline-variant);
}

/* -------------------------------------------------------------------------
   6. Vai net chi Premium moi co tren khoi dau trang
   ------------------------------------------------------------------------- */

/* Anh bia phong nhe roi thu ve khi vao trang */
.pm .sc-cover { animation: sc-settle 1.2s cubic-bezier(.22, 1, .36, 1) both; }

/* Huy hieu doi tu "da xac thuc" sang nhan Premium */
.sc-chip-pro {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--c-primary-fixed);
    border: 1px solid var(--c-primary-fixed-dim);
    font-size: var(--t-label);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-primary);
    vertical-align: middle;
}

/* -------------------------------------------------------------------------
   7. Chuyen dong
   ------------------------------------------------------------------------- */

/* Trang thai an ban dau chi ap khi JS da san sang, de JS loi thi noi dung van
   hien chu khong mat hut. */
.pm-reveal-on [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s cubic-bezier(.22, 1, .36, 1),
                transform .55s cubic-bezier(.22, 1, .36, 1);
}
.pm-reveal-on [data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .06s; }
[data-reveal-delay="2"] { transition-delay: .12s; }
[data-reveal-delay="3"] { transition-delay: .18s; }

@keyframes sc-settle {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .pm .sc-cover { animation: none; }
    .pm-reveal-on [data-reveal] { opacity: 1; transform: none; transition: none; }
    .sc-work-media img, .sc-work-more .material-symbols-outlined,
    .sc-close-btn, .sc-voice-dot { transition: none; }
}

/* -------------------------------------------------------------------------
   8. Slide san pham
   ------------------------------------------------------------------------- */

.sc-slides {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 20px 8px;
    scroll-snap-type: x mandatory;
    /* Khong dat scroll-snap-align: start roi thoi: no canh the dau vao mep vung
       cuon va triet tieu 20px padding trai. scroll-padding moi la cho khai bao. */
    scroll-padding-inline: 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.sc-slides::-webkit-scrollbar { display: none; }

.sc-slide {
    flex: 0 0 auto;
    width: min(300px, 82vw);
    scroll-snap-align: start;
    overflow: hidden;
}
.sc-slide-hit {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.sc-slide-hit .sc-work-media { display: block; }
.sc-slide-hit .sc-work-body { display: block; }
.sc-slide-hit .sc-work-name,
.sc-slide-hit .sc-work-sub { display: block; }
.sc-slide-hit .sc-work-foot { display: flex; }
.sc-slide-hit:active .sc-work-media img { transform: scale(1.04); }

.sc-slide-nav {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}
.sc-slide-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-outline-variant);
    transition: width var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.sc-slide-dot.is-on { width: 18px; border-radius: 99px; background: var(--c-primary); }

/* -------------------------------------------------------------------------
   9. Popup chi tiet
   ------------------------------------------------------------------------- */

.sc-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.sc-modal[hidden] { display: none; }
.sc-modal-veil { position: absolute; inset: 0; background: rgba(12, 16, 28, .5); backdrop-filter: blur(2px); }

.sc-modal-panel {
    position: relative;
    width: 100%;
    max-width: 390px;
    max-height: 92svh;
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 40px rgba(10, 14, 26, .28);
    /* Truot len tu duoi: cu chi quen thuoc cua sheet tren dien thoai */
    animation: sc-sheet-up .32s cubic-bezier(.22, 1, .36, 1) both;
}
.sc-modal-scroll { overflow-y: auto; overscroll-behavior: contain; }

.sc-modal-x {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #1B1F2A;
    box-shadow: 0 2px 8px rgba(10, 14, 26, .2);
    cursor: pointer;
}

.sc-detail-media { position: relative; aspect-ratio: 16 / 10; background: var(--c-surface-container); }
.sc-detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-detail-body { padding: 18px 18px 22px; }
.sc-detail-title { margin: 0; font-size: var(--t-title); font-weight: 800; line-height: 1.28; color: var(--c-on-surface); }
.sc-detail-sub {
    display: flex; align-items: center; gap: 4px;
    margin: 7px 0 0; font-size: var(--t-sm); color: var(--c-on-surface-variant);
}
.sc-detail-price { margin: 12px 0 0; font-size: var(--t-title); font-weight: 800; color: var(--c-primary); }
.sc-detail-text { margin: 12px 0 0; font-size: var(--t-body); line-height: 1.65; color: var(--c-on-surface-variant); }

.sc-detail-file {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 14px; padding: 9px 14px;
    border-radius: 999px; border: 1px solid var(--c-outline-variant);
    font-size: var(--t-sm); font-weight: 700; color: var(--c-primary); text-decoration: none;
}

.sc-detail-proof {
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--c-outline-variant);
}
.sc-detail-proof-head {
    display: block; margin-bottom: 10px;
    font-size: var(--t-label); font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--c-on-surface-variant);
}
.sc-detail-quote { margin: 0 0 12px; }
.sc-detail-quote blockquote {
    margin: 5px 0 0; font-size: var(--t-sm); line-height: 1.6; color: var(--c-on-surface);
}
.sc-detail-quote figcaption { margin-top: 5px; font-size: var(--t-label); color: var(--c-on-surface-variant); }

.sc-detail-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.sc-detail-full {
    text-align: center; font-size: var(--t-sm); font-weight: 700;
    color: var(--c-on-surface-variant); text-decoration: none; padding-top: 4px;
}

/* Khoa cuon nen khi popup dang mo, neu khong trang duoi van truot theo ngon tay */
body.sc-modal-open { overflow: hidden; }

@keyframes sc-sheet-up {
    from { transform: translateY(14%); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-modal-panel { animation: none; }
    .sc-slide-dot { transition: none; }
}

/* -------------------------------------------------------------------------
   10. Bo suu tap anh
   ------------------------------------------------------------------------- */

.sc-albums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.sc-album {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    border-radius: var(--c-radius-card);
    overflow: hidden;
    background: var(--c-surface-container);
    cursor: pointer;
    display: block;
}
.sc-album img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.sc-album:active img { transform: scale(1.05); }

.sc-album-count {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .58);
    backdrop-filter: blur(4px);
    color: #FFFFFF;
    font-size: var(--t-label);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sc-album-name {
    position: absolute;
    inset: auto 0 0 0;
    padding: 24px 10px 9px;
    font-size: var(--t-label);
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    color: #FFFFFF;
    background: linear-gradient(to top, rgba(0, 0, 0, .68), transparent);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -------------------------------------------------------------------------
   11. Xem anh trong bo suu tap
   ------------------------------------------------------------------------- */

.sc-modal--photos { align-items: stretch; }

.sc-photos-panel {
    position: relative;
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--c-background);
    animation: sc-sheet-up .3s cubic-bezier(.22, 1, .36, 1) both;
}
.sc-photos-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 8px 12px 18px;
    border-bottom: 1px solid var(--c-outline-variant);
    background: var(--c-surface);
}
.sc-photos-title {
    font-size: var(--t-body);
    font-weight: 700;
    color: var(--c-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sc-modal-x--flat { position: static; box-shadow: none; background: transparent; color: var(--c-on-surface-variant); }

.sc-photos-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px; }
.sc-photos-set { display: flex; flex-direction: column; gap: 12px; }
.sc-photos-set[hidden] { display: none; }

.sc-photo { margin: 0; border-radius: var(--c-radius-card); overflow: hidden; background: var(--c-surface-container); }
.sc-photo img { width: 100%; height: auto; display: block; }
.sc-photo figcaption {
    padding: 9px 12px 11px;
    font-size: var(--t-sm);
    color: var(--c-on-surface-variant);
    background: var(--c-surface);
}

/* -------------------------------------------------------------------------
   12. Video
   ------------------------------------------------------------------------- */

.sc-videos { display: flex; flex-direction: column; gap: 12px; }
.sc-video { overflow: hidden; }

.sc-video-play {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.sc-video-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #14161C;
    overflow: hidden;
}
.sc-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-video-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #14161C;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
    transition: transform var(--dur-fast) var(--ease);
}
.sc-video-play:active .sc-video-btn { transform: scale(.94); }

.sc-video-body { padding: 12px 14px 13px; }

/* Khung nhung sau khi bam phat */
.sc-video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.sc-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
    .sc-album img, .sc-video-btn { transition: none; }
    .sc-photos-panel { animation: none; }
}