@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Noto+Serif:ital,wght@0,400;0,600;0,700;1,400&display=swap&subset=vietnamese');

#tt-emag {
    display: block !important;
    width: 100% !important;
    max-width: 1920px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    color: #2a2a2a !important;
    font-family: Inter, Arial, sans-serif !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
    position: relative !important;
    text-align: left !important;
    line-height: 1.5 !important;
    font-size: 16px !important;
}
#tt-emag *, #tt-emag *::before, #tt-emag *::after { box-sizing: border-box !important; }
#tt-emag img { max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; float: none !important; vertical-align: top !important; }
#tt-emag p { margin: 0 !important; padding: 0 !important; }

/* Tít phụ — khóa size, không background:none */
#tt-emag .section-title h2,
#tt-emag .section-title h2 *,
#tt-emag .section-title .subtitle,
#tt-emag .section-title .subtitle * {
    color: #7a3b12 !important;
    -webkit-text-fill-color: #7a3b12 !important;
    background-image: none !important;
    background-color: transparent !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}
#tt-emag .section-title h2,
#tt-emag .section-title h2 * {
    color: #e08a16 !important;
    -webkit-text-fill-color: #e08a16 !important;
    font-size: clamp(32px, 3.1vw, 46px) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}
#tt-emag .section-title .subtitle,
#tt-emag .section-title .subtitle * {
    font-size: clamp(36px, 3.6vw, 56px) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}
#tt-emag .sapo,
#tt-emag .sec-text,
#tt-emag .sec-text p {
    font-family: "Noto Serif", Georgia, serif !important;
    text-align: justify !important;
    color: #2a2a2a !important;
    -webkit-text-fill-color: #2a2a2a !important;
}

#tt-emag .cover {
    position: relative;
    margin: 0;
    padding: 0;
    background: #f4e6cf;
}
#tt-emag .cover-bkg { display: block; width: 100%; height: auto; }
#tt-emag .cover-brand,
#tt-emag .cover-tit {
    position: absolute;
    left: 50%;
    top: 4%;
    width: 90% !important;
    max-width: 90% !important;
    height: auto !important;
    pointer-events: none;
}
#tt-emag .cover-brand {
    clip-path: inset(0 0 60% 0);
    transform-origin: 50% 22%;
    animation: ttLogoIn .75s cubic-bezier(.22, 1, .36, 1) .12s both;
}
#tt-emag .cover-tit {
    clip-path: inset(40% 0 0 0);
    animation: ttTitleIn .8s cubic-bezier(.22, 1, .36, 1) .42s both;
}
@keyframes ttLogoIn {
    from { opacity: 0; transform: translateX(-50%) scale(.78); }
    to { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes ttTitleIn {
    from { opacity: 0; transform: translateX(-50%) translateY(22px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#tt-emag .article { background: #ffffff; padding-bottom: 88px; }

#tt-emag .section-title {
    width: min(1480px, calc(100% - 48px));
    margin: 56px auto 0;
    padding: 0;
    text-align: center;
}
#tt-emag .sec-mark {
    display: block;
    width: 88px !important;
    height: 83px !important;
    max-width: 88px !important;
    margin: 0 auto 14px !important;
    object-fit: contain;
}
#tt-emag .section-title h2 {
    display: block;
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-align: center;
}
#tt-emag .section-title .subtitle {
    display: block;
    margin: 8px 0 0;
    font-family: Inter, Arial, sans-serif;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-align: center;
}

#tt-emag .sec-text {
    width: 800px;
    max-width: calc(100% - 48px);
    margin: 28px auto 0;
    font-size: 18px;
    line-height: 1.85;
}
#tt-emag .sec-text p + p { margin-top: 18px !important; }

#tt-emag .fig-wide,
#tt-emag .fig-inset,
#tt-emag .quote {
    margin-top: 40px;
}
#tt-emag .fig-wide { width: 100%; margin-left: 0; margin-right: 0; }
#tt-emag .fig-wide img,
#tt-emag .fig-inset img { display: block; width: 100%; height: auto; }
#tt-emag .fig-inset {
    width: 800px;
    max-width: calc(100% - 48px);
    margin-left: auto;
    margin-right: auto;
}

