/*
    var ==============================================================================================================================================================
*/

:root {

    /*
    
        Source: https://m2.material.io/inline-tools/color/
    
    */

    --primary-ice-color-900: #1a227e;
    --primary-ice-color-800: #283493;
    --primary-ice-color-700: #303e9f;
    --primary-ice-color-600: #3949ab;
    --primary-ice-color-500: #3f50b5;
    --primary-ice-color-400: #5c6ac0;
    --primary-ice-color-300: #7985cb;
    --primary-ice-color-200: #9fa8da;
    --primary-ice-color-100: #c5cae9;
    --primary-ice-color-50: #e8eaf6;

    --primary-fire-color-900: #d25614;
    --primary-fire-color-800: #dd6d17;
    --primary-fire-color-700: #e47c1a;
    --primary-fire-color-600: #ea8a1d;
    --primary-fire-color-500: #ef9620;
    --primary-fire-color-400: #f1a435;
    --primary-fire-color-300: #f3b455;
    --primary-fire-color-200: #f6c984;
    --primary-fire-color-100: #fadeb4;
    --primary-fire-color-50: #fdf2e1;

    --ice-color: var(--primary-ice-color-700);
    --fire-color: var(--primary-fire-color-700);



    --mid-tone-color: #25a61a;
    --gold-tone-1-color: #c3b03a;
    --gold-tone-2-color: #af9935;
    --gold-tone-3-color: #8e742c;

    --normal: #FFFFFF;
    --normal-inverse: #000000;
    --glassy-effect: rgba(255, 255, 255, 0.6);
    --line: #ccc;
    --gray: #acacac61;
}

html[data-theme="dark"] {
    --mid-tone-color: #46c23d;
    --gold-tone-1-color: #9b904c;
    --gold-tone-2-color: #8a7e45;
    --gold-tone-3-color: #6e5f36;

    --normal: #252525;
    --normal-inverse: #FFFFFF;
    --glassy-effect: rgba(54, 54, 54, 0.6);
    --line: #232323;
    --gray: #5a5a5a61;
}

/*
    body ==============================================================================================================================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Thai:wght@300;400;500;600;700&family=Noto+Serif:wght@300;400;500;600;700&display=swap');

body {
    margin: 0px;
    font-family: 'Times New Roman', Times, serif, 'Noto Serif Thai', 'Noto Serif';
}

input {
    font-family: 'Times New Roman', Times, serif, 'Noto Serif Thai', 'Noto Serif';
}

button {
    font-family: 'Times New Roman', Times, serif, 'Noto Serif Thai', 'Noto Serif';
}

::selection {
    background: #3dab39;
    color: white;
}

body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background-color: var(--gold-tone-1-color);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--gold-tone-3-color);
}

body::-webkit-scrollbar-thumb:hover {
    background-color: var(--gold-tone-2-color);
}







h1,
h2,
h3,
h4,
h5,
p,
a {
    padding: 0;
    margin: 0;
    color: var(--normal-inverse);
}

h1 {
    font-size: 3.5em;
}
h2 {
    font-size: 3em;
}
h3 {
    font-size: 2.5em;
}
h4 {
    font-size: 2em;
}
h5 {
    font-size: 1.75em;
}
p {
    font-size: 1.5em;
}
a {
    color: #3dab39;
    font-weight: bold;
    font-size: 1.5em;
}

@media (max-width: 1420px) {
    h1 {
        font-size: 2.7em;
    }
    h2 {
        font-size: 2.5em;
    }
    h3 {
        font-size: 2.3em;
    }
    h4 {
        font-size: 2.0em;
    }
    h5 {
        font-size: 1.7em;
    }
    
    p {
        font-size: 1.2em;
    }
    a {
        font-size: 1.2em;
    }
}

section {
    padding: 20px;
}

/*
    bg ==============================================================================================================================================================
*/

/* Background styles - Only for home page */
body {
    background-image: url('/default-resources/imgs/bg/2024-04-18_19.27.48_2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Remove background-attachment: fixed for iOS compatibility */
    
    min-height: 100vh;
    position: relative;
}

/* Alternative approach for fixed background effect */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/default-resources/imgs/bg/2024-04-18_19.27.48_2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
}

