@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+Thai:wght@100..900&display=swap');

:root {

    /* Headings responsive ตาม Bootstrap 5 */
    --fs-h1: clamp(2rem, 2.5vw + 1.5rem, 3rem);
    /* min 2rem, max 3rem */
    --fs-h2: clamp(1.75rem, 2vw + 1.5rem, 2.5rem);
    --fs-h3: clamp(1.5rem, 1.5vw + 1.5rem, 2rem);
    --fs-h4: clamp(1.25rem, 1vw + 1.25rem, 1.75rem);
    --fs-h5: clamp(1.1rem, 0.75vw + 1.1rem, 1.5rem);
    --fs-h6: clamp(1rem, 0.5vw + 1rem, 1.25rem);

    /* Paragraph & small */
    --fs-p: clamp(1rem, 0.5vw + 1rem, 1.125rem);
    --fs-small: clamp(0.875rem, 0.25vw + 0.875rem, 1rem);
}


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

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

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

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

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

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

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

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

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

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

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

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

a,
a:hover {
    text-decoration: none;
}

body {
    font-family: "Kanit", sans-serif;
    background: #fff;
}

.mainLayout {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 100dvh;

    background: url("https://img.gnjoy.in.th/2025/13/roc_4thAnniversary/main_bg.png");
    background-position: center;
    background-size: cover;

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

    color: #fff;
    overflow: hidden;
}

.reg_mainLayout {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: calc(100dvh - 30px);

    background: url("https://img.gnjoy.in.th/2025/13/roc_4thAnniversary/reg_bg.png");
    background-position: bottom;
    background-size: cover;

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

    color: #fff;
    overflow: hidden;
}

.submainLayout {
    position: relative;
    z-index: 10;

    width: 100%;
    max-width: 1200px;
    min-height: calc(100dvh - 30px);
    padding: 20px 40px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* button  */
.btn_custom {
    width: 300px;
    height: 43px;
    border: 1px solid transparent;
    padding: 5px 10px;

    background: url("../images/button/01.png");
    background-position: center;
    background-size: cover;

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

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

    filter: drop-shadow(2px 3px 5px #000000b0);
    transition: all .5s;
}

.btn_custom span,
.reg_btnBack span,
.reg_btnDes span {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(223, 177, 80, 1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.btn_custom:hover,
.reg_btnBack:hover,
.reg_btnDes:hover {
    filter: drop-shadow(2px 3px 5px #ffffffcc);
}

.btn_custom:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.reg_btnBack {
    position: absolute;
    z-index: 20;
    top: 30px;
    left: 10px;

    width: 150px;
    height: 40px;
    border: 1px solid transparent;
    padding: 5px 10px;
    padding-top: 10px;

    background: url("../images/button/02.png");
    background-position: center;
    background-size: cover;

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

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

    filter: drop-shadow(2px 3px 5px #000000b0);
    transition: all .5s;
}

.modal-open {
    padding-right: 0px !important;
}