:root{
    --bg:#f7f7f8;
    --white:#ffffff;
    --text:#141414;
    --muted:#6d7178;
    --line:#e6e6e8;
    --orange:#ff7800;
    --orange2:#ff9a12;
    --coin-yellow:#ffd04b;
    --coin-orange:#f4a21c;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

a{
    color:inherit;
    text-decoration:none;
}

.wrap{
    width:min(1080px,calc(100% - 24px));
    margin:auto;
}

/* HEADER */

.top{
    background:#fff;
    border-bottom:1px solid var(--line);
}

.nav{
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:#171717;
    font-size:18px;
    font-weight:800;
}

.brandmark{
    width:42px;
    height:42px;
    overflow:hidden;
    border-radius:50%;
    border:1px solid #ddd;
}

.brandmark img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.brand-text{
    color:#171717;
}

.nav nav{
    display:flex;
    gap:16px;
    font-size:13px;
    color:#696d74;
}

/* PAGE */

.coin-page{
    width:min(760px,calc(100% - 24px));
    margin:18px auto 40px;
}

.coin-panel{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:24px 30px 28px;
}

.hero{
    margin-bottom:22px;
}

.hero h1{
    margin:0;
    font-size:29px;
    line-height:1.15;
}

.hero p{
    margin:7px 0 0;
    color:var(--muted);
    font-size:14px;
}

/* ID */

.input-label{
    display:block;
    font-size:14px;
    font-weight:750;
    margin-bottom:7px;
}

.sm-id{
    width:100%;
    height:49px;
    padding:0 14px;
    border:1px solid #dcdde1;
    border-radius:10px;
    background:#fff;
    outline:none;
    font:inherit;
    font-size:16px;
}

.sm-id:focus{
    border-color:#b6b8bd;
}

/* TITLE */

.package-title{
    margin:24px 0 14px;
}

.package-title strong{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:22px;
}

/* COIN */

.ui-coin,
.mini-coin{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#f4a21c;
    border:3px solid #ffd04b;

    color:#ffd75c;

    box-shadow:
        inset 0 0 0 2px #ee9410;
}

.ui-coin{
    width:29px;
    height:29px;
    flex:0 0 29px;
}

.mini-coin{
    width:23px;
    height:23px;
    flex:0 0 23px;
    border-width:2px;
}

.ui-coin span,
.mini-coin span{
    position:relative;
    font-family:Arial,sans-serif;
    font-weight:900;
    line-height:1;
}

.ui-coin span{
    font-size:17px;
}

.mini-coin span{
    font-size:14px;
}

/* gạch trên */
.ui-coin span::before,
.mini-coin span::before{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    background:#ffd75c;
    border-radius:2px;
}

.ui-coin span::before{
    width:3px;
    height:6px;
    top:-6px;
}

.mini-coin span::before{
    width:2px;
    height:5px;
    top:-5px;
}

/* gạch dưới */
.ui-coin span::after,
.mini-coin span::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    background:#ffd75c;
    border-radius:2px;
}

.ui-coin span::after{
    width:3px;
    height:6px;
    bottom:-6px;
}

.mini-coin span::after{
    width:2px;
    height:5px;
    bottom:-5px;
}

/* LIST */

.package-list{
    display:grid;
    gap:9px;
}

.package-row{
    display:block;
    cursor:pointer;
}

.package-row input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.package-card{
    min-height:71px;

    display:grid;
    grid-template-columns:150px 1fr 130px;
    align-items:center;

    gap:16px;

    padding:11px 16px;

    border:1px solid var(--line);
    border-radius:10px;

    background:#fff;
}

.package-row.selected .package-card{
    border-color:#ffc16f;
    background:#fffdf9;
}

.money{
    font-size:25px;
    font-weight:800;
}

.coins{
    display:flex;
    align-items:center;
    gap:8px;
}

.coins b{
    font-size:19px;
}

.coins>span:last-child{
    color:#333;
    font-size:16px;
}

.choose-button{
    min-height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:7px;

    background:
        linear-gradient(180deg,#ff8f09,#ff7100);

    color:#fff;
    font-weight:700;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25);
}

/* TERMS */

.agreement{
    display:flex;
    align-items:flex-start;
    gap:8px;

    margin:18px 1px 13px;

    color:#70747b;
    font-size:12px;
}

.agreement input{
    margin-top:2px;
    accent-color:#ff7800;
}

.agreement a{
    color:#333;
    text-decoration:underline;
}

/* CREATE */

