/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Aug 08, 2024, 02:03:57 PM
    Author     : yot_o
*/
@font-face {
    font-family: NotoSansThai;
    src: url("../fonts/Noto_Sans_Thai/NotoSansThai-VariableFont_wdth_wght.ttf");
}
*{
    text-decoration: none;
}
:root {
    /*Static*/
    --background-color: #ffffff;
    --text-color: #000000;
    --header-background-color: #ffffff;
    --button-background-color: #ffffff;
}

:root {
    /*Dinamic*/
    --font-size: 16px;
    --styled-font-size: 18px;
    --header-font-size: 50px;
    /* Template */
    --tempate_top_menu_txt: 14px; 
}

:root {
  /* Header Variables */
  --header-height: calc(2vw + 40px);
  --header-bg: #FFFFFF;
  --header-border: #f0f0f0;
  --header-shadow: rgba(0, 0, 0, 0.1);
  
  /* Logo Variables */
  --logo-size: calc(1.2vw + 16px);
  --logo-text-size: calc(1.2vw + 14px);
  --logo-spacing: calc(0.3vw + 3px);
  
  /* Search Variables */
  --search-width-max: 350px;
  --search-width-min: 250px;
  --search-height: 36px;
  --search-radius: 20px;
  --search-accent: #FF5353;
  --search-input-size: calc(0.6vw + 12px);
  
  /* Navigation Variables */
  --nav-font-size: calc(0.45vw + 9px);
  --nav-spacing: calc(0.4vw + 4px);
  --nav-accent: #FF5353;
  --nav-underline-offset: calc(-0.25vw - 2px);
  
  /* Footer Variables */
  --footer-padding: clamp(30px, 8vw, 50px);
  --footer-gap: clamp(30px, 6vw, 40px);
  --footer-title-size: clamp(18px, 3.5vw, 22px);
  --footer-text-size: clamp(12px, 2.5vw, 14px);
  
  /* Mobile Variables */
  --mobile-nav-toggle-size: calc(1.2vw + 12px);
  --mobile-menu-padding: calc(2.5vw + 25px) calc(0.8vw + 8px);
}

