/* Minification failed. Returning unminified contents.
(336,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(337,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(345,37): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-r'
(345,61): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-y'
(345,76): run-time error CSS1038: Expected hex color, found '#0000'
(345,92): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-r'
(345,125): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-r'
(346,37): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-r'
(346,64): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-y'
(346,79): run-time error CSS1038: Expected hex color, found '#0000'
(346,95): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-r'
(346,128): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-r'
(349,37): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-r'
(349,61): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-y'
(349,76): run-time error CSS1038: Expected hex color, found '#0000'
(349,92): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-r'
(349,125): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-r'
(350,37): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-r'
(350,64): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-y'
(350,79): run-time error CSS1038: Expected hex color, found '#0000'
(350,95): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-r'
(350,128): run-time error CSS1039: Token not allowed after unary operator: '-tsp-notch-r'
 */
/* ============================================================
   TILE SAMPLE — layout mẫu thu nhỏ cho từng mẫu thẻ lời chúc
   Dùng trong popup QuickSetting (.qs-template-thumb) và
   SettingTheme (.mst-template-thumb), thay cho ảnh ImageUrl.
   Views: Views/Memory/MemoryCardSample/_TileSample*.cshtml

   Cách scale: mỗi mẫu dựng đúng kích thước card thật với quy ước
   1em = 10px của card (vd card 250x420 -> 25em x 42em). Khung thumb
   là container, font-size của .tsp = 100cqw / 27 nên cả mẫu co giãn
   theo bề rộng ô, giữ nguyên tỉ lệ/viền/bo góc của card thật.
   Màu & số đo lấy từ MemoryCard/zmysite_memory_card_{default,film,sticky,ticket,minimal,tape,dream,chat}.css
   ============================================================ */