.payment-btn{
    margin-top:20px;
    width:100%;
    min-height:50px;

    border:0;
    border-radius:9px;

    background:linear-gradient(135deg,#16a34a 0%,#22c55e 50%,#15803d 100%);
    color:#fff;

    font-size:15px;
    font-weight:800;

    cursor:pointer;
}

/* GUIDE */

.guide-box{
    margin-top:14px;

    padding:18px 22px;

    background:#fff;

    border:1px solid var(--line);
    border-radius:13px;
}

.guide-box h2{
    margin:0 0 15px;

    display:flex;
    align-items:center;
    gap:7px;

    font-size:19px;
}

.guide-step{
    display:flex;
    align-items:center;
    gap:12px;

    margin:10px 0;

    font-size:14px;
}

.guide-step>b{
    width:26px;
    height:26px;

    display:grid;
    place-items:center;

    flex:0 0 26px;

    border-radius:50%;

    color:#fff;
    background:#ff7800;

    font-size:12px;
}

.guide-step>span{
    display:flex;
    align-items:center;
    gap:6px;
}

/* FOOTER */

.site-footer{
    margin-top:38px;
    padding:34px 16px 22px;

    border-top:1px solid #ececf0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafafa 100%
        );

    color:#74777d;
}

.footer-inner{
    width:min(760px,100%);
    margin:0 auto;
    text-align:center;
}

.footer-brand{
    position:relative;
    display:inline-block;

    margin-bottom:7px;

    font-size:20px;
    line-height:1.2;
    font-weight:900;

    color:#d79a00;
    -webkit-text-fill-color:#d79a00;

    text-decoration:none;
    cursor:pointer;

    text-shadow:
        0 0 2px rgba(255,210,70,.25),
        0 0 6px rgba(255,185,0,.15);

    animation:footerGoldGlow 1.15s ease-in-out infinite alternate;
}

.footer-brand:hover{
    transform:translateY(-1px);
}

@keyframes footerGoldGlow{
    0%{
        color:#c88b00;
        -webkit-text-fill-color:#c88b00;

        text-shadow:
            0 0 1px rgba(255,200,40,.20),
            0 0 4px rgba(255,170,0,.12);
    }

    100%{
        color:#ffd447;
        -webkit-text-fill-color:#ffd447;

        text-shadow:
            0 0 4px rgba(255,244,180,.85),
            0 0 9px rgba(255,201,35,.55),
            0 0 14px rgba(255,174,0,.20);
    }
}

.footer-description{
    font-size:12px;
    line-height:1.6;
    color:#73767c;
}

.footer-links{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

    margin-top:13px;

    font-size:12px;
    font-weight:600;
}

.footer-links a{
    color:#555960;
    text-decoration:none;
    transition:color .18s ease;
}

.footer-links a:hover{
    color:#111;
}

.footer-dot{
    color:#b6b8bd;
}

.footer-legal{
    margin:20px auto 0;
    padding-top:17px;

    max-width:680px;

    border-top:1px solid #ededf0;

    color:#92959b;

    font-size:10.5px;
    line-height:1.65;
}

.footer-bottom{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;

    margin-top:18px;

    color:#74777d;

    font-size:11px;
    font-weight:600;
}

.footer-bottom span:first-child{
    color:#b17d00;
    font-weight:700;
}

.footer-separator{
    color:#c4c6ca;
}

@media(max-width:600px){

    .site-footer{
        margin-top:28px;
        padding:28px 14px 20px;
    }

    .footer-brand{
    position:relative;
    display:inline-block;

    margin-bottom:7px;

    font-size:20px;
    line-height:1.2;
    font-weight:900;

    color:#d79a00;
    -webkit-text-fill-color:#d79a00;

    text-decoration:none;
    cursor:pointer;

    text-shadow:
        0 0 2px rgba(255,210,70,.25),
        0 0 6px rgba(255,185,0,.15);

    animation:footerGoldGlow 1.15s ease-in-out infinite alternate;
}

.footer-brand:hover{
    transform:translateY(-1px);
}

@keyframes footerGoldGlow{
    0%{
        color:#c88b00;
        -webkit-text-fill-color:#c88b00;

        text-shadow:
            0 0 1px rgba(255,200,40,.20),
            0 0 4px rgba(255,170,0,.12);
    }

    100%{
        color:#ffd447;
        -webkit-text-fill-color:#ffd447;

        text-shadow:
            0 0 4px rgba(255,244,180,.85),
            0 0 9px rgba(255,201,35,.55),
            0 0 14px rgba(255,174,0,.20);
    }
}

    .footer-links{
        gap:8px;
    }

    .footer-legal{
        font-size:10px;
    }

    .footer-bottom{
        flex-wrap:wrap;
        gap:6px;
    }
}
/* MOBILE */