/* Background overlay for better readability */
body::after {
    content: '';
    position: fixed;
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--glassy-effect);

    z-index: -1;
    pointer-events: none;
}

/* iOS specific fix */
@supports (-webkit-touch-callout: none) {
    body {
        background-attachment: scroll;
    }
}

/*
    header ==============================================================================================================================================================
*/

/* Logo */

body header {
    display: flex;
    align-items: center;

    backdrop-filter: blur(10px);

    background-color: var(--normal);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    position: relative;
    z-index: 1000;
}

body header .left {
    display: flex;
    align-items: center;
    padding: 10px;
}

body header .left .Logo {
    display: flex;
    align-items: center;
    padding: 5px;
    position: relative;
}

body header .left .Logo h1 {
    font-size: 2.5rem;
    margin: 0;
    padding: 0;

    /* Gap from left */
    margin-left: 5px;
    
    letter-spacing: 2px;
    align-self: center;
    text-align: center;

    white-space: nowrap;

    user-select: none;
}

body header .left .Logo h1 {
    font-weight: bold;

    /* Text colouring */
    background: linear-gradient(90deg, var(--ice-color) 0%, var(--fire-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

@media (max-width: 1420px) {
    body header .left .Logo h1 {
        font-size: 1.5rem;
    }
}

/* ----------------- nav ----------------- */

body header .right nav ul li a {
    text-decoration: none;
}


/*
    nav hamburger button
*/
@media (max-width: 1420px) { /* mobile */
    body header .right #nav_btn {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
    }

    body header .right #nav_btn img {
        width: 30px;
        height: 30px;
    }
}

@media (min-width: 1421px) { /* desktop */
    body header .right #nav_btn {
        display: none;
    }
}


/* nav.desktop */
@media (min-width: 1420px) {
    body header .right {
        display: flex;
        align-items: center;
        margin-left: auto;
        padding: 10px;

        margin-right: 20px;
    }

    body header .right nav {
        display: flex;
        align-items: center;

        white-space: nowrap;
    }

    body header .right nav .nav-line {
        margin-left: 20px;
    }

    body header .right nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 10px;

        display: flex; 
    }

    /*body header .right nav ul.nav_ul_main {

    }*/

    body header .right nav ul li {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        
    }

    body header .right nav ul li a {
        display: block;
        padding: 15px 25px;

        color: var(--gold-tone-3-color);

        font-weight: bold;
        font-size: 1.1rem;

        line-height: 1;
        position: relative;
        transition: all 0.3s ease;
        background: linear-gradient(90deg, var(--ice-color) 0%, var(--fire-color) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: var(--gold-tone-3-color);
        background-clip: text;
    }

    body header .right nav ul li a:hover {
        -webkit-text-fill-color: transparent;
    }

    /*
        ---------- For the hover effect on the links ----------
    */

        body header .right nav ul li a::after {
            content: '';
            display: block;
            position: absolute;
            left: 50%;
            bottom: 8px;
            width: 80%;
            height: 3px;
            background: linear-gradient(90deg, var(--ice-color) 0%, var(--fire-color) 100%);
            opacity: 0;
            transform: translateX(-50%) scaleX(0);
            transition: opacity 0.2s, transform 0.2s;
            border-radius: 2px;
        }

        body header .right nav ul li a:hover::after {
            opacity: 1;
            transform: translateX(-50%) scaleX(1);
        }
    /*
        ---------- --------------------------------- ----------
        For Left Zone
    */

    body header .right nav ul li {
        position: relative; /* Needed for dropdown positioning */
    }

    body header .right nav ul li div.drop-down-nav {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: aliceblue;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);

        display: none;
        flex-direction: column;

        min-width: 280px;
        z-index: 10;
        padding: 8px 16px;

        animation: fadeIn 0.2s;
    }

    body header .right nav ul li:hover div.drop-down-nav {
        display: flex;
    }
    
    body header .right nav ul li div.drop-down-nav ul.drop-down-nav-lists {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    body header .right nav ul li div.drop-down-nav ul.drop-down-nav-lists li {
        margin: 0;
        padding: 0;
    }

    body header .right nav ul li div.drop-down-nav ul.drop-down-nav-lists li a {
        display: block;
        padding: 18px 18px;
        color: var(--gold-tone-3-color);
        font-size: 1rem;
        transition: background 0.18s, color 0.18s;
        text-decoration: none;
        font-weight: 500;
        position: relative;

        line-height: 1;
    }

    body header .right nav ul li div.drop-down-nav ul.drop-down-nav-lists li a:hover {
        background: linear-gradient(90deg, var(--ice-color) 0%, var(--fire-color) 100%);
        color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-8px);}
        to { opacity: 1; transform: translateY(0);}
    }

    /*
        For right zone
    */
}

