/*
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 : Nov 11, 2022, 11:37:57 AM
    Author     : yot_o
*/

/*@media screen and (min-width: 1750px) { มากกว่า 1750px ขึ้นไป */
@media screen and (min-width: 1750px) and (max-width: 1869px) { /* มากกว่า 1750px ขึ้นไปถึง 1869px */
    .content-mobile-status{
        display: none !important;
    }

    .content-pc-status{
        display: block !important;
    }

    /*Tempate*/
    .tempate_logo{
        width: 120px !important;
    }

    .tempate_top_menu_table{
        top: 12px !important;
        left: 160px !important;
    }

    .tempate_top_menu_icon{
        font-size: 18px !important;
    }

    .tempate_top_menu_txt{
        font-size: 22px !important;
        padding-left: 10px !important;
    }

    .tempate_top_menu_underline{
        font-size: 20px !important;
    }

    .tempate_top_menu_profile_logo{
        width: 40px !important;
    }

    .tempate_top_menu_profile_id{
        font-size: 16px !important;
    }

    .tempate_top_menu_profile_name{
        font-size: 18px !important;
    }

    .tempate_top_menu_profile_singout{
        font-size: 18px !important; 
        min-width: 90px !important; 
        height: 40px !important;
    }

    /*Original*/
    .original_table_txt_1{
        font-size: 18px !important;
    }

    .original_table_txt_2{
        font-size: 16px !important;
    }

    .original_icon_1{
        height: 16px !important;
    }

    /*tran_sub2*/
    .tran_sub2_txt_1{
        font-size: 18px !important;
    }

    .tran_sub2_txt_2{
        font-size: 18px !important;
    }

    .tran_sub2_table_1{
        height: 45px !important;
    }

    .tran_sub2_table_2{
        height: 450px !important;
    }

    /*page_id=1*/
    .page_id_1_card_11{
        height: 300px !important; 
    }

    .page_id_1_card_12{
        height: 220px !important; 
    }

    .page_id_1_card_2{
        height: 529px !important; 
    }

    .page_id_1_card_3{
        height: 529px !important; 
    }

    .page_id_1_card_4{
        height: 285px !important; 
    }

    .page_id_1_table_1{
        height: 50px !important;
    }

    .page_id_1_table_td_1{
        width: 100% !important; 
        height: 50px !important;
    }

    .page_id_1_logo{
        width: 40px !important;
    }

    .page_id_1_txt_header1{
        font-size: 38px !important;
    }

    .page_id_1_txt_header2{
        font-size: 26px !important;
    }

    .page_id_1_txt_header3{
        font-size: 18px !important;
    }

    .page_id_1_txt_header4{
        font-size: 22px !important;
    }

    .page_id_1_txt_header5{
        font-size: 32px !important;
    }

    .page_id_1_input_tread_1{
        width: 100% !important;
        height: 50px !important;
    }

    .page_id_1_number_tread_1 .ui-widget, .page_id_1_number_tread_1 .ui-widget .ui-widget{
        width: 100% !important;
        height: 50px !important;
        background-color: #2A2A2A !important;
        border-radius: 10px !important;
    }

    .customer-find_1 .ui-widget, .customer-find_1.ui-widget .ui-widget{
        font-size: 22px !important;
        width: 200px !important;
        height: 50px !important;
        background-color: #2A2A2A !important; 
        border-radius: 12px !important; 
        padding-left: 35px !important;
    }

    .page_id_1_dropdown_tread_1{
        font-size: 30px !important;
        width: 100% !important; 
        height: 50px !important;
        padding-top: 7px !important;
    }

    .page_id_1_bt_tread_1{
        font-size: 20px !important;
        width: 90px !important;
        height: 50px !important;
    }

    .page_id_1_bt_tread_2{
        font-size: 20px !important;
        width: 100px !important; 
        height: 50px !important;
    }

    .page_id_1_bt_tread_3{
        font-size: 18px !important; 
        width: 130px !important;
        height: 50px !important;
    }

    .page_id_1_bt_tread_4{
        font-size: 20px !important; 
        width: 100% !important;
        height: 50px !important;
    }

    .page_id_1_bt_tread_5{
        font-size: 22px !important; 
        width: 50px !important;
        height: 50px !important;
    }

    /*summary*/
    .page_id_1_summary_tab_1.ui-tabs .ui-tabs-nav li.ui-tabs-header{
        padding: 0.5rem !important;
    }

    .page_id_1_summary_tab_1.ui-tabs .ui-tabs-panels .ui-tabs-panel{
        padding: 0.5rem !important;
    }

    .page_id_1_summary_tab_1 .ui-helper-reset{
        font-size: 20px;
    }

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
        max-width: 1700px !important;
    }
    /*--------------------------------------------------------------
    # About Us.jsp (CLEAR)
    --------------------------------------------------------------*/
    .about-section {
        padding: calc(0.85vw + 2.3rem) 5%;
        gap: calc(0.65vw + 1.8rem);
        max-width: 1650px;
        margin: 0 auto;
    }
    .about-image img {
        border-radius: calc(0.16vw + 0.7rem);
        transition: transform 0.3s ease;
    }
    .about-image img:hover {
        transform: scale(1.02);
    }
    .vision-mission {
        padding: calc(0.85vw + 2.3rem) 5%;
        gap: calc(0.65vw + 1.8rem);
        margin: 0 auto;
    }
    .vision-box, .mission-box {
        padding: calc(0.65vw + 1.8rem);
        border-radius: calc(0.16vw + 0.7rem);
        box-shadow: 0 calc(0.27vw + 0.7rem) calc(0.65vw + 1.8rem) rgba(0,0,0,0.07);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .vision-box:hover, .mission-box:hover {
        transform: translateY(-4px);
        box-shadow: 0 calc(0.35vw + 1rem) calc(0.8vw + 2.2rem) rgba(0,0,0,0.11);
    }
    .icon-circle {
        width: calc(1.6vw + 4.3rem);
        height: calc(1.6vw + 4.3rem);
    }
    .icon-circle i {
        font-size: calc(0.85vw + 2.1rem);
    }
    .timeline-section {
        padding: calc(0.85vw + 2.3rem) 5%;
        max-width: 1650px;
        margin: 0 auto;
    }
    .timeline-container {
        max-width: calc(52vw + 32rem);
    }
    .timeline-title {
        font-size: calc(0.42vw + 1.15rem);
        padding-right: calc(0.85vw + 2.1rem);
    }
    .timeline-content {
        padding: 0 calc(0.85vw + 2.1rem);
        font-size: calc(0.37vw + 0.95rem);
    }
    .timeline-content p {
        font-size: calc(0.37vw + 0.95rem);
        line-height: 1.55;
    }
    /*--------------------------------------------------------------
    # Contact Us.jsp (CLEAR)
    --------------------------------------------------------------*/
    .contact .info-container {
        gap: calc(0.35vw + 1.8rem);
        max-width: 1650px;
        margin: 0 auto;
    }
    .contact .info-item {
        padding: calc(0.45vw + 1.6rem) 0 calc(0.55vw + 2.2rem) 0;
        border-radius: calc(0.18vw + 0.7rem);
    }
    .contact .info-item i {
        font-size: calc(0.45vw + 1.5rem);
        width: calc(0.85vw + 3.8rem);
        height: calc(0.85vw + 3.8rem);
    }
    .contact .info-item h3 {
        font-size: calc(0.45vw + 1.5rem);
        margin: calc(0.45vw + 1.5rem) 0;
    }
    .contact .info-item p {
        font-size: calc(0.28vw + 1.05rem);
        padding-right: calc(0.45vw + 1.5rem);
        padding-left: calc(0.45vw + 1.5rem);
    }
    .contact .php-email-form {
        padding: calc(0.55vw + 2.2rem);
        border-radius: calc(0.18vw + 0.7rem);
    }
    .contact .php-email-form input[type=text],
    .contact .php-email-form input[type=email],
    .contact .php-email-form textarea {
        font-size: calc(0.28vw + 1.05rem);
        padding: calc(0.22vw + 0.75rem) calc(0.35vw + 1.15rem);
    }
    .contact .php-email-form button[type=submit] {
        padding: calc(0.22vw + 0.75rem) calc(0.55vw + 2.1rem);
        font-size: calc(0.28vw + 1.05rem);
    }
    /*--------------------------------------------------------------
    # Index.jsp (CLEAR)
    --------------------------------------------------------------*/
    /* ---------- BANNER SECTION ---------- */
    .banner-section {
        margin-top: calc(1.1vw + 1.3rem);
    }

    .banner-container {
        padding: 0 4%;
        margin-bottom: calc(0.7vw + 1.3rem);
        gap: calc(0.35vw + 0.7rem);
    }

    .banner-header {
        padding: calc(0.9vw + 1.8rem);
    }

    .banner-header h2 {
        font-size: calc(0.9vw + 1.8rem);
        margin-bottom: calc(0.25vw + 0.4rem);
    }

    .banner-header p {
        font-size: calc(0.65vw + 0.9rem);
    }

    .banner-header-image {
        width: calc(4.5vw + 9rem);
        height: calc(4.5vw + 9rem);
    }

    .main-banner {
        height: clamp(320px, 26vw, 420px);
    }

    .banner-content {
        padding: calc(1.1vw + 2.2rem);
    }

    .banner-content h2 {
        font-size: calc(0.9vw + 1.8rem);
        margin-bottom: calc(0.35vw + 0.7rem);
    }

    .banner-content p {
        font-size: calc(0.85vw + 1.1rem);
        margin-bottom: calc(0.55vw + 1.1rem);
    }

    .banner-dots {
        bottom: calc(0.55vw + 1.1rem);
        gap: calc(0.25vw + 0.5rem);
    }

    .banner-dot {
        width: calc(0.35vw + 0.7rem);
        height: calc(0.35vw + 0.7rem);
    }

    /* ---------- QR CODE SECTION ---------- */
    .qr-section {
        height: clamp(320px, 26vw, 420px);
    }

    .qr-container {
        padding: calc(0.55vw + 1.3rem);
    }

    .qr-code {
        width: clamp(220px, 21vw, 240px);
        height: clamp(220px, 21vw, 240px);
        margin-bottom: calc(0.45vw + 0.9rem);
    }

    .qr-text {
        font-size: calc(0.45vw + 1.3rem);
        margin-bottom: calc(0.45vw + 0.9rem);
    }

    .app-buttons {
        margin-top: calc(0.45vw + 0.9rem);
    }

    .app-button {
        width: calc(3.2vw + 8.5rem);
        height: calc(1.3vw + 2.6rem);
    }

    /* ---------- FEATURES SECTION ---------- */
    .features-section {
        padding: calc(0.9vw + 1.8rem) 4%;
    }

    .feature-item {
        padding: calc(0.45vw + 0.9rem) calc(0.55vw + 1.1rem);
    }

    .feature-icon {
        margin-right: calc(0.35vw + 0.7rem);
    }

    .feature-icon img {
        width: calc(2.2vw + 4.5rem);
        height: calc(2.2vw + 4.5rem);
    }

    .feature-title {
        font-size: calc(0.85vw + 1.1rem);
        margin-bottom: calc(0.08vw + 0.15rem);
    }

    .feature-desc {
        font-size: calc(0.55vw + 0.7rem);
    }

    /* ---------- PROMOTIONAL BANNER ---------- */
    .promo-banner {
        padding: 0 4%;
        max-height: calc(5.5vw + 10rem);
    }

    /* ---------- PRODUCTS SECTION ---------- */
    .products-container,
    .news-container {
        padding: 0 4%;
        margin: calc(0.7vw + 1.3rem) 0;
    }

    .product-row {
        gap: calc(0.45vw + 0.9rem);
    }

    .products-section {
        padding: calc(0.55vw + 1.1rem) 0;
    }

    .product-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: calc(0.45vw + 0.9rem);
        margin-bottom: calc(0.7vw + 1.3rem);
    }

    .product-card {
        padding: calc(0.35vw + 0.7rem);
    }

    .discount-badge {
        font-size: calc(0.35vw + 0.7rem);
        padding: calc(0.12vw + 0.25rem) calc(0.22vw + 0.45rem);
    }

    .product-info {
        padding: calc(0.35vw + 0.7rem) 0;
    }

    .product-price {
        font-size: calc(0.45vw + 1.3rem);
    }

    .original-price {
        font-size: calc(0.45vw + 0.9rem);
    }

    .sold-count {
        font-size: calc(0.55vw + 0.7rem);
        margin-top: calc(0.12vw + 0.25rem);
    }

    .product-name {
        font-size: calc(0.65vw + 0.9rem);
        max-height: calc(1.9vw + 3.6rem);
    }

    .product-price2 {
        font-size: calc(0.65vw + 0.9rem);
    }

    .original-price2 {
        font-size: calc(0.35vw + 0.6rem);
    }

    .sold-count2 {
        font-size: calc(0.55vw + 0.7rem);
        margin-top: calc(0.12vw + 0.25rem);
    }

    .custom-carousel .p-carousel-item {
        flex: 0 0 calc(20% - 0.9rem);
        margin-right: calc(0.45vw + 0.9rem);
    }

    .recommended-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .recommended-item {
        padding: 0 calc(0.55vw + 1.1rem);
    }

    .recommended-section {
        padding: calc(0.55vw + 1.1rem) 0;
    }

    /* ---------- CATEGORIES SECTION ---------- */
    .categories-section {
        padding: calc(0.55vw + 1.1rem) 0;
    }

    .categories-container {
        padding: 0 4%;
        gap: 1.2rem;
    }

    .category-item {
        max-width: calc(4.5vw + 9rem);
    }

    .category-icon {
        width: calc(3.8vw + 3.5rem);
        height: calc(3.8vw + 3.5rem);
    }

    .category-name {
        font-size: calc(0.25vw + 1.1rem);
    }

    .show-more-button {
        padding: calc(0.35vw + 0.7rem);
        font-size: calc(0.55vw + 1.1rem);
        margin-top: calc(0.45vw + 0.9rem);
    }
    /*--------------------------------------------------------------
    # goldplus.xhtml (CLEAR)
    --------------------------------------------------------------*/
    .reasons-section {
        padding: clamp(60px, 8vw, 80px) clamp(10%, 15vw, 15%);
        text-align: center;
    }

    .reasons-section h2 {
        font-size: clamp(30px, 4vw, 36px);
        margin-bottom: clamp(75px, 10vw, 100px);
        color: #333;
        font-weight: 600;
    }

    .reasons-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(80px, 8vw, 120px);
        margin-top: clamp(40px, 5vw, 60px);
        padding-left: 8%;
        padding-right: 8%;
    }

    .reason-icon {
        background: #fff;
        width: clamp(80px, 8vw, 100px);
        height: clamp(80px, 8vw, 100px);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: clamp(20px, 3vw, 25px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    }

    .reason-icon img {
        width: clamp(40px, 5vw, 50px);
        height: clamp(40px, 5vw, 50px);
    }

    .reason-title {
        font-weight: bold;
        margin-bottom: clamp(10px, 2vw, 15px);
        font-size: clamp(22px, 3vw, 26px);
        color: #333;
    }

    .reason-desc {
        font-size: clamp(16px, 2.5vw, 18px);
        color: #666;
        line-height: 1.6;
    }

    .steps-section {
        background: linear-gradient(135deg, #e52d27 0%, #b31217 100%);
        color: white;
        padding: clamp(60px, 8vw, 80px) 0;
        text-align: center;
    }

    .steps-title {
        font-size: clamp(30px, 4vw, 36px);
        margin-bottom: clamp(40px, 5vw, 60px);
        font-weight: 600;
        color: white;
    }

    .steps-container {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        max-width: 1400px;
        flex-wrap: nowrap;
        gap: clamp(25px, 3vw, 35px);
        padding: 0 2%;
    }

    .step-card {
        background: white;
        border-radius: clamp(12px, 1.5vw, 15px);
        padding: clamp(35px, 4vw, 45px) clamp(25px, 3vw, 35px);
        width: calc(25% - 25px);
        text-align: center;
        box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        display: flex;
        flex-direction: column;
        min-height: clamp(280px, 35vw, 320px);
    }

    .step-number {
        font-size: clamp(42px, 6vw, 52px);
        color: #beb1b1;
        font-weight: 300;
        margin-bottom: clamp(15px, 2vw, 20px);
    }

    .step-title {
        font-size: clamp(22px, 3vw, 26px);
        font-weight: 600;
        color: #333;
        margin-bottom: clamp(15px, 2vw, 20px);
    }

    .step-description {
        font-size: clamp(16px, 2.5vw, 18px);
        color: #666;
        flex-grow: 1;
        line-height: 1.6;
    }

    .programs-section {
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .programs-title {
        font-size: clamp(30px, 4vw, 36px);
        margin-bottom: clamp(50px, 6vw, 70px);
        color: #2c3e50;
        font-weight: 700;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .programs-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(35px, 4vw, 50px);
        margin: 0 auto;
        max-width: 1400px;
    }

    .program-card {
        background: rgba(255, 255, 255, 0.95);
        border-radius: clamp(20px, 2.5vw, 25px);
        padding: 0;
        text-align: left;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .program-card:hover {
        transform: translateY(-15px) scale(1.03);
        box-shadow: 0 25px 50px rgba(0,0,0,0.18);
    }

    .hero-section {
        display: flex;
        width: 100%;
        position: relative;
        justify-content: space-between;
        overflow: hidden;
        min-height: clamp(700px, 100vh, 900px);
        height: auto;
        transition: all 0.5s ease;
    }

    .hero-content {
        flex: 1;
        padding: clamp(40px, 5vw, 60px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        z-index: 1;
        color: #fff;
        text-align: left;
        padding-left: clamp(80px, 10vw, 120px);
        transition: all 0.5s ease;
    }

    .hero-title {
        color: #E52D27;
        font-size: clamp(30px, 4vw, 36px);
        font-weight: bold;
        margin-bottom: clamp(10px, 1.5vw, 15px);
        transition: all 0.3s ease;
    }

    .hero-subtitle {
        font-size: clamp(24px, 3.5vw, 28px);
        margin-bottom: clamp(20px, 3vw, 25px);
        transition: all 0.3s ease;
    }

    .hero-description {
        font-size: clamp(16px, 2.5vw, 18px);
        color: #666;
        margin-bottom: clamp(15px, 2vw, 20px);
    }

    .hero-note {
        font-size: clamp(14px, 2vw, 16px);
        color: #666;
    }

    .hero-form {
        flex: 0 0 clamp(400px, 45vw, 500px);
        background-color: white;
        padding: clamp(35px, 4vw, 45px);
        border-radius: clamp(12px, 1.5vw, 15px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        margin: clamp(80px, 15vw, 120px);
        position: relative;
        z-index: 1;
        height: fit-content;
        align-self: center;
        transition: all 0.5s ease;
    }
}