@media(max-width:700px){

    body{
        background:#fff;
    }

    .wrap,
    .coin-page{
        width:calc(100% - 14px);
    }

    .nav{
        min-height:57px;
    }

    .brandmark{
        width:38px;
        height:38px;
    }

    .brand-text{
        font-size:16px;
    }

    .nav nav{
        display:none;
    }

    .coin-page{
        margin-top:8px;
    }

    .coin-panel{
        padding:18px 12px 20px;
        border-radius:13px;
    }

    .hero h1{
        font-size:23px;
    }

    .package-title strong{
        font-size:19px;
    }

    .package-card{
        grid-template-columns:68px 1fr 88px;
        gap:8px;
        min-height:64px;
        padding:9px 10px;
    }

    .money{
        font-size:18px;
    }

    .ui-coin{
        width:23px;
        height:23px;
        flex-basis:23px;
        border-width:2px;
    }

    .ui-coin span{
        font-size:14px;
    }

    .ui-coin span::before{
        width:2px;
        height:5px;
        top:-5px;
    }

    .ui-coin span::after{
        width:2px;
        height:5px;
        bottom:-5px;
    }

    .coins{
        gap:5px;
    }

    .coins b{
        font-size:15px;
    }

    .coins>span:last-child{
        font-size:12px;
    }

    .choose-button{
        min-height:37px;
        font-size:12px;
    }

    .agreement{
        font-size:11px;
    }

    .guide-box{
        padding:15px 13px;
    }

    .guide-step{
        font-size:12px;
    }

    .footer{
        display:block;
    }

    .footer div:last-child{
        margin-top:12px;
        flex-direction:column;
        gap:6px;
    }
}

/* ===== TIÊU ĐỀ + CỜ VIỆT NAM ===== */

.hero-title{
    display:flex;
    align-items:center;
    gap:9px;
}

.vn-flag{
    font-size:28px;
    line-height:1;
}

/* ===== PACKAGE SELECT DẠNG RÚT GỌN ===== */

.package-label{
    margin-top:20px;
}

.package-select{
    position:relative;
    width:100%;
}

.package-selected{
    width:100%;
    min-height:56px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:9px 14px;

    border:1px solid #dcdde1;
    border-radius:10px;

    background:#fff;
    color:#141414;

    cursor:pointer;
    text-align:left;
}

.package-selected:hover{
    border-color:#c8c9cd;
}

.selected-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.selected-left>span:last-child{
    display:flex;
    flex-direction:column;
}

.selected-left b{
    font-size:16px;
}

.selected-left small{
    margin-top:2px;
    color:#f08b00;
    font-size:12px;
}

.select-arrow{
    color:#969aa2;
    font-size:22px;
}

/* DROPDOWN */

.package-dropdown{
    display:none;

    position:absolute;
    z-index:50;

    left:0;
    right:0;

    margin-top:7px;

    max-height:390px;
    overflow-y:auto;

    padding:7px;

    border:1px solid #dedfe3;
    border-radius:11px;

    background:#fff;

    box-shadow:
        0 12px 28px rgba(0,0,0,.11);
}

.package-dropdown.show{
    display:block;
}

.package-option{
    display:block;
    cursor:pointer;
}

.package-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.option-inner{
    min-height:58px;

    display:grid;
    grid-template-columns:32px 1fr 28px;
    align-items:center;

    gap:10px;

    padding:8px 10px;

    border-radius:8px;
}

.package-option:hover .option-inner{
    background:#f7f7f8;
}

.package-option.active .option-inner{
    background:#fff8ed;
}

.option-info{
    display:flex;
    flex-direction:column;
}

.option-info b{
    font-size:15px;
}

.option-info small{
    margin-top:2px;
    color:#f08b00;
    font-size:12px;
}

.option-check{
    opacity:0;

    color:#ff7800;

    text-align:right;

    font-size:18px;
    font-weight:800;
}

.package-option.active .option-check{
    opacity:1;
}

/* MOBILE */

@media(max-width:700px){

    .vn-flag{
        font-size:23px;
    }

    .package-selected{
        min-height:54px;
    }

    .package-dropdown{
        max-height:330px;
    }

    .option-inner{
        min-height:55px;
    }
}

/* GÓI NẠP 1 HÀNG */

.option-inner{
    min-height:52px !important;
    display:grid !important;
    grid-template-columns:auto 24px 1fr 24px !important;
    align-items:center !important;
    gap:8px !important;
    padding:8px 13px !important;
}

.option-money{
    font-size:15px;
    color:#171717;
}

.option-arrow{
    text-align:center;
    color:#a2a5aa;
    font-size:20px;
}

.option-coins{
    font-size:15px;
    font-weight:700;
    color:#171717;
}

.option-check{
    text-align:right;
}

.selected-one-line{
    display:flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
}

.selected-one-line strong{
    color:#171717;
    font-size:15px;
}

.selected-arrow{
    color:#a2a5aa;
    font-size:20px;
}

.selected-one-line span:last-child{
    font-size:15px;
    font-weight:700;
}

@media(max-width:700px){
    .option-inner{
        grid-template-columns:auto 18px 1fr 20px !important;
        gap:5px !important;
        padding:8px 10px !important;
    }

    .option-money,
    .option-coins,
    .selected-one-line strong,
    .selected-one-line span:last-child{
        font-size:14px;
    }
}

/* GÓI NẠP - CĂN LIỀN NHAU + COIN */

.option-inner{
    min-height:50px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;
    padding:8px 12px !important;
}

.option-money{
    font-size:15px !important;
    font-weight:700 !important;
    color:#171717 !important;
}

.option-arrow{
    color:#9fa3aa !important;
    font-size:18px !important;
    margin:0 2px !important;
}

.option-coins{
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    font-size:15px !important;
    font-weight:700 !important;
    color:#171717 !important;
}