/* nav.mobile */

@media (max-width: 1420px) {
    body header {
        position: relative;
    }

    body header .right {
        display: flex;
        align-items: center;

        margin-left: auto;
        padding: 10px;
        margin-right: 10px;

        z-index: 10000; 
    }

    body header .right nav {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100vw;
        height: 100vh;
        
        padding: 10px 0;
        z-index: 10001;
        
        flex-direction: column;
        align-items: flex-start;
        
        background: rgba(255,255,255,0.95);
        box-shadow: 0 2px 10px rgba(0,0,0,0.15);

        /* Animation */
        opacity: 1;
        transform:  translateX(0);
        transition: 
            opacity 0.1s ease,
            transform 0.3s ease;
    }

    body header .right nav.hide {
        /* Animation */
        opacity: 0;
        transform: translateX(-100%);
    }

    body header .right nav .nav-line {
        width: 100%;
        height: 1px;
        background-color: var(--gold-tone-3-color);
        margin: 10px 0;
    }

    body header .right nav ul {
        list-style: none;

        padding: 0;
        margin: 0;
        margin-left: 40px;

        flex-direction: column;
        gap: 0;
        
        box-sizing: border-box;
    }

    body header .right nav ul.nav_ul_main {
        margin-left: 0px;
        width: 100%;
    }

    body header .right nav ul li {
        box-shadow: none;
        box-sizing: border-box;
    }

    body header .right nav ul li a {
        padding: 12px 24px;
        font-size: 1.1rem;
        color: var(--gold-tone-3-color);
        display: block;
        transition: all 0.3s ease;
        background: linear-gradient(90deg, var(--ice-color) 0%, var(--fire-color) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: var(--gold-tone-3-color);
        background-clip: text;
    }

    body header .right nav ul li a:hover {
        -webkit-text-fill-color: transparent;
    }

    body header .right nav ul li a::after {
        display: none;
    }
}

/* ------------------------ nav.user ------------------------ */

@media (min-width: 1420px) {
    body header .right nav ul.signed li.user {
        display: flex;
        align-items: center;
        gap: 10px;

        padding: 8px;

        box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
    }

    body header .right nav ul.signed li.mobile {
        display: none;
    }


    body header .right nav ul.signed li.user img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    body header .right nav ul.signed.hide {
        display: none;
    }

    body header .right nav ul.notsign.hide {
        display: none;
    }
}

@media (max-width: 1420px) {
    body header .right nav ul.signed li.user {
        display: flex;
        align-items: center;
        gap: 10px;

        margin-left: 10px;
        padding: 8px;
        width: 0%;

        box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
    }

    body header .right nav ul.signed li.user img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }


    body header .right nav ul.signed.hide {
        display: none;
    }

    body header .right nav ul.notsign.hide {
        display: none;
    }
}

/*
    main ==============================================================================================================================================================
*/

body main {
    margin: 0;
    padding: 0px;
}

@media (max-width: 1420px) {
    body main {
        margin: 0;
        padding: 0px;
    }
}

/*
    footer ==============================================================================================================================================================
*/

footer {
    backdrop-filter: blur(10px);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    color: var(--normal-inverse);
    margin-top: 50px;
}

footer .f_bord {
    border-top: 1px solid var(--line);
}

footer a {
    color: var(--mid-tone-color);
    text-decoration: none;
}


/* First */
footer .footer-head {
    padding: 0 20px;
}
footer .footer-head h4 {
    margin: 0;
    padding: 10px 0;
}

