a {
    text-decoration: none;
}

.navbar_logo {
    width: 80px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.navbar-ggt {
    position: fixed;
    width: 100%;
    top: 0;
}

/* ==== Font ===== */
@font-face {
    font-family: "DBHelvethaicaMonX";
    src: url("../font/DBHelvethaicaMonX.ttf") format("truetype");
    font-weight: 300;
    /* Light */
    font-style: normal;
}

.font-DBHelvethaicaMonX {
    font-family: "DBHelvethaicaMonX", sans-serif;
}

@font-face {
    font-family: "LINESeedSansTH";
    src: url("../font/LINESeedSansTH_Th.ttf") format("truetype");
    font-weight: 300;
    /* Thin */
    font-style: normal;
}

@font-face {
    font-family: "LINESeedSansTH";
    src: url("../font/LINESeedSansTH_Rg.ttf") format("truetype");
    font-weight: 400;
    /* Regular */
    font-style: normal;
}

@font-face {
    font-family: "LINESeedSansTH";
    src: url("../font/LINESeedSansTH.ttf") format("truetype");
    font-weight: 500;
    /* normal */
    font-style: normal;
}

@font-face {
    font-family: "LINESeedSansTH";
    src: url("../font/LINESeedSansTH_XBd.ttf") format("truetype");
    font-weight: 800;
    /* Bold */
    font-style: normal;
}

@font-face {
    font-family: "LINESeedSansTH";
    src: url("../font/LINESeedSansTH_He.ttf") format("truetype");
    font-weight: 900;
    /* Black */
    font-style: normal;
}

.font-LINESeedSansTH {
    font-family: "LINESeedSansTH", sans-serif;
}

@font-face {
    font-family: "aAbsoluteEmpire";
    src: url("../font/aAbsoluteEmpire.ttf") format("truetype");
    font-weight: 600;
    /* Black */
    font-style: normal;
}

.font-aAbsoluteEmpire {
    font-family: "aAbsoluteEmpire", sans-serif;
}

@font-face {
    font-family: "BASKVILL";
    src: url("../font/BASKVILL.ttf") format("truetype");
    font-weight: 600;
    /* Black */
    font-style: normal;
}

.font-BASKVILL {
    font-family: "BASKVILL", sans-serif;
}

@font-face {
    font-family: "Brand";
    src: url("../font/Brand.ttf") format("truetype");
    font-weight: 600;
    /* Black */
    font-style: normal;
}

.font-Brand {
    font-family: "Brand", sans-serif;
}


:root {
    --fs-h1: clamp(32px, 2vw + 20px, 50px);
    --fs-h2: clamp(28px, 1.8vw + 18px, 42px);
    --fs-h3: clamp(24px, 1.5vw + 16px, 36px);
    --fs-h4: clamp(20px, 1.2vw + 14px, 30px);
    --fs-h5: clamp(18px, 1vw + 12px, 24px);
    --fs-h6: clamp(16px, 0.8vw + 10px, 20px);
    --fs-p: clamp(14px, 0.6vw + 10px, 16px);
    --fs-small: clamp(12px, 0.4vw + 8px, 12px);

    /* color */
    --primary: #000c80
}


h1,
.h1 {
    font-size: var(--fs-h1);
}

h2,
.h2 {
    font-size: var(--fs-h2);
}

h3,
.h3 {
    font-size: var(--fs-h3);
}

h4,
.h4 {
    font-size: var(--fs-h4);
}

h5,
.h5 {
    font-size: var(--fs-h5);
}

h6,
.h6 {
    font-size: var(--fs-h6);
}

p,
.p {
    font-size: var(--fs-p);
}

small,
.small {
    font-size: var(--fs-small);
}

.text-primary {
    color: var(--primary) !important;
}


body {
    width: 100%;
    background: #fff;
}

.btnback {
    position: absolute;
    z-index: 20;
    top: 76px;
    left: 20px;

    width: 35px;
    height: 35px;
    padding: 5px;
    border-radius: 50%;
    font-size: 28px;

    border: 1px solid #1d3ca9;
    background: #0037b6c2;
    color: #8fc5ff;
    box-shadow: 1px 1px 5px #0000005c;

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

    transition: all .5s;
}

.btnback:hover {
    box-shadow: 1px 1px 10px 3px #538fff;
    color: #0b39b0;

}

.btnback.second {
    top: 120px;
}


/* ===== Button ===== */
.btn.primary {
    border: 0px solid transparent;
    font-family: "aAbsoluteEmpire", sans-serif;

    width: 215px;
    height: 90px;
    background: url("../images/tab/bg_btn.png");
    background-position: center;
    background-size: cover;

    color: #fff !important;
    font-size: 20px;
    text-shadow: 1px 1px 2px #000;
    transition: all .5s;
}

.btn.primary:hover {
    filter: drop-shadow(1px 1px 3px #2688ff);
}

.btn.secondary {
    position: relative;
    border: 0px solid transparent;
    font-family: "LINESeedSansTH", sans-serif;

    width: 320px;
    height: 85px;
    background: url("../images/tab/newItems_btn.png");
    background-position: center;
    background-size: cover;

    color: #553000 !important;
    font-size: 25px;
    line-height: 25px;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #000;
    transition: all .5s;
}

.btn.secondary:hover {
    filter: drop-shadow(1px 1px 20px #fff5caaf);
}

.light-container {
    position: absolute;
    width: 220px;
    z-index: 5;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.horizon-light {
    position: absolute;
    width: 100%;
    height: 10px;
    left: 0;
    background: linear-gradient(to right,
            transparent 0%,
            rgba(255, 200, 100, 0.3) 20%,
            rgba(255, 230, 150, 0.8) 40%,
            rgba(255, 255, 200, 1) 50%,
            rgba(255, 230, 150, 0.8) 60%,
            rgba(255, 200, 100, 0.3) 80%,
            transparent 100%);
    box-shadow:
        0 0 20px 0px rgba(255, 220, 150, 0.6),
        0 0 20px 0px rgba(255, 200, 100, 0.4),
        0 0 20px 0px rgba(255, 180, 80, 0.3),
        0 0 20px 0px rgba(255, 150, 50, 0.2),
        0 0 20px 0px rgba(255, 130, 30, 0.1);
}

.newItems_btnModalObject {
    position: absolute;
    z-index: 3;
    width: 320px;
    left: 30px;
}

.newItems_btnModalObject_02 {
    position: absolute;
    z-index: 5;
    width: 35px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.newItems_btnModalObject_03 {
    position: absolute;
    z-index: 3;
    width: 320px;
    right: 30px;
}