.option-check{
    margin-left:auto !important;
    color:#ff7800 !important;
}

.selected-one-line{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;
}

.selected-one-line strong{
    font-size:15px !important;
}

.selected-arrow{
    margin:0 2px !important;
    color:#9fa3aa !important;
}

.selected-coin-wrap{
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
}

@media(max-width:700px){
    .option-inner{
        gap:5px !important;
        padding:8px 10px !important;
    }

    .option-money,
    .option-coins,
    .selected-one-line strong{
        font-size:14px !important;
    }
}

/* MŨI TÊN CHỌN GÓI */

.select-arrow{
    width:10px !important;
    height:10px !important;
    flex:0 0 10px !important;

    margin-right:4px;

    border-right:2px solid #8d929a;
    border-bottom:2px solid #8d929a;

    transform:rotate(45deg);
    transition:transform .18s ease;

    font-size:0 !important;
}

.select-arrow.open{
    transform:rotate(225deg);
}

.package-selected:hover .select-arrow{
    border-color:#555a62;
}

/* ===== CHEVRON CHỌN GÓI - FINAL OVERRIDE ===== */

.select-arrow{
    position:relative !important;
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    flex:0 0 18px !important;

    margin-left:auto !important;
    margin-right:2px !important;

    border:0 !important;
    transform:none !important;

    font-size:0 !important;
    line-height:0 !important;
    color:transparent !important;
}

.select-arrow::before,
.select-arrow::after{
    content:"" !important;

    position:absolute !important;
    top:8px !important;

    width:9px !important;
    height:2px !important;

    background:#8f949c !important;
    border-radius:2px !important;

    transition:
        transform .18s ease,
        background .18s ease !important;
}

/* nửa trái */
.select-arrow::before{
    left:1px !important;
    transform:rotate(40deg) !important;
}

/* nửa phải */
.select-arrow::after{
    right:1px !important;
    transform:rotate(-40deg) !important;
}

/* Khi mở danh sách: chuyển thành mũi tên lên */
.select-arrow.open::before{
    transform:rotate(-40deg) !important;
}

.select-arrow.open::after{
    transform:rotate(40deg) !important;
}

.package-selected:hover .select-arrow::before,
.package-selected:hover .select-arrow::after{
    background:#555a62 !important;
}

/* ===== SELECT CHEVRON SVG FINAL ===== */

.select-arrow{
    width:32px !important;
    height:32px !important;

    min-width:32px !important;
    flex:0 0 32px !important;

    margin-left:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border:0 !important;
    border-radius:50% !important;

    background:#f4f4f5 !important;

    font-size:0 !important;
    color:transparent !important;

    transform:none !important;

    transition:
        background .18s ease,
        transform .18s ease !important;
}

.select-arrow::before,
.select-arrow::after{
    display:none !important;
    content:none !important;
}

.select-arrow svg{
    width:18px !important;
    height:18px !important;

    display:block !important;

    fill:none !important;
    stroke:#686c73 !important;
    stroke-width:2.2 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;

    transition:transform .2s ease !important;
}

.select-arrow.open svg{
    transform:rotate(180deg) !important;
}

.package-selected:hover .select-arrow{
    background:#ececee !important;
}

.package-selected:hover .select-arrow svg{
    stroke:#222 !important;
}

@media(max-width:700px){
    .select-arrow{
        width:30px !important;
        height:30px !important;
        min-width:30px !important;
        flex-basis:30px !important;
    }

    .select-arrow svg{
        width:17px !important;
        height:17px !important;
    }
}

/* ===== CHEVRON SVG ===== */

.select-arrow{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin-left:auto !important;

    border:0 !important;
    background:none !important;

    transform:none !important;
    font-size:0 !important;
    color:transparent !important;
}

.select-arrow::before,
.select-arrow::after{
    display:none !important;
    content:none !important;
}

.select-arrow img{
    display:block !important;
    width:22px !important;
    height:22px !important;
    object-fit:contain !important;
    transition:transform .18s ease !important;
}

.select-arrow.open img{
    transform:rotate(180deg) !important;
}



@media(max-width:700px){
    
}

/* ===== TITLE STYLING ===== */

.hero-title{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;

    font-weight:850 !important;
    letter-spacing:-0.4px;

    background:linear-gradient(
        90deg,
        #ff3d79 0%,
        #ff6b45 28%,
        #8d45e8 62%,
        #4e68e8 100%
    );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
    color:transparent;
}



@media(max-width:700px){
    .hero-title{
        font-size:23px !important;
        gap:8px !important;
    }
}

/* ===== STARMAKER TITLE LOGO - RESPONSIVE FINAL ===== */



.hero-title{
    gap:7px !important;
}

@media(max-width:700px){
    
}

/* STARMAKER LOGO SIZE - FINAL */


.hero-title{
    gap:6px !important;
}

/* STARMAKER LOGO RESPONSIVE */


.hero-title{
    gap:5px !important;
}

