body{
    font-family:
        Tahoma,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans Thai",
        Arial,
        sans-serif;
    background:#ffffff;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    -webkit-text-size-adjust:100%;
    color:#121217;
}

/* TOPBAR / TEXT LOGO */
/* TOPBAR / TEXT LOGO */
.topbar{
    width:100%;
    background:#ffffff;
    position:relative;
    overflow:hidden;
    border-bottom:2px solid #111114;
}

.topbar:before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-520px);
    width:180px;
    height:100%;
    background:#101114;
    border-bottom-right-radius:120px;
}

.topbar:after{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(340px);
    width:180px;
    height:100%;
    background:#ff2f93;
    border-bottom-left-radius:120px;
}

.topbar-inner{
    max-width:1200px;
    margin:auto;
    padding:28px 20px 24px;
    text-align:center;
    color:#111;
    position:relative;
    z-index:2;
}

@media (max-width:768px){

    .topbar:before{
        transform:translateX(-210px);
        width:92px;
        border-bottom-right-radius:70px;
    }

    .topbar:after{
        transform:translateX(118px);
        width:92px;
        border-bottom-left-radius:70px;
    }
}

.topbar-title{
    font-size:34px;
    line-height:1.15;
}

.topbar-title a{
    color:#111;
    text-decoration:none;
}

.logo-main{
    font-family:
        "Arial Black",
        Arial,
        Helvetica,
        sans-serif;
    font-weight:900;
    letter-spacing:-2px;
    color:#111114;
    text-transform:uppercase;
    line-height:1;
}

.logo-dot{
    font-family:
        "Arial Black",
        Arial,
        Helvetica,
        sans-serif;
    font-weight:900;
    letter-spacing:-1px;
    color:#ff2f93;
    line-height:1;
}

.topbar-sub{
    margin-top:7px;
    font-size:14px;
    line-height:1.45;
    font-weight:600;
    color:#333;
}

.topbar-sub a{
    color:#333;
    text-decoration:none;
}

.topbar-sub small{
    color:#ff2f93;
    font-size:13px;
    font-weight:800;
    word-break:break-word;
}

.topbar-sub a:hover,
.topbar-title a:hover{
    opacity:.86;
}

/* ADS */
.ads-box{
    width:92%;
    max-width:980px;
    margin:16px auto 8px;
    background:#ffffff;
    border:1px dashed #e5e5ea;
    border-radius:18px;
    min-height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#999;
    font-size:1rem;
    box-sizing:border-box;
    padding:10px;
}

/* MAIN CONTAINER */
.container{
    background:#ffffff;
    width:92%;
    max-width:760px;
    border-radius:28px;
    padding:22px;
    box-shadow:0 18px 45px rgba(20,20,25,.09);
    border:1px solid #eeeeF2;
    margin:8px auto 40px;
    box-sizing:border-box;
}

h2{
    text-align:center;
    color:#111114;
    margin-bottom:5px;
    font-size:1.75rem;
    line-height:1.35;
}

.subtitle{
    text-align:center;
    font-size:.95rem;
    color:#777;
    margin-bottom:20px;
}

/* BASIC SECTION */
.section-box{
    background:#f7f7f9;
    padding:15px;
    border-radius:18px;
    margin-bottom:14px;
    border:1px solid #ececf1;
}

label{
    display:block;
    font-size:1rem;
    font-weight:bold;
    margin-bottom:8px;
    color:#34343b;
}

/* FORM INPUT */
input[type="text"]{
    width:100%;
    padding:14px;
    border:1px solid #d8d8df;
    border-radius:14px;
    font-size:1.6rem;
    font-weight:bold;
    text-align:right;
    box-sizing:border-box;
    background:#ffffff;
    color:#111114;
}

input[type="text"]:focus,
select:focus{
    outline:none;
    border-color:#ff2f93;
    box-shadow:0 0 0 4px rgba(255,47,147,.12);
}

.main-price{
    font-size:3rem !important;
    border:2px solid #111114 !important;
    color:#111114;
}

/* GRID */
.settings-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.preset-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin:14px 0;
}

/* BUTTONS */
.btn-auto{
    background:#ffffff;
    border:1px solid #e4e4e9;
    padding:12px 4px;
    border-radius:16px;
    cursor:pointer;
    text-align:center;
    transition:.2s;
    font-family:inherit;
}

.btn-auto:hover{
    background:#fafafa;
    border-color:#ffb8d8;
}

.btn-auto:active{
    transform:scale(.96);
}

.btn-auto small{
    display:block;
    font-size:.82rem;
    color:#777;
}

.btn-auto b{
    display:block;
    font-size:1.08rem;
}

.up{
    border-left:4px solid #ff2f93;
    color:#ff2f93;
}

.down{
    border-left:4px solid #111114;
    color:#111114;
}

/* MODE SELECTOR */
.mode-selector{
    display:flex;
    gap:8px;
    margin-bottom:15px;
}

.mode-btn{
    flex:1;
    padding:14px;
    min-height:56px;
    font-size:.95rem;
    line-height:1.3;
    white-space:normal;
    border:1px solid #e0e0e6;
    background:#ffffff;
    border-radius:14px;
    cursor:pointer;
    font-weight:bold;
    color:#333;
    font-family:inherit;
}

.mode-btn.active{
    background:#ff2f93;
    color:#ffffff;
    border-color:#ff2f93;
    box-shadow:0 10px 22px rgba(255,47,147,.24);
}