:root {
    .goldplus-container {
        display: flex;
        padding: 0 var(--container-padding);
        gap: var(--container-gap);
    }
    .goldplus-container-nonflex {
        padding: 0 var(--container-padding);
        gap: var(--container-gap);
    }
    --font-size-sm: calc(0.5vw + 0.5rem);
    --font-size-md: calc(0.6vw + 0.7rem);
    --font-size-lg: calc(0.8vw + 0.9rem);
    --gap-sm: 10px;
    --gap-md: 20px;
    --gap-lg: 40px;
    --logo-size: 40px;
    --icon-size: 18px;
    --footer-heading-size: calc(0.6vw + 1rem);
    --footer-link-size: var(--font-size-sm);

    --banner-margin-top: calc(4vw + 2rem);
    --container-padding: 5%;
    --container-gap: calc(0.3vw + 0.5rem);

    /* Typography Variables */
    --font-size-small: calc(0.4vw + 0.8rem);
    --font-size-medium: calc(0.5vw + 1rem);
    --font-size-large: calc(0.6vw + 1.2rem);
    --font-size-xlarge: calc(0.8vw + 1.5rem);
    --font-size-xxlarge: calc(1vw + 1.8rem);

    /* Spacing Variables */
    --spacing-xs: calc(0.2vw + 0.3rem);
    --spacing-sm: calc(0.3vw + 0.5rem);
    --spacing-md: calc(0.5vw + 1rem);
    --spacing-lg: calc(0.8vw + 1.5rem);
    --spacing-xl: calc(1vw + 2rem);
    --spacing-xxl: calc(1.5vw + 2.5rem);

    /* Component Sizes */
    --banner-height: clamp(300px, 25vw, 400px);
    --qr-section-width: clamp(200px, 20vw, 220px);
    --product-card-gap: calc(0.4vw + 0.8rem);
    --border-radius: calc(0.2vw + 0.5rem);

    /* Colors */
    --primary-color: #FFD700;
    --secondary-color: #e02020;
    --accent-color: #FF5353;
    --text-primary: #333;
    --text-secondary: #666;
    --text-light: #968484;
    --text-muted: #c5b4b4;

    /* Additional Variables */
    --shadow-light: 0 calc(0.2vw + 0.3rem) calc(0.5vw + 1rem) rgba(0,0,0,0.1);
    --shadow-medium: 0 calc(0.3vw + 0.5rem) calc(0.8vw + 1.5rem) rgba(0,0,0,0.05);
    --section-bg: #f9f9f9;

    /* Contact Section Variables */
    --contact-gap: var(--gap-md);
    --contact-icon-size: calc(0.5vw + 3.5rem);
    --contact-icon-font-size: calc(0.3vw + 1.5rem);
    --contact-padding-vertical: var(--spacing-md);
    --contact-padding-bottom: calc(0.4vw + 1.9rem);
    --contact-form-padding: calc(0.4vw + 1.9rem);
    --contact-form-padding-mobile: var(--spacing-md);
    --contact-input-padding: calc(0.2vw + 0.6rem) calc(0.3vw + 0.9rem);
    --contact-button-padding: calc(0.2vw + 0.6rem) calc(0.4vw + 1.9rem);
    --contact-button-border-radius: calc(1vw + 3rem);
    --contact-shadow: 0 0 calc(0.3vw + 1.3rem) rgba(0, 0, 0, 0.1);

    /* Variables สำหรับหน้าจอขนาดใหญ่ (1870px+) */
    --desktop-xl-padding: calc(1vw + 2rem);
    --desktop-xl-margin: calc(0.8vw + 1.5rem);
    --desktop-xl-icon-size: calc(0.5vw + 4rem);
    --desktop-xl-font-size: calc(0.4vw + 1.2rem);
    --desktop-xl-gap: calc(0.6vw + 2rem);
    --desktop-xl-grid-columns: 6;
    --desktop-xl-carousel-width: calc(16.66% - 1rem);

    /* Variables สำหรับหน้าจอใหญ่ (1750px+) */
    --desktop-large-padding: calc(0.9vw + 1.8rem);
    --desktop-large-margin: calc(0.7vw + 1.3rem);
    --desktop-large-icon-size: calc(0.45vw + 3.5rem);
    --desktop-large-font-size: calc(0.35vw + 1.1rem);
    --desktop-large-gap: calc(0.55vw + 1.8rem);
    --desktop-large-grid-columns: 5;
    --desktop-large-carousel-width: calc(20% - 1rem);

    /* Variables สำหรับหน้าจอกลาง (1600px+) */
    --desktop-medium-padding: calc(0.8vw + 1.5rem);
    --desktop-medium-margin: calc(0.6vw + 1rem);
    --desktop-medium-icon-size: calc(0.4vw + 3rem);
    --desktop-medium-font-size: calc(0.3vw + 1rem);
    --desktop-medium-gap: calc(0.5vw + 1.5rem);
    --desktop-medium-grid-columns: 5;
    --desktop-medium-carousel-width: calc(20% - 0.8rem);

    /* Variables สำหรับหน้าจอปกติ (1440px+) */
    --desktop-padding: calc(0.7vw + 1.2rem);
    --desktop-margin: calc(0.5vw + 0.8rem);
    --desktop-icon-size: calc(0.35vw + 2.5rem);
    --desktop-font-size: calc(0.25vw + 0.9rem);
    --desktop-gap: calc(0.4vw + 1.2rem);
    --desktop-grid-columns: 4;
    --desktop-carousel-width: calc(25% - 0.8rem);

    /* Variables สำหรับ Tablet (768px+) */
    --tablet-padding: calc(0.5vw + 1rem);
    --tablet-margin: calc(0.4vw + 0.6rem);
    --tablet-icon-size: calc(0.3vw + 2rem);
    --tablet-font-size: calc(0.2vw + 0.8rem);
    --tablet-gap: calc(0.3vw + 1rem);
    --tablet-grid-columns: 3;
    --tablet-carousel-width: calc(33.33% - 0.6rem);

    /* Variables สำหรับ Mobile (1px+) */
    --mobile-padding: var(--spacing-md);
    --mobile-margin: var(--spacing-sm);
    --mobile-icon-size: calc(0.2vw + 1.5rem);
    --mobile-font-size: var(--font-size-sm);
    --mobile-gap: var(--gap-sm);
    --mobile-grid-columns: 2;
    --mobile-carousel-width: calc(50% - 0.5rem);

    /* Shared Variables */
    --responsive-border-radius: calc(0.3vw + 0.8rem);
    --responsive-shadow: 0 calc(0.4vw + 0.8rem) calc(1vw + 2rem) rgba(0,0,0,0.08);
    --responsive-container-max-width: calc(90vw + 10rem);
    --responsive-header-height: calc(1.2vw + 4rem);

    /* Grid & Layout */
    --desktop-large-grid-columns: 6;
    --desktop-large-carousel-item-width: calc(16.66% - 1rem);
    --desktop-large-container-max-width: calc(90vw + 10rem);
    --desktop-large-header-height: calc(1.2vw + 4rem);

    /* Typography */
    --desktop-large-heading-size: calc(0.8vw + 2rem);
    --desktop-large-text-size: calc(0.4vw + 1rem);
    --desktop-large-small-text: calc(0.3vw + 0.9rem);
}

body {
    /* CSS Modify */
    font-family: NotoSansThai !important;
    letter-spacing: 0.36px;
    font-size: var(--font-size);

    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6, h7, h8, h9, h10, span, p, button, ul, li, div, a{
    font-family: NotoSansThai !important;
}

.layout-main .layout-content{
    padding: 20px 20px;
    /*padding-top: 4.5em;*/
}

.card{
    margin-bottom: 0px !important;
}

.pi{
    font-family: 'primeicons' !important;
}