/* ===== STARMAKER TITLE LOGO - CLEAN ===== */
.hero-title .starmaker-title-logo{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    flex:0 0 30px !important;

    display:block !important;
    object-fit:contain !important;

    margin:0 3px 0 0 !important;
    padding:0 !important;
    border-radius:5px !important;

    transform:none !important;
}

.hero-title{
    gap:5px !important;
}







.hero-title .starmaker-title-logo{
    width:30px !important;
    height:30px !important;
    flex:0 0 30px !important;
    object-fit:contain !important;
}


/* ===== BRAND HEADER FINAL ===== */

.top{
    background:#fff !important;
}

.top .nav{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:68px !important;
}

/* thương hiệu nằm giữa tuyệt đối */
.top .brand{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;

    white-space:nowrap !important;
}

/* avatar thương hiệu */
.top .brandmark{
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
}

/* chữ thương hiệu */
.top .brand-text{
    position:relative !important;
    display:inline-block !important;

    font-size:24px !important;
    font-weight:900 !important;
    letter-spacing:.2px !important;

    background:
        linear-gradient(
            90deg,
            #633cff 0%,
            #a23dff 22%,
            #ed3f9a 45%,
            #ff6f47 68%,
            #633cff 100%
        ) !important;

    background-size:220% 100% !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    -webkit-text-fill-color:transparent !important;
    color:transparent !important;

    overflow:hidden !important;

    animation:brandColorMove 5s linear infinite !important;
}

/* vệt sáng quét từ trái sang phải */
.top .brand-text::after{
    content:"" !important;

    position:absolute !important;
    top:-20% !important;
    bottom:-20% !important;
    left:-35% !important;

    width:28px !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.25) 25%,
            rgba(255,255,255,1) 50%,
            rgba(255,255,255,.25) 75%,
            transparent 100%
        ) !important;

    transform:skewX(-18deg) !important;

    animation:brandShimmer 2.8s ease-in-out infinite !important;

    pointer-events:none !important;
}

/* menu vẫn nằm bên phải */
.top .nav nav{
    position:absolute !important;
    right:0 !important;
}

/* animation màu */
@keyframes brandColorMove{
    0%{
        background-position:0% 50%;
    }

    100%{
        background-position:220% 50%;
    }
}

/* animation ánh sáng */
@keyframes brandShimmer{
    0%{
        left:-35%;
        opacity:0;
    }

    15%{
        opacity:1;
    }

    70%{
        opacity:1;
    }

    100%{
        left:110%;
        opacity:0;
    }
}

@media(max-width:700px){

    .top .nav{
        min-height:64px !important;
    }

    .top .brandmark{
        width:40px !important;
        height:40px !important;
        flex-basis:40px !important;
    }

    .top .brand-text{
        font-size:21px !important;
    }

    .top .nav nav{
        display:none !important;
    }
}




/* ===== HERO TITLE SHINE FINAL ===== */

.hero-title{
    background:none !important;
    background-image:none !important;
    animation:none !important;
    -webkit-text-fill-color:initial !important;
}

.hero-title .hero-title-text{
    display:inline-block !important;

    color:transparent !important;
    -webkit-text-fill-color:transparent !important;

    background-image:linear-gradient(
        90deg,

        #6f35e8 0px,
        #a83fe2 55px,
        #ef3f9b 100px,

        #ff7c38 125px,
        #fff0b5 142px,
        #ffffff 150px,
        #fff0b5 158px,
        #ff7c38 175px,

        #ef3f9b 205px,
        #a83fe2 250px,
        #6f35e8 300px
    ) !important;

    background-repeat:repeat-x !important;
    background-size:300px 100% !important;
    background-position:0px 50%;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    animation:none !important;
    transition:none !important;
}




html{
    scroll-behavior:smooth;
}

/* POLICY PAGES START */

.policy-page{
    width:min(820px,calc(100% - 24px));
    margin:24px auto 45px;
}

.policy-hero{
    display:flex;
    align-items:center;
    gap:15px;

    margin-bottom:14px;
    padding:20px 22px;

    background:#fff;
    border:1px solid #e8e8eb;
    border-radius:16px;
}

.policy-icon{
    width:48px;
    height:48px;
    flex:0 0 48px;

    display:grid;
    place-items:center;

    border-radius:14px;
    background:#f6f3ff;

    font-size:25px;
}

.policy-hero h1{
    margin:0;
    font-size:25px;
    line-height:1.2;
}

.policy-hero p{
    margin:5px 0 0;
    color:#7a7e85;
    font-size:13px;
}

.policy-card{
    padding:6px 25px 24px;

    background:#fff;
    border:1px solid #e8e8eb;
    border-radius:16px;
}

.policy-section{
    padding:21px 0;

    border-bottom:1px solid #eeeeef;
}

.policy-section:last-of-type{
    border-bottom:0;
}

.policy-section h2{
    margin:0 0 10px;

    font-size:17px;
    line-height:1.3;

    color:#25262a;
}

.policy-section p{
    margin:7px 0;

    color:#656a72;

    font-size:13px;
    line-height:1.72;
}

