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

/* TOPBAR / TEXT LOGO */
.topbar{
    width:100%;
    background:#1e88d8;
}

.topbar-inner{
    max-width:1200px;
    margin:auto;
    padding:18px 20px;
    text-align:center;
    color:#fff;
}

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

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

.logo-main{
    font-family:
        "Arial Black",
        Arial,
        Helvetica,
        sans-serif;
    font-weight:900;
    letter-spacing:-2px;
    color:#ffffff;
    text-transform:uppercase;
    text-shadow:0 2px 0 rgba(0,0,0,.18);
    line-height:1;
}

.logo-dot{
    font-family:
        "Arial Black",
        Arial,
        Helvetica,
        sans-serif;
    font-weight:900;
    letter-spacing:-1px;
    color:#ffff00;
    text-shadow:0 2px 0 rgba(0,0,0,.18);
    line-height:1;
}

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

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

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

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

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

/* MAIN CONTAINER */
.container{
    background:white;
    width:92%;
    max-width:760px;
    border-radius:24px;
    padding:22px;
    box-shadow:0 10px 30px rgba(31,127,191,.18);
    border:1px solid #d6f0ff;
    margin-bottom:40px;
    box-sizing:border-box;
}

h2{
    text-align:center;
    color:#1f7fbf;
    margin-bottom:5px;
    font-size:1.75rem;
}

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

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

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

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

.main-price{
    font-size:3rem !important;
    border:2.5px solid #1f7fbf !important;
    color:#1f7fbf;
}

/* 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:white;
    border:1px solid #d4e7f3;
    padding:12px 4px;
    border-radius:14px;
    cursor:pointer;
    text-align:center;
    transition:.2s;
    font-family:inherit;
}

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

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

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

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

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

/* 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 #c9dfea;
    background:white;
    border-radius:12px;
    cursor:pointer;
    font-weight:bold;
    color:#5f7c92;
    font-family:inherit;
}

.mode-btn.active{
    background:#1f7fbf;
    color:white;
    border-color:#1f7fbf;
}

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

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

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

.total-row{
    background:#eaf7ff;
    font-size:1.3rem;
    color:#0b6fae;
    font-weight:bold;
}

.highlight-row{
    background:#fffbea;
}

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

.disclaimer b{
    color:#d94848;
}

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

.link-title{
    text-align:center;
    color:#1f7fbf;
    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:#f3fbff;
    border:1px solid #d6f0ff;
    border-radius:14px;
    padding:14px 10px;
    text-align:center;
    text-decoration:none;
    color:#1f7fbf;
    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:#eaf7ff;
}

.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:16px;
    margin:0 auto 24px;
}

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

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

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

    .topbar-inner{
        padding:16px 14px;
    }

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

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

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

@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:480px){

.main-price{
    font-size:2.3rem !important;
    padding:8px 10px !important;
    letter-spacing:-2px;
    font-variant-numeric:tabular-nums;
}

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

    h2{
        font-size:1.5rem;
    }
}