/* Second */
footer .sitemaps {
    padding: 20px 0;

    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}
footer .sitemap {
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* Last */
footer .footer-lay {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    padding: 20px 20px;
}

footer .footer-lay .footer-lay-link {
    display: flex;
    gap: 25px;
}

@media (max-width: 520px) { /* For another use 1420px but except this on */
    footer .footer-lay {
        flex-direction: column;
        align-items: center;

        gap: 10px;
    }
 
    footer .footer-lay .footer-lay-link {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
}

/*
    article ==============================================================================================================================================================
*/

article {
    padding: 40px;
}

article h1,
article h2,
article h3,
article h4,
article h5,
article p,
article a {
    padding: 0;
    margin: 0;
}

article h1 {
    font-size: 3.5em;
}
article h2 {
    font-size: 3em;
}
article h3 {
    font-size: 2.5em;
}
article h4 {
    font-size: 2em;
}
article h5 {
    font-size: 1.75em;
}
article p {
    font-size: 1.5em;
}
article a {
    color: #3dab39;
    font-weight: bold;
    font-size: 1.5em;
}


article p.paragraph {
    text-indent: 2em;
}

article .center {
    text-align: center;
}

article .right {
    text-align: right;
}

@media (max-width: 1420px) {
    article h1 {
        font-size: 2.7em;
    }
    article h2 {
        font-size: 2.5em;
    }
    article h3 {
        font-size: 2.3em;
    }
    article h4 {
        font-size: 2.0em;
    }
    article h5 {
        font-size: 1.7em;
    }
    
    article p {
        font-size: 1.2em;
    }
    article a {
        font-size: 1.2em;
    }
}

/*
    modal ==============================================================================================================================================================
*/

/* Temporary modal styles matching theme */

/* Modal overlay */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
    overflow: auto;
    
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
}

/* Modal content container */
.modal-content {
    background-color: rgba(255, 255, 255, 0.95);
    border: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    
    margin: 10% auto;
    padding: 30px;
    width: 90%;
    max-width: 500px;
    
    font-family: 'Times New Roman', Times, serif, 'Noto Serif Thai', 'Noto Serif';
}

/* Modal header styling */
.modal-content h2 {
    color: var(--gold-tone-3-color);
    font-weight: bold;
    font-size: 1.8rem;
    margin: 0 0 20px 0;
    
    background: linear-gradient(90deg, var(--ice-color) 0%, var(--fire-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Modal text styling */
.modal-content p,
.modal-body {
    color: var(--gold-tone-3-color);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.modal-body p {
    margin: 0 0 15px 0;
}

.modal-body p:last-child {
    margin-bottom: 0;
}

/* Modal footer */
.modal-footer {
    margin-top: 20px;
    text-align: right;
    padding-top: 15px;
    border-top: 1px solid var(--gold-tone-1-color);
}

/* Modal buttons */
/*.modal-footer button {
    background: var(--gold-tone-3-color);
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.modal-footer button:hover {
    background: linear-gradient(90deg, var(--ice-color) 0%, var(--fire-color) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}*/

/* Responsive design */
@media (max-width: 1420px) {
    .modal-content {
        margin: 20% auto;
        width: 85%;
        padding: 20px;
    }
    
    .modal-content h2 {
        font-size: 1.5rem;
    }
    
    .modal-content p {
        font-size: 1rem;
    }
}

/*
    progressbar ==============================================================================================================================================================
*/

/* Progress Bar Styles - Global */

.progress-bar-container {
    width: 80%;
    margin: 10px 0;
}

.progress-bar {
    height: 8px;
    width: 0%;
    background: #007bff;
    transition: width 0.5s ease;
    border-radius: 4px;
}

.progress-text {
    font-size: 14px;
    color: #007bff;
    margin-top: 5px;
    display: block;
}

/* Progress bar animations */
@keyframes progressPulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.progress-bar.pulse {
    animation: progressPulse 2s infinite;
}

/* Progress bar states */
.progress-bar.success {
    background: #28a745;
}

.progress-bar.error {
    background: #dc3545;
}

.progress-text.success {
    color: #28a745;
}

.progress-text.error {
    color: #dc3545;
}

/* Modal enhancements */
.modal-body {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.modal-footer button:hover {
    opacity: 0.8;
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* Progress bar in modal */
.modal .progress-bar-container {
    width: 100%;
    margin: 20px 0;
}

.modal .progress-bar {
    height: 12px;
}

.modal .progress-text {
    text-align: center;
    font-size: 16px;
    margin-top: 10px;
}


/*
    button ==============================================================================================================================================================
*/

button {
    user-select: none;
    padding: 10px 20px;
    color: white;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
}

/* green button styles */

button.green_sw {
    background-color: #139409; /* 700 */
    box-shadow: 0 6px 0px #006400; /* 900 */
    transform: translateY(-6px);
}

button.green_sw:hover {
    background-color: #78cc6d; /* 300 */
    box-shadow: 0 4px 0px #006400; /* 900 */
    transform: translateY(-4px);
    
}
button.green_sw:active {
    background-color: #31b524; /* 500 */
    box-shadow: 0 0px 0 #006400; /* 900 */
    transform: translateY(0px);
}

/* blue button styles */

button.blue_sw {
    background-color: #2275b8; /* 700 */
    box-shadow: 0 6px 0px #1c5595; /* 900 */
    transform: translateY(-6px);
}

button.blue_sw:hover {
    background-color: #6cb3e0; /* 300 */
    box-shadow: 0 4px 0px #1c5595; /* 900 */
    transform: translateY(-4px);
}

button.blue_sw:active {
    background-color: #3694d6; /* 500 */
    box-shadow: 0 0px 0 #1c5595; /* 900 */
    transform: translateY(0px);
}

/* red button styles */

button.red_sw {
    background-color: #d43335; /* 700 */
    box-shadow: 0 6px 0px #b82222; /* 900 */
    transform: translateY(-6px);
}

button.red_sw:hover {
    background-color: #e57577; /* 300 */
    box-shadow: 0 4px 0px #b82222; /* 900 */
    transform: translateY(-4px);
}

button.red_sw:active {
    background-color: #f5463c; /* 500 */
    box-shadow: 0 0px 0 #b82222; /* 900 */
    transform: translateY(0px);
}

/* yellow button styles */

button.yellow_sw {
    background-color: #d07900; /* 700 */
    box-shadow: 0 6px 0px #bf5500; /* 900 */
    transform: translateY(-6px);
}

button.yellow_sw:hover {
    background-color: #e2b14e; /* 300 */
    box-shadow: 0 4px 0px #bf5500; /* 900 */
    transform: translateY(-4px);
}

button.yellow_sw:active {
    background-color: #d9920c; /* 500 */
    box-shadow: 0 0px 0 #bf5500; /* 900 */
    transform: translateY(0px);
}

/*
    input[type="text"] ==============================================================================================================================================================
*/

input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"] {
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid var(--gold-tone-2-color);
    font-size: 1.2em;
}

/*
    input[type="file"] ==============================================================================================================================================================
*/

input[type="file"] {
    padding: 50px 90px;
    border: 1px solid var(--gold-tone-2-color);

    transition: background-color 0.3s, box-shadow 0.3s;
}

input[type="file"]:hover {
    background-color: #ada46933;
    box-shadow: 0 0px 14px #9b904c33;
}

input[type="file"]::file-selector-button {
    user-select: none;
    padding: 10px 20px;
    color: white;
    border: none;
    font-size: 1.2em;
    cursor: pointer;

    margin-right: 20px;

    background-color: #139409; /* 700 */
    box-shadow: 0 6px 0px #006400; /* 900 */
    transform: translateY(-6px);
}

input[type="file"]::file-selector-button:hover {
    background-color: #78cc6d; /* 300 */
    box-shadow: 0 4px 0px #006400; /* 900 */
    transform: translateY(-4px);
}

input[type="file"]::file-selector-button:active {
    background-color: #31b524; /* 500 */
    box-shadow: 0 0px 0 #006400; /* 900 */
    transform: translateY(0px);
}

/*
     ==============================================================================================================================================================
*/