.policy-section ul{
    margin:10px 0 0;
    padding-left:22px;

    color:#656a72;

    font-size:13px;
    line-height:1.8;
}

.policy-warning,
.policy-info{
    margin:11px 0;
    padding:11px 13px;

    border-radius:9px;

    font-size:12px;
    line-height:1.55;
}

.policy-warning{
    background:#fff9ed;
    border:1px solid #f1d69b;
    color:#895700;
}

.policy-info{
    background:#f5f8ff;
    border:1px solid #dbe5ff;
    color:#44546d;
}



@media(max-width:600px){

    .policy-page{
        width:calc(100% - 14px);
        margin-top:10px;
    }

    .policy-hero{
        padding:16px;
        border-radius:13px;
    }

    .policy-icon{
        width:42px;
        height:42px;
        flex-basis:42px;
        font-size:22px;
    }

    .policy-hero h1{
        font-size:21px;
    }

    .policy-card{
        padding:3px 15px 18px;
        border-radius:13px;
    }

    .policy-section{
        padding:18px 0;
    }

    .policy-section h2{
        font-size:15px;
    }

    .policy-section p,
    .policy-section ul{
        font-size:12px;
    }
}

/* POLICY PAGES END */

/* CONTACT INFO START */

.contact-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:13px;
}

.contact-item{
    display:flex;
    align-items:center;
    gap:10px;

    min-width:0;
    padding:13px;

    background:#fafafa;
    border:1px solid #e9e9ec;
    border-radius:11px;

    color:#333;
    text-decoration:none;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}

a.contact-item:hover{
    transform:translateY(-2px);
    background:#fff;
    border-color:#d8d8dd;
}

.contact-icon{
    flex:0 0 auto;
    font-size:20px;
}

.contact-content{
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:2px;
}

.contact-label{
    color:#8b8e94;
    font-size:10px;
    font-weight:600;
}

.contact-content strong{
    color:#333;
    font-size:12px;
    font-weight:750;
    overflow-wrap:anywhere;
}

@media(max-width:600px){
    .contact-list{
        grid-template-columns:1fr;
    }

    .contact-item{
        padding:12px 13px;
    }
}

/* CONTACT INFO END */


/* STARMAKER PROFILE START */

.sm-id-box{
    position:relative;
    width:100%;
}

.sm-id-box .sm-id{
    width:100%;
}

.sm-profile{
    width:100%;
    min-height:54px;

    display:flex;
    align-items:center;
    gap:11px;

    padding:7px 9px;

    background:#fff;

    border:1px solid #dcdde1;
    border-radius:10px;
}

.sm-profile[hidden]{
    display:none !important;
}

.sm-profile-avatar{
    width:40px;
    height:40px;
    flex:0 0 40px;

    object-fit:cover;

    border-radius:50%;

    background:#f2f2f3;
    border:1px solid #e5e5e7;
}

.sm-profile-info{
    min-width:0;
    flex:1;

    display:flex;
    flex-direction:column;

    gap:2px;
}

.sm-profile-info strong{
    display:block;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#222;

    font-size:14px;
    font-weight:750;
}

.sm-profile-info span{
    color:#858990;

    font-size:11px;
    line-height:1.25;
}

.sm-profile-clear{
    width:30px;
    height:30px;
    flex:0 0 30px;

    display:grid;
    place-items:center;

    padding:0;

    border:0;
    border-radius:50%;

    background:#f2f2f3;
    color:#777b82;

    font-size:20px;
    font-weight:400;
    line-height:1;

    cursor:pointer;
}

.sm-profile-clear:hover{
    background:#e9e9eb;
    color:#222;
}

@media(max-width:700px){

    .sm-profile{
        min-height:54px;
        padding:7px 8px;
    }

    .sm-profile-avatar{
        width:38px;
        height:38px;
        flex-basis:38px;
    }

    .sm-profile-info strong{
        font-size:13px;
    }

}

/* STARMAKER PROFILE END */




/* ===== SELECTED PACKAGE - ONE LINE ===== */
#packageSelected,
#selectedContent,
.selected-left,
.selected-one-line{
    white-space:nowrap !important;
}

#selectedContent{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    min-width:0 !important;
}

.selected-one-line{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    width:100% !important;
}

.selected-one-line strong,
.selected-one-line span{
    white-space:nowrap !important;
    flex-shrink:0 !important;
}

@media(max-width:700px){
    .selected-one-line{
        gap:4px !important;
    }

    .selected-one-line strong,
    .selected-one-line span{
        font-size:14px !important;
    }
}
/* ===== END SELECTED PACKAGE - ONE LINE ===== */


/* SELECTED PACKAGE ONE ROW START */

/* Toàn bộ phần gói đang được chọn luôn nằm 1 hàng */
#packageSelected{
    display:flex !important;
    align-items:center !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    width:100% !important;
}

#selectedContent{
    display:flex !important;
    align-items:center !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    flex:1 1 auto !important;
    min-width:0 !important;

    gap:7px !important;

    white-space:nowrap !important;
}