/* ---------- Khung chứa (thumb) ---------- */
.qs-template-thumb,
.mst-template-thumb {
    container-type: inline-size;
    aspect-ratio: 27 / 45;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ---------- Common ---------- */
.tsp {
    font-size: 8px; /* fallback khi trình duyệt chưa hỗ trợ cqw */
    font-size: calc(100cqw / 27);
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    line-height: 1.2;
    text-align: left;
    pointer-events: none;
}

.tsp span {
    display: block;
}

.tsp svg {
    display: block;
}

.tsp-photo {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tsp-photo i {
    font-size: 3em;
    color: rgba(255, 255, 255, .85);
    text-shadow: 0 .1em .3em rgba(90, 74, 82, .18);
}

.tsp-line {
    height: .9em;
    margin-bottom: 1.1em;
    border-radius: .3em;
    flex-shrink: 0;
}

/* ============================================================
   DEFAULT — card 250x420, bo 30px, ảnh 255px, overlay trắng
   ============================================================ */
.tsp--default {
    width: 25em;
    height: 42em;
    border-radius: 3em;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1em 2em rgba(0, 0, 0, .2);
}

.tsp-default__photo {
    height: 25.5em;
    flex-shrink: 0;
    background: radial-gradient(circle at 25% 25%, rgba(255,255,255,.7), transparent 40%),
                linear-gradient(135deg, #f8d9c9 0%, #f3e3ee 50%, #dfe9f7 100%);
}

.tsp-default__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    border-radius: 3em;
    background: #fff;
}

.tsp-default__header {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: .8em;
    padding: .8em;
    border-radius: 3em 0 0 0;
    background: #fff;
}

.tsp-default__arc {
    position: absolute;
    bottom: 99%;
    right: -1px;
    width: 8em;
    height: 8em;
    z-index: 1;
}

.tsp-default__thumb {
    flex: 0 0 5em;
    width: 5em;
    height: 5em;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe0b2, #ffcc80);
    border: .3em solid #fff;
    box-shadow: 0 0 0 .1em #f3d3c3;
}

.tsp-default__head-text {
    flex: 1;
    min-width: 0;
}

.tsp-default__status {
    font-size: 1.28em;
    color: #D7BDCA;
}

.tsp-default__title {
    font-size: 1.6em;
    font-weight: 700;
    color: #6A515E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tsp-default__desc {
    height: 12.6em;
    padding: .4em 1.28em .8em;
    overflow: hidden;
}

.tsp-default__desc .tsp-line {
    background: rgba(240, 137, 116, .28);
}

/* ============================================================
   FILMSTRIP — card 230x400, viền hồng 3px, bo 18px
   ============================================================ */
.tsp--film {
    width: 23em;
    height: 40em;
    background: linear-gradient(180deg, #FFD6E4 0%, #FFF7EC 45%, #DDD2FF 100%);
    border: .3em solid rgba(245, 138, 168, .75);
    border-radius: 1.8em;
    overflow: hidden;
    box-shadow: 0 1.4em 2.8em rgba(245, 138, 168, .38),
                0 .6em 1.2em rgba(90, 74, 82, .18),
                inset 0 0 0 .2em rgba(255, 255, 255, .65);
}

.tsp-film__holes {
    display: flex !important;
    justify-content: space-around;
    padding: .8em;
    flex-shrink: 0;
}

.tsp-film__holes span {
    width: 1.4em;
    height: 1em;
    border-radius: .4em;
    background: #fff;
    border: .15em solid rgba(245, 138, 168, .5);
    box-shadow: inset 0 .2em .4em rgba(90, 74, 82, .12);
}

.tsp-film__frame {
    width: calc(100% - 1.8em);
    height: 15em;
    margin: 0 auto;
    flex-shrink: 0;
    border-radius: 1em;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.75), transparent 35%),
                linear-gradient(135deg, #FFE3EC 0%, #E2F4EA 55%, #E6F3FF 100%);
    border: .4em solid #FFFDF8;
    box-shadow: 0 .6em 1.4em rgba(90, 74, 82, .18),
                0 0 0 .2em rgba(245, 138, 168, .32);
}

.tsp-film__caption {
    height: 16.5em;
    margin: 0 1em;
    flex-shrink: 0;
    overflow: hidden;
    padding: 1.4em 1.4em 1em;
    background: rgba(255, 255, 255, .92);
    border: .15em solid rgba(245, 138, 168, .35);
    border-radius: 1.2em;
    box-shadow: 0 .8em 1.8em rgba(90, 74, 82, .12);
}

.tsp-film__caption .tsp-line {
    background: rgba(90, 74, 82, .16);
}

.tsp-film__name {
    margin-top: auto;
    margin-bottom: .35em;
    padding: 0 .95em;
    font-size: 1.5em;
    font-weight: 700;
    color: #C55A7A;
    text-align: right;
    white-space: nowrap;
}

/* ============================================================
   STICKY NOTE — card 244x400, giấy vàng, xoay 1.5deg
   ============================================================ */
.tsp--sticky {
    width: 24.4em;
    height: 40em;
    padding: 2em 2em 1.8em;
    background: linear-gradient(160deg, #FFF6D6, #FFEFC0);
    border-radius: .3em .3em 1.4em .3em;
    box-shadow: .2em .8em 2em rgba(190, 160, 70, .28);
    transform: rotate(1.5deg);
    overflow: hidden;
}

.tsp-sticky__star {
    position: absolute;
    top: 1.2em;
    right: 1.6em;
    width: 2em;
    height: 2em;
}

.tsp-sticky__fold {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 2.6em 2.6em;
    border-color: transparent transparent rgba(0, 0, 0, .07) transparent;
    border-bottom-right-radius: 1.4em;
}

.tsp-sticky__doodle {
    position: absolute;
    width: 1.4em;
    height: 1.4em;
}

.tsp-sticky__doodle--a {
    top: 7em;
    right: 1.4em;
    transform: rotate(12deg);
}

.tsp-sticky__doodle--b {
    bottom: 6.4em;
    left: 1.2em;
    transform: rotate(-10deg);
}

.tsp-sticky__photo-wrap {
    position: relative;
    width: 13em;
    height: 9.6em;
    flex-shrink: 0;
    margin: .4em auto 1.4em;
    padding: .6em;
    background: #fff;
    box-shadow: 0 .4em 1em rgba(0, 0, 0, .12);
    transform: rotate(-3deg);
}

.tsp-sticky__photo {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #FFE3EC, #FFEFD9);
}

.tsp-sticky__tape {
    position: absolute;
    top: -.9em;
    left: 50%;
    width: 5.2em;
    height: 1.8em;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(245, 138, 168, .55);
    box-shadow: 0 .1em .3em rgba(0, 0, 0, .1);
    z-index: 2;
}

.tsp-sticky__msg {
    flex: 1 1 0;
    min-height: 0;
    padding: .8em .4em 0;
    overflow: hidden;
}

.tsp-sticky__msg .tsp-line {
    height: 1em;
    margin-bottom: 1.4em;
    background: rgba(106, 88, 54, .2);
}

.tsp-sticky__name {
    flex-shrink: 0;
    margin-top: 1em;
    font-family: "Patrick Hand", "Caveat", cursive;
    font-size: 1.6em;
    font-weight: 700;
    color: #C77E45;
    text-align: right;
    white-space: nowrap;
}

/* ============================================================
   TICKET — card 236x390, viền 2px + dashed trong, khoét notch
   ============================================================ */
.tsp--ticket {
    --tsp-notch-y: 16.45em;
    --tsp-notch-r: 1.4em;
    width: 23.6em;
    height: 39em;
    border: .2em solid rgba(205, 130, 155, .72);
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.28)),
                linear-gradient(135deg, #FFEAF1 0%, #EAF8F0 52%, #EAF4FF 100%);
    box-shadow: 0 1.8em 3.8em rgba(230, 160, 185, .28);
    -webkit-mask:
        radial-gradient(circle var(--tsp-notch-r) at 0 var(--tsp-notch-y), #0000 calc(var(--tsp-notch-r) - .5px), #000 var(--tsp-notch-r)),
        radial-gradient(circle var(--tsp-notch-r) at 100% var(--tsp-notch-y), #0000 calc(var(--tsp-notch-r) - .5px), #000 var(--tsp-notch-r));
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle var(--tsp-notch-r) at 0 var(--tsp-notch-y), #0000 calc(var(--tsp-notch-r) - .5px), #000 var(--tsp-notch-r)),
        radial-gradient(circle var(--tsp-notch-r) at 100% var(--tsp-notch-y), #0000 calc(var(--tsp-notch-r) - .5px), #000 var(--tsp-notch-r));
    mask-composite: intersect;
}

/* viền dashed bên trong */
.tsp--ticket::before {
    content: "";
    position: absolute;
    inset: 1em;
    border: .2em dashed rgba(196, 115, 145, .68);
    pointer-events: none;
    z-index: 5;
}

.tsp-ticket__top {
    position: relative;
    height: 15em;
    flex-shrink: 0;
    background: linear-gradient(135deg, #FFDDE9 0%, #E8F7EF 55%, #E8F1FF 100%);
}

.tsp-ticket__img {
    position: absolute !important;
    inset: .8em;
    border-radius: .8em;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.75), transparent 40%),
                linear-gradient(135deg, #f9cfdd 0%, #d5efe1 55%, #d6e6fb 100%);
}

.tsp-ticket__perf {
    position: relative;
    height: 2.5em;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, transparent 0 1.6em, rgba(255,255,255,.55) 1.6em calc(100% - 1.6em), transparent calc(100% - 1.6em));
}

.tsp-ticket__perf::before {
    content: "";
    width: calc(100% - 4.6em);
    border-top: .25em dashed rgba(196, 115, 145, .65);
}

.tsp-ticket__notch {
    position: absolute;
    top: 50%;
    width: 2.7em;
    height: 3em;
    border: .2em solid rgba(205, 130, 155, .72);
    border-radius: 50%;
    z-index: 10;
}

.tsp-ticket__notch--l {
    left: 0;
    transform: translate(-50%, -52%);
    clip-path: inset(0 0 0 50%);
}

.tsp-ticket__notch--r {
    right: 0;
    transform: translate(50%, -52%);
    clip-path: inset(0 50% 0 0);
}

.tsp-ticket__stub {
    position: relative;
    flex: 1;
    display: flex !important;
    flex-direction: column;
    padding: 1.8em 1.8em 1.4em;
    background: linear-gradient(180deg, #FFF9F1 0%, #FFF2F6 100%);
}

.tsp-ticket__head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: .8em;
    margin-bottom: 1em;
}

.tsp-ticket__kicker {
    font-size: 1.05em;
    font-weight: 800;
    letter-spacing: .1em;
    color: #D68FA8;
    white-space: nowrap;
}

.tsp-ticket__train {
    flex: 0 0 2.2em;
    width: 2.2em;
    height: 2.2em;
}

.tsp-ticket__msg {
    position: relative;
    height: 8em;
    flex-shrink: 0;
    overflow: hidden;
    padding: 1.4em 1.2em 1em;
    background: rgba(255, 255, 255, .56);
    border: 1px solid rgba(246, 175, 195, .32);
    border-radius: 1.4em;
    box-shadow: 0 .5em 1.4em rgba(230, 170, 190, .12);
}

.tsp-ticket__msg .tsp-line {
    height: .85em;
    margin-bottom: 1.15em;
    background: rgba(90, 74, 82, .16);
}

.tsp-ticket__meta {
    position: relative;
    height: 3.8em;
    margin-top: 1.2em;
    border-top: .15em dashed rgba(205, 143, 165, .38);
}

.tsp-ticket__barcode {
    position: absolute;
    top: .4em;
    left: 0;
    right: 0;
    height: 3em;
    background: repeating-linear-gradient(90deg,
        #B7899A 0 .2em, transparent .2em .4em,
        #B7899A .4em .5em, transparent .5em .8em,
        #B7899A .8em 1em, transparent 1em 1.3em);
    opacity: .45;
}

.tsp-ticket__name {
    position: relative;
    z-index: 2;
    display: inline-block !important;
    margin: .55em 0 0 .3em;
    padding: .1em .5em;
    font-size: 1.4em;
    font-weight: 700;
    color: #C9859C;
    white-space: nowrap;
    background: rgba(255, 249, 241, .88);
    border-radius: .3em;
    box-shadow: 0 0 0 .2em rgba(255, 249, 241, .88);
}

/* ============================================================
   MINIMAL — card 230x400, viền 1px #F0E7EA, bo 8px
   ============================================================ */
.tsp--min {
    width: 23em;
    height: 40em;
    padding: 1.4em;
    background: #fff;
    border: .1em solid #F0E7EA;
    border-radius: .8em;
    box-shadow: 0 .6em 2em rgba(150, 130, 140, .16);
    overflow: hidden;
}

.tsp-min__photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
    border-radius: .4em;
    border: .1em solid #EFE7EA;
    background: linear-gradient(135deg, #EADDE2, #F6EEF1);
}

.tsp-min__rule {
    width: 3.4em;
    height: .3em;
    flex-shrink: 0;
    border-radius: .3em;
    background: #F58AA8;
    margin: 1.8em 0 1.2em;
}

.tsp-min__msg {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.tsp-min__msg .tsp-line {
    height: .85em;
    margin-bottom: 1.25em;
    background: rgba(74, 64, 70, .13);
}

.tsp-min__foot {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding-top: 1.2em;
    border-top: .1em solid #F2ECEE;
}

.tsp-min__name {
    font-size: 1.3em;
    font-weight: 600;
    color: #8A5C6C;
    white-space: nowrap;
}

.tsp-min__react {
    width: 1.6em;
    height: 1.6em;
}

.tsp-min__react svg {
    width: 100%;
    height: 100%;
}

/* ============================================================
   TAPE — card 244x400 (dọc), nền hồng, nhãn kem + 2 cuộn băng
   ============================================================ */
.tsp--tape {
    width: 24.4em;
    height: 40em;
    background: #F58AA8;
    border-radius: 1.4em;
    box-shadow: 0 1.2em 2.8em rgba(214, 120, 150, .4);
    overflow: hidden;
}

.tsp-tape__label {
    flex: 1 1 0;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
    gap: .8em;
    margin: 1.2em 1.2em 0;
    padding: 1.2em;
    background: #FFF6F0;
    border: .2em solid #FFD9C2;
    border-radius: .8em;
}

.tsp-tape__brand {
    flex-shrink: 0;
    text-align: center;
    font-size: 1.1em;
    font-weight: 800;
    letter-spacing: .18em;
    color: #E0728E;
    white-space: nowrap;
}

.tsp-tape__reels {
    display: flex !important;
    align-items: center;
    gap: .8em;
    flex-shrink: 0;
}

.tsp-tape__reel {
    width: 3.4em;
    height: 3.4em;
    flex: none;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: .3em solid #C9A98F;
    background: radial-gradient(circle, #fff 0 30%, #EBD9CE 31% 100%);
}

.tsp-tape__hub {
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    background: #C9A98F;
    box-shadow: 0 0 0 .3em #fff, 0 0 0 .5em #C9A98F;
}

.tsp-tape__window {
    flex: 1;
    height: 9.6em;
    border-radius: .4em;
    border: .2em solid #E9CBBA;
    background: linear-gradient(135deg, #FFE3EC, #FFEFD9);
}

.tsp-tape__msg {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding-top: .6em;
}

.tsp-tape__msg .tsp-line {
    height: .85em;
    margin: 0 auto 1.05em;
    background: rgba(90, 74, 82, .15);
}

.tsp-tape__base {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 1.2em;
    flex-shrink: 0;
    padding: 1em 1.2em 1.2em;
}

.tsp-tape__screw {
    width: .7em;
    height: .7em;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
}

.tsp-tape__name {
    font-size: 1.5em;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

/* ============================================================
   DREAM — card 238x400, gradient bầu trời, bo 22px, ảnh tròn
   ============================================================ */
.tsp--dream {
    width: 23.8em;
    height: 40em;
    padding: 2.6em 2em 2.2em;
    align-items: center;
    border-radius: 2.2em;
    background: linear-gradient(170deg, #BCE0FF 0%, #D9C9F2 48%, #FFD7E6 100%);
    box-shadow: 0 1.2em 3em rgba(150, 170, 220, .36);
    overflow: hidden;
}

.tsp-dream__cloud,
.tsp-dream__star {
    position: absolute;
}

.tsp-dream__cloud {
    filter: drop-shadow(0 .3em .5em rgba(120, 140, 190, .25));
}

.tsp-dream__cloud--a { top: 1.4em; left: -.6em; width: 4.6em; height: 3em; }
.tsp-dream__cloud--b { bottom: 5.6em; right: -.4em; width: 3.2em; height: 2.1em; opacity: .9; }
.tsp-dream__star--a { top: 2.2em; right: 2.6em; width: 1.4em; height: 1.4em; }
.tsp-dream__star--b { top: 9.2em; left: 2.2em; width: 1.1em; height: 1.1em; }

.tsp-dream__cloud svg,
.tsp-dream__star svg {
    width: 100%;
    height: 100%;
}

.tsp-dream__photo {
    position: relative;
    z-index: 2;
    width: 11em;
    height: 11em;
    flex-shrink: 0;
    margin: .6em auto 1.4em;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.8), transparent 45%),
                linear-gradient(135deg, #FFE3EC, #E6EEFF);
    box-shadow: 0 .6em 1.6em rgba(120, 140, 190, .35), 0 0 0 .5em rgba(255, 255, 255, .7);
}

.tsp-dream__msg {
    position: relative;
    z-index: 2;
    align-self: stretch;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.tsp-dream__msg .tsp-line {
    height: .9em;
    margin: 0 auto 1.2em;
    background: rgba(91, 81, 112, .2);
}

.tsp-dream__sign {
    position: relative;
    z-index: 2;
    display: flex !important;
    align-items: center;
    gap: .6em;
    flex-shrink: 0;
    padding: .5em 1.4em;
    border-radius: 99em;
    background: rgba(255, 255, 255, .7);
}

.tsp-dream__sign svg {
    width: 1.4em;
    height: 1.4em;
}

.tsp-dream__name {
    font-size: 1.5em;
    font-weight: 700;
    color: #8A6CB0;
    white-space: nowrap;
}

/* ============================================================
   CHAT — card 244x400, nền trắng, bo 22px, bong bóng hồng
   ============================================================ */
.tsp--chat {
    width: 24.4em;
    height: 40em;
    padding: 1.4em 1.4em 1.8em;
    background: #fff;
    border: .15em solid #FFE3EC;
    border-radius: 2.2em;
    box-shadow: 0 1em 2.6em rgba(214, 150, 170, .26);
    overflow: hidden;
}

.tsp-chat__head {
    display: flex !important;
    align-items: center;
    gap: .8em;
    flex-shrink: 0;
    margin-bottom: 1.2em;
}

.tsp-chat__avatar {
    width: 3em;
    height: 3em;
    flex: none;
}

.tsp-chat__avatar svg {
    width: 100%;
    height: 100%;
}

.tsp-chat__who {
    flex: 1;
    min-width: 0;
}

.tsp-chat__name {
    font-size: 1.4em;
    font-weight: 700;
    color: #5A4A52;
    white-space: nowrap;
}

.tsp-chat__status {
    font-size: 1em;
    font-weight: 600;
    color: #9BD6B4;
    white-space: nowrap;
}

.tsp-chat__dot {
    width: .5em;
    height: .5em;
    flex: none;
    border-radius: 50%;
    background: #D9C7CE;
}

.tsp-chat__photo {
    width: 80%;
    height: 11.6em;
    flex-shrink: 0;
    margin: 0 0 .8em auto;
    border-radius: 1.6em 1.6em .4em 1.6em;
    background: linear-gradient(135deg, #FFE3EC, #E2F4EA);
}

.tsp-chat__bubble {
    position: relative;
    width: 80%;
    flex-shrink: 0;
    margin-left: auto;
    padding: 1.4em 1.4em .5em;
    border-radius: 1.6em 1.6em 1.6em .4em;
    background: linear-gradient(135deg, #FFD9E4, #FFC9D9);
}

.tsp-chat__bubble .tsp-line {
    height: .85em;
    margin: 0 0 1.1em auto;
    background: rgba(106, 73, 84, .2);
}

.tsp-chat__react {
    position: absolute;
    left: -.8em;
    bottom: -.8em;
    width: 2.6em;
    height: 2.6em;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 .2em .6em rgba(0, 0, 0, .14);
}

.tsp-chat__react svg {
    width: 1.5em;
    height: 1.5em;
}

/* ============================================================
   TRANG "KHÁM PHÁ LƯU BÚT" (/luu-but, Views/Demo/Memory.cshtml)
   Bundle: ~/Content/memory/showcase/css (kèm zmysite_memory_tile_sample.css)
   Tiền tố class: sc-
   ============================================================ */

/* Mỗi section chừa chỗ cho navbar + thanh mục lục khi nhảy tới bằng #id */
.sc-section {
    scroll-margin-top: 140px;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.sc-section-alt {
    background-color: #F7F8FC;
}

.sc-section-title {
    font-size: 2.2rem;
}

.sc-section-sub {
    color: #6c757d;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- 0. Thanh mục lục dính ---------- */
.sc-toc {
    position: sticky;
    top: 75px;
    z-index: 1020;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}

.sc-toc-inner {
    display: flex;
    gap: .5rem;
    justify-content: center;
    padding: .6rem 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

    .sc-toc-inner::-webkit-scrollbar {
        display: none;
    }

.sc-chip {
    flex: 0 0 auto;
    display: inline-block;
    padding: .4rem 1rem;
    border: 1px solid #e3e6ef;
    border-radius: 50rem;
    background: #fff;
    color: #444;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

    /* Chỉ thiết bị có chuột: trên điện thoại hover bị "kẹt" sau khi chạm */
    @media (hover: hover) {
        .sc-chip:hover {
            color: #3CB815;
            border-color: #3CB815;
        }
    }

    .sc-chip.active {
        background: #3CB815;
        border-color: #3CB815;
        color: #fff;
    }

/* ---------- 1. Hero ---------- */
.sc-hero {
    padding-top: 9rem;
    padding-bottom: 3rem;
    background: linear-gradient(135deg, #fff0f5 0%, #fff7ec 55%, #f1fbea 100%);
}

.sc-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: .35rem .9rem;
    border-radius: 50rem;
    background: #ffe3ec;
    color: #d63d74;
    font-size: .85rem;
    font-weight: 700;
}

.sc-hero-title {
    font-size: 3.4rem;
    line-height: 1.15;
    color: #4a1d33;
}

.sc-hero-sub {
    max-width: 520px;
    font-size: 1.15rem;
    color: #555;
}

/* Dải số liệu: số to + nhãn nhỏ, ngăn bằng vạch mảnh */
.sc-stats {
    display: inline-flex;
    align-items: stretch;
    padding: .9rem 0;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
}

.sc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 92px;
    padding: 0 1.1rem;
}

    .sc-stat + .sc-stat {
        border-left: 1px solid #eadfe4;
    }

    .sc-stat b {
        font-family: "Lora", serif;
        font-size: 1.75rem;
        line-height: 1.1;
        color: #4a1d33;
    }

    .sc-stat span {
        margin-top: .2rem;
        font-size: .8rem;
        color: #6c757d;
    }

.sc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.sc-hero-btn {
    padding: .7rem 1.8rem;
    font-weight: 600;
}

.sc-hero-link {
    font-weight: 600;
    color: #4a1d33;
    text-decoration: none;
    border-bottom: 2px solid #ffb3c9;
}

    .sc-hero-link:hover {
        color: #d63d74;
    }

.sc-hero-img {
    max-width: 440px;
    width: 100%;
}

/* ---------- 2. Tính năng theo hành trình ---------- */
.sc-group {
    margin-bottom: 1.25rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
    overflow: hidden;
}

.sc-group-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: 1rem 1.25rem;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: "Lora", serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #4a1d33;
}

.sc-group-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #ffa900;
    color: #fff;
    font-family: "Open Sans", sans-serif;
    font-size: 1rem;
}

.sc-group-who {
    font-family: "Open Sans", sans-serif;
    font-size: .85rem;
    font-weight: 400;
    color: #6c757d;
}

.sc-group-caret {
    margin-left: auto;
    transition: transform .2s ease;
}

.sc-group-head.collapsed .sc-group-caret {
    transform: rotate(-90deg);
}

.sc-group-body {
    padding: 0 1.25rem 1.25rem;
}

.sc-feature {
    position: relative;
    display: flex;
    gap: .85rem;
    height: 100%;
    padding: 1rem;
    border: 1px solid #eef0f5;
    border-radius: .85rem;
}

.sc-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eaf7e4;
    color: #3CB815;
}

.sc-feature-soon h6 {
    padding-right: 4.5rem;
}

.sc-feature-vip .sc-feature-icon {
    background: #fff3dc;
    color: #ffa900;
}

.sc-feature h6 {
    margin-bottom: .25rem;
    padding-right: 2rem;
    font-weight: 700;
}

.sc-feature p {
    margin-bottom: 0;
    font-size: .9rem;
    color: #555;
}

/* VIP: vòng tròn cam + vương miện ở góc khối; thường: không gắn gì */
.sc-vip-dot {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffc247 0%, #ff9a2e 100%);
    color: #fff;
    font-size: .7rem;
    box-shadow: 0 3px 8px rgba(255, 154, 46, .35);
}

.sc-vip-dot-inline {
    position: static;
    width: 22px;
    height: 22px;
    margin: 0 .15rem;
    vertical-align: -4px;
    font-size: .6rem;
}

.sc-feature-vip {
    border-color: #ffd9a3;
    background: #fffbf3;
}

.sc-soon {
    position: absolute;
    top: .8rem;
    right: .8rem;
    padding: .1rem .55rem;
    border-radius: 50rem;
    background: #eef0f5;
    color: #6c757d;
    font-size: .7rem;
    font-weight: 700;
}

.sc-feature-soon {
    border-style: dashed;
}

/* ---------- 4. Thư viện ảnh ---------- */
.sc-lib-tabs .nav-link {
    margin: 0 .25rem .5rem;
    border-radius: 50rem;
    color: #444;
    font-weight: 600;
}

    .sc-lib-tabs .nav-link.active {
        background: #3CB815;
        color: #fff;
    }

.sc-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .75rem;
}

.sc-grid-item {
    aspect-ratio: 1 / 1;
    border-radius: .75rem;
    background: #f1f2f6;
    overflow: hidden;
}

    .sc-grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Khung avatar có nền trong suốt: không cắt, nền caro nhạt để thấy viền khung */
.sc-grid-frame .sc-grid-item {
    background: #fff;
    border: 1px solid #eef0f5;
}

    .sc-grid-frame .sc-grid-item img {
        object-fit: contain;
        padding: .5rem;
    }

/* ---------- 5. Font chữ ---------- */
.sc-font {
    height: 100%;
    padding: 1.25rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
    text-align: center;
}

.sc-font-sample {
    font-size: 2rem;
    line-height: 1.3;
    color: #4a1d33;
    word-break: break-word;
}

.sc-font-name {
    margin-top: .5rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .5px;
    color: #6c757d;
    text-transform: uppercase;
}

/* ---------- 6. Lưu bút mẫu ---------- */
.sc-demo {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
    overflow: hidden;
    color: #333;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .sc-demo:hover,
    .sc-demo:focus {
        color: #333;
    }

@media (hover: hover) {
    .sc-demo:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(214, 92, 128, .18);
    }

        .sc-demo:hover .sc-demo-go {
            color: #d63d74;
        }
}

/* Ảnh bìa: hình nền thật của cuốn lưu bút, mẫu thẻ đặt giữa */
.sc-demo-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    overflow: hidden;
    background: #fff0f5;
}

.sc-demo-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mẫu thẻ thu nhỏ (_TileSample, khung .mst-template-thumb tỉ lệ 27:45) */
.sc-demo-tile.mst-template-thumb {
    position: relative;
    width: 118px;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .22));
}

.sc-demo-cover .sc-vip-dot {
    top: .75rem;
    right: .75rem;
}

.sc-demo-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1rem 1.1rem 1.1rem;
}

.sc-demo-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .25rem;
    font-family: "Lora", serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #4a1d33;
}

.sc-demo-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .6rem;
    font-size: .85rem;
    color: #6c757d;
}

.sc-demo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .9rem;
}

    .sc-demo-chips span {
        padding: .15rem .6rem;
        border-radius: 50rem;
        background: #f1f2f6;
        font-size: .75rem;
        font-weight: 600;
        color: #555;
    }

.sc-demo-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid #f0eef2;
    font-size: .85rem;
}

.sc-demo-count {
    color: #6c757d;
}

.sc-demo-go {
    font-weight: 700;
    color: #3CB815;
    transition: color .2s ease;
}

/* ---------- 7. Thường vs VIP ---------- */
.sc-compare {
    max-width: 760px;
    margin: 0 auto;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
    overflow: hidden;
}

.sc-compare-row > div {
    padding: .75rem 1rem;
}

.sc-compare-head {
    background: #4a1d33;
    color: #fff;
    font-weight: 700;
}

.sc-compare-row + .sc-compare-row {
    border-top: 1px solid #eef0f5;
}

.sc-compare-vip {
    background: #fffaf0;
}

.sc-compare-head .sc-compare-vip {
    background: #ffa900;
}

.sc-compare .fa-check-circle {
    color: #3CB815;
}

.sc-compare .fa-minus {
    color: #c3c7d1;
}

/* ---------- 8. CTA cuối ---------- */
.sc-cta {
    padding: 3rem 1.5rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #fff0f5 0%, #fff3e3 100%);
    text-align: center;
}

/* Desktop: nhóm tính năng luôn mở (d-md-block), tiêu đề nhóm không bấm được */
@media (min-width: 768px) {
    .sc-group-head {
        pointer-events: none;
    }

    .sc-group-caret {
        display: none;
    }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 991.98px) {
    .sc-toc {
        top: 62px;
    }

    .sc-hero-actions {
        justify-content: center;
    }

    .sc-hero-sub {
        margin-left: auto;
        margin-right: auto;
    }

    /* 1 hàng ví dụ: 4 ảnh */
    .sc-grid {
        grid-template-columns: repeat(4, 1fr);
    }

        .sc-grid .sc-grid-item:nth-child(n+5) {
            display: none;
        }
}

@media (max-width: 768px) {
    .sc-section {
        scroll-margin-top: 120px;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .sc-section-title {
        font-size: 1.6rem;
    }

    .sc-toc-inner {
        justify-content: flex-start;
        padding-left: .25rem;
        padding-right: .25rem;
    }

    .sc-hero {
        padding-top: 7rem;
    }

    .sc-hero-sub {
        font-size: 1rem;
    }

    .sc-hero-img {
        max-width: 70%;
    }

    .sc-hero-title {
        font-size: 2.2rem;
    }

    .sc-stats {
        display: flex;
        padding: .75rem 0;
    }

    .sc-stat {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 .25rem;
    }

        .sc-stat b {
            font-size: 1.35rem;
        }

        .sc-stat span {
            font-size: .72rem;
        }

    .sc-hero-actions {
        flex-direction: column;
        gap: .9rem;
    }

    .sc-hero-btn {
        width: 100%;
    }

    .sc-group-head {
        font-size: 1.1rem;
    }

    /* Dải vuốt ngang lưu bút mẫu (~80% màn hình) — cuộn bên trong section */
    .sc-scroller {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .75rem;
    }

        .sc-scroller > [class*="col-"] {
            flex: 0 0 80%;
            width: 80%;
            max-width: 80%;
            scroll-snap-align: start;
        }

    .sc-demo-cover {
        height: 210px;
    }

    .sc-demo-tile.mst-template-thumb {
        width: 100px;
    }

    /* 1 hàng ví dụ: 3 ảnh */
    .sc-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem;
    }

        .sc-grid .sc-grid-item:nth-child(n+4) {
            display: none;
        }

    /* 4 tab thư viện: 1 dải cuộn ngang thay vì xếp dọc 4 hàng */
    .sc-lib-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start !important;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

        .sc-lib-tabs::-webkit-scrollbar {
            display: none;
        }

        .sc-lib-tabs .nav-link {
            margin: 0 .25rem .25rem 0;
            padding: .4rem .85rem;
            font-size: .9rem;
        }

    .sc-font-sample {
        font-size: 1.5rem;
    }

    .sc-compare-row > div {
        padding: .6rem .6rem;
        font-size: .85rem;
    }
}