#tt-emag .hotspot {
    position: relative;
    width: 100%;
    margin-top: 40px;
    aspect-ratio: 3840 / 2160;
    overflow: hidden;
    background: #163024;
}
#tt-emag .hotspot-bg,
#tt-emag .hotspot-view {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}
#tt-emag .hotspot-view { z-index: 2; cursor: pointer; }
#tt-emag .hotspot-view[hidden] { display: none !important; }
#tt-emag .hotspot-dot {
    position: absolute;
    z-index: 3;
    right: 2.8%;
    width: 9.7% !important;
    height: auto !important;
    aspect-ratio: 1;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 4px solid #ffffff !important;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
    cursor: pointer;
    opacity: 0;
    transform: scale(.35);
    transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s ease, filter .35s ease;
}
#tt-emag .hotspot-dot img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    pointer-events: none;
}
#tt-emag .hotspot-dot.dot-1 { top: 9.7%; }
#tt-emag .hotspot-dot.dot-2 { top: 29.81%; }
#tt-emag .hotspot-dot.dot-3 { top: 49.91%; }
#tt-emag .hotspot.is-in .hotspot-dot {
    opacity: 1;
    transform: scale(1);
    animation: ttPulse 2.6s ease-in-out .85s infinite;
}
#tt-emag .hotspot.is-in .dot-2 { animation-delay: 1.05s; }
#tt-emag .hotspot.is-in .dot-3 { animation-delay: 1.25s; }
@keyframes ttPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
#tt-emag .hotspot.is-in.is-full .hotspot-dot { filter: brightness(.45) saturate(.55); }
#tt-emag .hotspot.is-in.is-full .hotspot-dot.is-on { filter: none; }
#tt-emag .hotspot-fly {
    position: absolute;
    z-index: 5;
    margin: 0 !important;
    max-width: none !important;
    object-fit: cover;
    pointer-events: none;
    box-shadow: 0 0 0 4px #ffffff, 0 8px 22px rgba(0, 0, 0, .28);
}
#tt-emag .hotspot-fly.is-go {
    transition: left 1.15s cubic-bezier(.4, .05, .2, 1), top 1.15s cubic-bezier(.4, .05, .2, 1), width 1.15s cubic-bezier(.4, .05, .2, 1), height 1.15s cubic-bezier(.4, .05, .2, 1), border-radius 1.15s cubic-bezier(.4, .05, .2, 1);
}

#tt-emag .quote {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    overflow: visible;
    background: none;
}
#tt-emag .q-bg {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
}
#tt-emag .q-art {
    position: absolute;
    left: 50%;
    width: 90% !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translateX(-50%);
}
#tt-emag .quote-1 .q-art { top: 12.93%; clip-path: inset(0 0 18% 0); }
#tt-emag .quote-1 .q-name {
    clip-path: inset(81% 0 3% 0);
    transform: translateX(calc(-50% + 1.67%));
}
#tt-emag .quote-2 .q-art { top: 8.2%; width: 78% !important; }
#tt-emag .quote-3 .q-art { top: 0.6%; width: 68% !important; }

#tt-emag .info {
    position: relative;
    width: min(1560px, calc(100% - 48px));
    margin: 48px auto 0;
    padding: 4px 0 0;
    text-align: center;
    background: #ffffff;
    overflow: visible;
}
#tt-emag .info-body {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
    padding: 10px 2.2% 0;
    background: transparent;
}
#tt-emag .info-silk {
    position: relative;
    z-index: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    margin-top: calc(4px - 11.6%);
    padding-bottom: 23.4%;
    pointer-events: none;
}
#tt-emag .info-wave {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    margin: -16% 0 0 !important;
    pointer-events: none;
}
#tt-emag .info-tit {
    display: block;
    width: min(1120px, 96%) !important;
    height: auto !important;
    margin: 0 auto 40px !important;
}
#tt-emag .info-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 0;
    align-items: start;
}
#tt-emag .info-item { position: relative; padding: 0 8px; }
#tt-emag .info-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 8px;
    right: 0;
    width: 1px;
    background: rgba(176, 138, 82, .45);
}
#tt-emag .info-item img {
    display: block;
    width: 86px !important;
    height: 70px !important;
    max-width: 86px !important;
    margin: 0 auto 6px !important;
    object-fit: contain;
}
#tt-emag .info-num {
    margin: 0 !important;
    font-family: Inter, Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(44px, 4.6vw, 78px) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.03em;
    color: #8a3b12 !important;
    -webkit-text-fill-color: #8a3b12 !important;
    text-align: center !important;
}
#tt-emag .info-num span:not(.num) {
    font-size: 0.4em !important;
    font-weight: 800 !important;
    letter-spacing: 0;
    margin-left: 3px;
}
#tt-emag .info-num-top {
    font-size: clamp(42px, 3.8vw, 62px) !important;
    letter-spacing: -0.02em;
    line-height: 0.95 !important;
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
    min-height: calc(clamp(44px, 4.6vw, 78px) * 0.95);
    padding-top: 0 !important;
}
#tt-emag .info-cap {
    margin: 8px 0 0 !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #6a4a32 !important;
    -webkit-text-fill-color: #6a4a32 !important;
    text-align: center !important;
}