/* JS hiện tại tạo selected-one-line */
#selectedContent .selected-one-line{
    display:flex !important;
    align-items:center !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    width:auto !important;
    min-width:0 !important;

    gap:7px !important;
    white-space:nowrap !important;
}

/* Tất cả thành phần bên trong không được xuống dòng */
#selectedContent .selected-one-line > *{
    display:inline-flex !important;
    align-items:center !important;

    width:auto !important;
    flex:0 0 auto !important;

    margin:0 !important;
    white-space:nowrap !important;
}

/* Tiền */
#selectedContent .option-money{
    white-space:nowrap !important;
}

/* Dấu > */
#selectedContent .option-separator{
    white-space:nowrap !important;
    margin:0 2px !important;
}

/* Coins */
#selectedContent .option-coins{
    white-space:nowrap !important;
}

/* Mũi tên xổ xuống luôn ở mép phải */
#packageSelected #selectArrow{
    margin-left:auto !important;
    flex:0 0 auto !important;
}

/* Mobile vẫn bắt buộc 1 hàng */
@media(max-width:700px){

    #selectedContent,
    #selectedContent .selected-one-line{
        gap:5px !important;
    }

    #selectedContent .option-money,
    #selectedContent .option-coins{
        font-size:14px !important;
    }

}

/* SELECTED PACKAGE ONE ROW END */


/* SELECTED PACKAGE POLISH */
#selectedContent .selected-one-line{
    width:100% !important;
}

#selectedContent .selected-one-line .option-check,
#selectedContent .selected-one-line .check,
#selectedContent .selected-one-line .selected-check{
    margin-left:auto !important;
}

#selectedContent .option-money{
    margin-right:4px !important;
}

#selectedContent .option-separator{
    margin:0 5px !important;
}

#selectedContent .option-coins{
    margin-left:2px !important;
}

/* ORDER CONSENT START */
.order-consent{
    margin:14px 0 10px;
    font-size:12px;
    line-height:1.45;
}

.order-consent label{
    display:flex;
    align-items:flex-start;
    gap:8px;
    cursor:pointer;
}

.order-consent input{
    width:16px;
    height:16px;
    margin:1px 0 0;
    flex:0 0 16px;
}

.order-consent a{
    color:inherit;
    font-weight:700;
    text-decoration:underline;
}
/* ORDER CONSENT END */


/* ODER PAYMENT START */

.oder-pay-page{
    width:min(680px,calc(100% - 20px));
    margin:18px auto 45px;
}


/* COUNTDOWN */

.oder-expire-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:13px 16px;

    border-radius:14px;

    background:#fff4df;
    border:1px solid #f5c879;

    margin-bottom:12px;
}

.oder-expire-label{
    display:flex;
    align-items:center;
    gap:7px;

    font-size:14px;
    font-weight:700;
}

.oder-clock{
    font-size:20px;
}

#oderCountdown{
    font-size:22px;
    line-height:1;
    font-variant-numeric:tabular-nums;
}


/* QR */

.oder-qr-card{
    background:#fff;

    border:1px solid #e6e6ea;
    border-radius:17px;

    padding:24px 18px;

    text-align:center;

    box-shadow:
        0 5px 20px rgba(0,0,0,.045);
}

.oder-bank-name{
    margin-bottom:13px;

    font-size:20px;
    font-weight:850;

    color:#2151a4;
}

.oder-qr{
    display:block;

    width:min(310px,90%);
    height:auto;

    margin:0 auto;

    border-radius:10px;
}

.oder-amount{
    margin-top:13px;

    font-size:25px;
    font-weight:850;

    color:#e33a33;
}


/* EXPIRED */

.oder-expired{
    padding:34px 10px;
}

.oder-expired-icon{
    font-size:46px;
    margin-bottom:10px;
}

.oder-expired h2{
    margin:0 0 7px;

    font-size:22px;
}

.oder-expired p{
    margin:0 0 20px;
    color:#777;
}

.oder-new-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:44px;

    padding:0 22px;

    border-radius:10px;

    background:#17a94f;

    color:white !important;

    text-decoration:none !important;
    font-weight:800;
}


/* INFO */

.oder-info-card{
    margin-top:12px;

    background:#fff;

    border:1px solid #e6e6ea;
    border-radius:15px;

    overflow:hidden;
}

.oder-info-row{
    min-height:66px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:10px 14px;

    border-bottom:1px solid #eeeeF2;
}

.oder-info-row:last-child{
    border-bottom:0;
}

.oder-info-icon{
    width:25px;

    flex:0 0 25px;

    text-align:center;

    font-size:18px;
}

.oder-info-text{
    flex:1;
    min-width:0;
}

.oder-info-text span{
    display:block;

    margin-bottom:3px;

    color:#777;

    font-size:11px;
}

.oder-info-text strong{
    display:block;

    font-size:14px;

    overflow-wrap:anywhere;
}

.oder-red{
    color:#df342f;
}