/* TABLE */
table{
    width:100%;
    border-collapse:collapse;
}

td{
    padding:14px 5px;
    border-bottom:1px solid #f0f0f4;
    font-size:1.05rem;
    line-height:1.35;
    vertical-align:middle;
}

.val{
    text-align:right;
    font-weight:bold;
    color:#111114;
    white-space:nowrap;
}

.total-row{
    background:#111114;
    font-size:1.3rem;
    color:#ffffff;
    font-weight:bold;
}

.total-row .val,
.total-row td{
    color:#ffffff;
}

.highlight-row{
    background:#fff1f7;
}

/* NOTE */
.disclaimer{
    font-size:.9rem;
    color:#555;
    margin-top:20px;
    text-align:left;
    line-height:1.6;
    padding:12px;
    background:#fff4f9;
    border-radius:14px;
    border:1px solid #ffd4e8;
}

.disclaimer b{
    color:#ff2f93;
}

/* LINKS */
.link-section{
    margin-top:24px;
    padding-top:18px;
    border-top:1px dashed #ffd0e6;
}

.link-title{
    text-align:center;
    color:#111114;
    font-size:1.15rem;
    font-weight:bold;
    margin-bottom:16px;
}

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

.calc-link{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:64px;
    background:#ffffff;
    border:1px solid #eeeeF2;
    border-radius:16px;
    padding:14px 10px;
    text-align:center;
    text-decoration:none;
    color:#111114;
    font-size:1.05rem;
    font-weight:bold;
    line-height:1.35;
    white-space:normal;
    word-break:keep-all;
    box-sizing:border-box;
}

.calc-link:hover{
    background:#fff4f9;
    border-color:#ffb8d8;
    color:#ff2f93;
}

.calc-link:active{
    transform:scale(.97);
}

/* NUMBER FONT */
.main-price,
.vat-input,
.val{
    font-family:
        Consolas,
        Menlo,
        Monaco,
        monospace;
}

/* IMAGES */
.img-detail{
    max-width:680px;
    width:100%;
    height:auto;
    display:block;
    border-radius:18px;
    margin:0 auto 24px;
}

.percent-desc .img-detail{
    max-width:680px;
    width:100%;
    margin:0 auto 24px;
}

/* GLOBAL OVERRIDE FOR PERCENT / VAT STYLE */
body .percent-card,
body .vat-program{
    background:#ffffff;
    border:1px solid #eeeeF2;
    box-shadow:0 14px 35px rgba(20,20,25,.08);
    border-radius:24px;
}

body .percent-card h3,
body .vat-program h3,
body .vat-title{
    color:#ff2f93;
}

body .percent-desc,
body .vat-desc{
    background:#f7f7f9;
    border-color:#ededf1;
    color:#16161c;
}

body .percent-note,
body .vat-note{
    background:#fff4f9;
    border-color:#ffd4e8;
    color:#c51f6e;
}

body .percent-input,
body .vat-input{
    border-color:#d8d8df;
    color:#111114;
    background:#ffffff;
}

body .percent-input:focus,
body .vat-input:focus{
    border-color:#ff2f93;
    box-shadow:0 0 0 4px rgba(255,47,147,.12);
}

body .percent-addon,
body .vat-program .percent-addon{
    background:#fff0f7;
    color:#ff2f93;
}

body .percent-result{
    background:#111114;
    color:#ffffff;
    border:1px solid #111114;
    box-shadow:0 12px 26px rgba(17,17,20,.18);
}

body .percent-result b{
    color:#ff5fac;
}

body .percent-result small{
    color:#e8e8ec;
}

body .percent-linkbox{
    background:#ffffff;
    border-color:#eeeeF2;
    color:#111114;
}

body .percent-linkbox h3{
    color:#ff2f93;
}

body .percent-linkbox:hover{
    background:#fff4f9;
    border-color:#ffb8d8;
}

/* VAT TABLE OVERRIDE */
body .vat-result .total-row td{
    background:#111114;
    color:#ffffff;
}

body .vat-result .val{
    color:#111114;
}

body .vat-result .total-row .val{
    color:#ff5fac;
}

/* SOFTER STATUS COLORS */
.hdl-good{
    color:#28a36a;
}

.hdl-normal{
    color:#c77928;
}

.hdl-bad{
    color:#d9327c;
}

.hdl-note{
    color:#e8e8ec;
}

/* RESPONSIVE */
@media (max-width:768px){

    .topbar:before{
        left:-92px;
        top:-105px;
        width:230px;
        height:230px;
    }

    .topbar:after{
        right:-72px;
        top:-80px;
        width:230px;
        height:175px;
    }

    .topbar-inner{
        padding:24px 14px 20px;
    }

    .topbar-title{
        font-size:26px;
    }

    .topbar-sub{
        font-size:13px;
    }

    .topbar-sub small{
        font-size:12px;
    }

    .container{
        margin-top:8px;
    }
}

@media (min-width:600px){

    .container{
        padding:28px;
    }

    .link-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media (min-width:1200px){

    .container{
        max-width:920px;
        padding:34px;
    }

    .main-price{
        font-size:3.2rem !important;
    }

    td{
        font-size:1.1rem;
    }

    .link-grid{
        grid-template-columns:repeat(4,1fr);
    }
}

@media (max-width:380px){

    .main-price{
        font-size:2.35rem !important;
    }

    .calc-link{
        font-size:.95rem;
    }

    h2{
        font-size:1.5rem;
    }
}