#tt-emag.is-ready .section-title,
#tt-emag.is-ready .sec-text,
#tt-emag.is-ready .quote,
#tt-emag.is-ready .fig-wide,
#tt-emag.is-ready .fig-inset {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .75s cubic-bezier(.22, 1, .36, 1);
}
#tt-emag.is-ready .section-title.is-in,
#tt-emag.is-ready .sec-text.is-in,
#tt-emag.is-ready .quote.is-in,
#tt-emag.is-ready .fig-wide.is-in,
#tt-emag.is-ready .fig-inset.is-in {
    opacity: 1;
    transform: none;
}
#tt-emag.is-ready .fig-inset {
    transform: translateY(48px);
    transition: opacity 1.05s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
#tt-emag.is-ready .info-tit {
    opacity: 0;
    transform: translateY(20px);
}
#tt-emag.is-ready .info-item img {
    opacity: 0;
    transform: translateY(12px);
}
#tt-emag.is-ready .info-num,
#tt-emag.is-ready .info-cap { opacity: 0; }
#tt-emag.is-ready .info-num-top { transform: scale(.96); }
#tt-emag.is-ready .info.is-play .info-tit {
    animation: ttInfoTit .6s ease forwards;
}
#tt-emag.is-ready .info.is-play .info-item img {
    animation: ttIconIn .5s ease forwards;
}
#tt-emag.is-ready .info.is-play .info-item:nth-child(1) img { animation-delay: .6s; }
#tt-emag.is-ready .info.is-play .info-item:nth-child(2) img { animation-delay: .72s; }
#tt-emag.is-ready .info.is-play .info-item:nth-child(3) img { animation-delay: .84s; }
#tt-emag.is-ready .info.is-play .info-item:nth-child(4) img { animation-delay: .96s; }
#tt-emag.is-ready .info.is-play .info-item:nth-child(5) img { animation-delay: 1.08s; }
#tt-emag.is-ready .info.is-play .info-item:nth-child(6) img { animation-delay: 1.2s; }
#tt-emag.is-ready .info.is-play .info-num {
    animation: ttFade .35s ease .6s forwards;
}
#tt-emag.is-ready .info.is-play .info-num-top {
    animation: ttTopIn .6s ease .6s forwards;
}
#tt-emag.is-ready .info.is-play .info-cap {
    animation: ttFade .5s ease .85s forwards;
}
@keyframes ttInfoTit {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
}
@keyframes ttIconIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
@keyframes ttFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ttTopIn {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 768px) {
    #tt-emag .section-title { width: calc(100% - 32px); margin-top: 56px; }
    #tt-emag .sec-text { max-width: calc(100% - 32px); font-size: 17px; }
    #tt-emag .quote { width: 100%; }
    #tt-emag .cover-brand,
    #tt-emag .cover-tit { width: 92% !important; max-width: 92% !important; top: 3.5%; }
    #tt-emag .info { width: calc(100% - 20px); }
    #tt-emag .info-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
    #tt-emag .info-item::after { display: none; }
    #tt-emag .info-item:nth-child(odd)::after { display: block; }
    #tt-emag .fig-inset { width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) {
    #tt-emag .cover-brand { display: none; }
    #tt-emag .cover-tit {
        animation: none;
        clip-path: none;
        opacity: 1;
        transform: translateX(-50%);
    }
    #tt-emag.is-ready .section-title,
    #tt-emag.is-ready .sec-text,
    #tt-emag.is-ready .quote,
    #tt-emag.is-ready .fig-wide,
    #tt-emag.is-ready .fig-inset,
    #tt-emag.is-ready .info-tit,
    #tt-emag.is-ready .info-item img,
    #tt-emag.is-ready .info-num,
    #tt-emag.is-ready .info-cap {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    #tt-emag .hotspot-dot { animation: none !important; }
}