.oder-copy-btn{
    flex:0 0 auto;

    border:1px solid #f0a43c;
    border-radius:18px;

    background:#fff;

    min-width:80px;
    height:34px;

    padding:0 12px;

    color:#dc8b1e;

    font-size:12px;
    font-weight:700;

    cursor:pointer;
}

.oder-copy-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}


/* Khi QR hết hạn */

.oder-info-expired{
    opacity:.45;
    pointer-events:none;
}


/* NOTE */

.oder-note-card{
    margin-top:12px;

    padding:16px 18px;

    background:#fffaf2;

    border:1px solid #f1d5a7;
    border-radius:15px;
}

.oder-note-card h2{
    margin:0 0 10px;

    font-size:17px;
}

.oder-note-card ol{
    margin:0;
    padding-left:20px;
}

.oder-note-card li{
    margin:5px 0;

    font-size:12px;
    line-height:1.55;
}


/* CANCEL */

.oder-cancel-btn{
    width:100%;
    min-height:46px;

    margin-top:14px;

    border:1px solid #e04747;
    border-radius:12px;

    background:#fff;

    color:#d93838;

    font-size:14px;
    font-weight:800;

    cursor:pointer;
}

.oder-expire-note{
    margin-top:13px;

    text-align:center;

    color:#777;

    font-size:11px;
}


/* MOBILE */

@media(max-width:600px){

    .oder-pay-page{
        width:calc(100% - 12px);
        margin-top:8px;
    }

    .oder-expire-bar{
        padding:11px 12px;
    }

    .oder-expire-label{
        font-size:12px;
    }

    #oderCountdown{
        font-size:20px;
    }

    .oder-qr-card{
        padding:18px 10px;
    }

    .oder-qr{
        width:min(280px,88%);
    }

    .oder-amount{
        font-size:22px;
    }

    .oder-info-row{
        padding:9px 10px;
        gap:8px;
    }

    .oder-copy-btn{
        min-width:70px;
        padding:0 9px;
    }
}

/* ODER PAYMENT END */


/* EXISTING ORDER PAGE START */

.existing-order-page{
    width:min(560px,calc(100% - 20px));
    margin:22px auto 45px;
}

.existing-order-card{
    background:#fff;
    border:1px solid #e7e7eb;
    border-radius:18px;
    padding:24px;
    box-shadow:0 8px 28px rgba(0,0,0,.05);
    text-align:center;
}

.existing-order-icon{
    font-size:40px;
    margin-bottom:8px;
}

.existing-order-card h1{
    margin:0 0 9px;
    font-size:22px;
}

.existing-order-desc{
    margin:0 auto 18px;
    color:#666;
    font-size:13px;
    line-height:1.55;
    max-width:430px;
}

.existing-order-details{
    border:1px solid #ececf0;
    border-radius:13px;
    overflow:hidden;
    text-align:left;
}

.existing-order-details > div{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-bottom:1px solid #ececf0;
}

.existing-order-details > div:last-child{
    border-bottom:0;
}

.existing-order-details span{
    color:#777;
    font-size:12px;
}

.existing-order-details strong{
    font-size:14px;
}

.existing-order-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:16px;
}

.existing-order-view,
.existing-order-cancel{
    min-height:44px;
    border-radius:11px;
    font-size:13px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
}

.existing-order-view{
    background:#18a84f;
    color:#fff !important;
    text-decoration:none !important;
}

.existing-order-cancel{
    border:1px solid #dc4545;
    background:#fff;
    color:#d63b3b;
    cursor:pointer;
}

.existing-order-status{
    margin-top:10px;
    font-size:12px;
    color:#777;
}

@media(max-width:600px){

    .existing-order-page{
        width:calc(100% - 12px);
        margin-top:10px;
    }

    .existing-order-card{
        padding:18px 13px;
    }

    .existing-order-actions{
        grid-template-columns:1fr;
    }
}

/* EXISTING ORDER PAGE END */


/* PAYMENT SUCCESS START */

.payment-success-box{
    padding:35px 15px;
    text-align:center;
}

.payment-success-icon{
    width:68px;
    height:68px;
    margin:0 auto 14px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#18a84f;
    color:#fff;

    font-size:38px;
    font-weight:900;
}

.payment-success-box h2{
    margin:0 0 8px;
    font-size:23px;
}

.payment-success-box p{
    margin:0;
    color:#666;
    font-size:13px;
}

/* PAYMENT SUCCESS END */


/* ===== COINS COMPLETED ===== */

.payment-completed-logo {
    display: block;
    width: 76px;
    height: 76px;
    object-fit: contain;
    margin: 0 auto 18px;
    border-radius: 18px;
}

.payment-completed-box {
    text-align: center;
}

.payment-completed-box p {
    line-height: 1.7;
}

/* ===== COMPLETED SHARE BUTTON ===== */

.payment-share-btn {
    width: 100%;
    max-width: 320px;
    min-height: 46px;
    margin: 14px auto 0;
    padding: 11px 18px;
    display: block;
    border: 0;
    border-radius: 12px;
    background: #18a84f;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.payment-share-btn:disabled {
    cursor: default;
    opacity: .85;
}