/*
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: 1600px) { มากกว่า 1600px ขึ้นไป */
@media screen and (min-width: 1600px) and (max-width: 1749px) { /* มากกว่า 1600px ขึ้นไปถึง 1749px */
    .content-mobile-status{
        display: none !important;
    }

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

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

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

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

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

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

    .tempate_top_menu_profile_logo{
        width: 35px !important;
    }

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

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

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

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

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

    .original_icon_1{
        height: 14px !important;
    }

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

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

    .tran_sub2_table_1{
        height: 40px !important;
    }

    .tran_sub2_table_2{
        height: 405px !important;
    }

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

    .page_id_1_card_12{
        height: 190px !important; 
    }

    .page_id_1_card_2{
        height: 460px !important; 
    }

    .page_id_1_card_3{
        height: 460px !important; 
    }

    .page_id_1_card_4{
        height: 200px !important; 
    }

    .page_id_1_table_1{
        top: 8px !important;
    }

    .page_id_1_table_1{
        height: 42px !important;
    }

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

    .page_id_1_logo{
        width: 34px !important;
    }

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

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

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

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

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


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

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

    .customer-find_1 .ui-widget, .customer-find_1.ui-widget .ui-widget{
        font-size: 20px !important;
        width: 180px !important;
        height: 45px !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: 40px !important;
        padding-top: 2px !important;
    }

    .page_id_1_bt_tread_1{
        font-size: 16px !important;
        width: 70px !important;
        height: 40px !important;
    }

    .page_id_1_bt_tread_2{
        font-size: 18px !important;
        width: 70px !important; 
        height: 40px !important;
    }

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

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

    .page_id_1_bt_tread_5{
        font-size: 20px !important; 
        width: 40px !important;
        height: 40px !important;
    }

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

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

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

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
        max-width: 1500px !important;
    }
    /*--------------------------------------------------------------
    # About Us.jsp (CLEAR)
    --------------------------------------------------------------*/
    .about-section {
        padding: calc(0.9vw + 2.1rem) 5%;
        gap: calc(0.7vw + 1.6rem);
        max-width: 1500px;
        margin: 0 auto;
    }
    .about-image img {
        border-radius: calc(0.17vw + 0.6rem);
        transition: transform 0.3s ease;
    }
    .about-image img:hover {
        transform: scale(1.02);
    }
    .vision-mission {
        padding: calc(0.9vw + 2.1rem) 5%;
        gap: calc(0.7vw + 1.6rem);
        margin: 0 auto;
    }
    .vision-box, .mission-box {
        padding: calc(0.7vw + 1.6rem);
        border-radius: calc(0.17vw + 0.6rem);
        box-shadow: 0 calc(0.28vw + 0.6rem) calc(0.7vw + 1.6rem) rgba(0,0,0,0.06);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .vision-box:hover, .mission-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 calc(0.32vw + 0.9rem) calc(0.75vw + 2rem) rgba(0,0,0,0.1);
    }
    .icon-circle {
        width: calc(1.7vw + 4.1rem);
        height: calc(1.7vw + 4.1rem);
    }
    .icon-circle i {
        font-size: calc(0.9vw + 2rem);
    }
    .timeline-section {
        padding: calc(0.9vw + 2.1rem) 5%;
        max-width: 1500px;
        margin: 0 auto;
    }
    .timeline-container {
        max-width: calc(55vw + 30rem);
    }
    .timeline-title {
        font-size: calc(0.45vw + 1.1rem);
        padding-right: calc(0.9vw + 2rem);
    }
    .timeline-content {
        padding: 0 calc(0.9vw + 2rem);
        font-size: calc(0.38vw + 0.9rem);
    }
    .timeline-content p {
        font-size: calc(0.38vw + 0.9rem);
        line-height: 1.5;
    }
    /*--------------------------------------------------------------
    # Contact Us.jsp (CLEAR)
    --------------------------------------------------------------*/
    .contact .info-container {
        gap: calc(0.4vw + 1.6rem);
        max-width: 1500px;
        margin: 0 auto;
    }
    .contact .info-item {
        padding: calc(0.5vw + 1.4rem) 0 calc(0.6vw + 2rem) 0;
        border-radius: calc(0.15vw + 0.6rem);
    }
    .contact .info-item i {
        font-size: calc(0.5vw + 1.4rem);
        width: calc(0.9vw + 3.6rem);
        height: calc(0.9vw + 3.6rem);
    }
    .contact .info-item h3 {
        font-size: calc(0.5vw + 1.4rem);
        margin: calc(0.5vw + 1.4rem) 0;
    }
    .contact .info-item p {
        font-size: calc(0.3vw + 1rem);
        padding-right: calc(0.5vw + 1.4rem);
        padding-left: calc(0.5vw + 1.4rem);
    }
    .contact .php-email-form {
        padding: calc(0.6vw + 2rem);
        border-radius: calc(0.15vw + 0.6rem);
    }
    .contact .php-email-form input[type=text],
    .contact .php-email-form input[type=email],
    .contact .php-email-form textarea {
        font-size: calc(0.3vw + 1rem);
        padding: calc(0.25vw + 0.7rem) calc(0.4vw + 1.1rem);
    }
    .contact .php-email-form button[type=submit] {
        padding: calc(0.25vw + 0.7rem) calc(0.6vw + 2rem);
        font-size: calc(0.3vw + 1rem);
    }
    /*--------------------------------------------------------------
    # Index.jsp (CLEAR)
    --------------------------------------------------------------*/
    .banner-section {
        margin-top: calc(1vw + 1.2rem);
    }

    .banner-container {
        padding: 0 4.5%;
        margin-bottom: calc(0.65vw + 1.2rem);
        gap: calc(0.32vw + 0.6rem);
    }

    .banner-header {
        padding: calc(0.85vw + 1.6rem);
    }

    .banner-header h2 {
        font-size: calc(0.85vw + 1.6rem);
        margin-bottom: calc(0.22vw + 0.35rem);
    }

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

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

    .main-banner {
        height: clamp(310px, 25vw, 410px);
    }

    .banner-content {
        padding: calc(1.05vw + 2.1rem);
    }

    .banner-content h2 {
        font-size: calc(0.85vw + 1.6rem);
        margin-bottom: calc(0.32vw + 0.65rem);
    }

    .banner-content p {
        font-size: calc(0.82vw + 1rem);
        margin-bottom: calc(0.52vw + 1.05rem);
    }

    .banner-dots {
        bottom: calc(0.52vw + 1.05rem);
        gap: calc(0.22vw + 0.45rem);
    }

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

    /* ---------- QR CODE SECTION ---------- */
    .qr-section {
        height: clamp(310px, 25vw, 410px);
    }

    .qr-container {
        padding: calc(0.52vw + 1.2rem);
    }

    .qr-code {
        width: clamp(210px, 20.5vw, 230px);
        height: clamp(210px, 20.5vw, 230px);
        margin-bottom: calc(0.42vw + 0.85rem);
    }

    .qr-text {
        font-size: calc(0.42vw + 1.25rem);
        margin-bottom: calc(0.42vw + 0.85rem);
    }

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

    .app-button {
        width: calc(3.1vw + 8.2rem);
        height: calc(1.25vw + 2.5rem);
    }

    /* ---------- FEATURES SECTION ---------- */
    .features-section {
        padding: calc(0.85vw + 1.6rem) 4.5%;
    }

    .feature-item {
        padding: calc(0.42vw + 0.85rem) calc(0.52vw + 1.05rem);
    }

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

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

    .feature-title {
        font-size: calc(0.82vw + 1rem);
        margin-bottom: calc(0.07vw + 0.12rem);
    }

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

    /* ---------- PROMOTIONAL BANNER ---------- */
    .promo-banner {
        padding: 0 4.5%;
        max-height: calc(5.2vw + 9.5rem);
    }

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

    .product-row {
        gap: calc(0.42vw + 0.85rem);
    }

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

    .product-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: calc(0.42vw + 0.85rem);
        margin-bottom: calc(0.65vw + 1.2rem);
    }

    .product-card {
        padding: calc(0.32vw + 0.65rem);
    }

    .discount-badge {
        font-size: calc(0.32vw + 0.65rem);
        padding: calc(0.11vw + 0.22rem) calc(0.21vw + 0.42rem);
    }

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

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

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

    .sold-count {
        font-size: calc(0.52vw + 0.65rem);
        margin-top: calc(0.11vw + 0.22rem);
    }

    .product-name {
        font-size: calc(0.62vw + 0.8rem);
        max-height: calc(1.85vw + 3.4rem);
    }

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

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

    .sold-count2 {
        font-size: calc(0.52vw + 0.65rem);
        margin-top: calc(0.11vw + 0.22rem);
    }

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

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

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

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

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

    .categories-container {
        padding: 0 4.5%;
        gap: 1.1rem;
    }

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

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

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

    .show-more-button {
        padding: calc(0.32vw + 0.65rem);
        font-size: calc(0.52vw + 1.05rem);
        margin-top: calc(0.42vw + 0.85rem);
    }
    /*--------------------------------------------------------------
    # goldplus.xhtml (CLEAR)
    --------------------------------------------------------------*/
    .reasons-section {
        padding: clamp(50px, 8vw, 70px) clamp(8%, 12vw, 12%);
        text-align: center;
    }

    .reasons-section h2 {
        font-size: clamp(28px, 4vw, 32px);
        margin-bottom: clamp(60px, 10vw, 80px);
        color: #333;
        font-weight: 600;
    }

    .reasons-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(60px, 7vw, 100px);
        margin-top: clamp(35px, 5vw, 50px);
        padding-left: 6%;
        padding-right: 6%;
    }

    .reason-icon {
        background: #fff;
        width: clamp(75px, 8vw, 90px);
        height: clamp(75px, 8vw, 90px);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: clamp(18px, 3vw, 22px);
        box-shadow: 0 5px 18px rgba(0,0,0,0.11);
    }

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

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

    .reason-desc {
        font-size: clamp(15px, 2.5vw, 17px);
        color: #666;
        line-height: 1.5;
    }

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

    .steps-title {
        font-size: clamp(28px, 4vw, 32px);
        margin-bottom: clamp(35px, 5vw, 50px);
        font-weight: 600;
        color: white;
    }

    .steps-container {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        max-width: 1200px;
        flex-wrap: nowrap;
        gap: clamp(20px, 3vw, 30px);
    }

    .step-card {
        background: white;
        border-radius: clamp(10px, 1.5vw, 12px);
        padding: clamp(30px, 4vw, 40px) clamp(20px, 3vw, 30px);
        width: calc(25% - 20px);
        text-align: center;
        box-shadow: 0 6px 20px rgba(0,0,0,0.11);
        display: flex;
        flex-direction: column;
        min-height: clamp(250px, 35vw, 290px);
    }

    .step-number {
        font-size: clamp(38px, 6vw, 48px);
        color: #beb1b1;
        font-weight: 300;
        margin-bottom: clamp(12px, 2vw, 18px);
    }

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

    .step-description {
        font-size: clamp(15px, 2.5vw, 17px);
        color: #666;
        flex-grow: 1;
    }

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

    .programs-title {
        font-size: clamp(28px, 4vw, 32px);
        margin-bottom: clamp(40px, 6vw, 60px);
        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(25px, 4vw, 40px);
        margin: 0 auto;
        max-width: 1200px;
    }

    .program-card {
        background: rgba(255, 255, 255, 0.95);
        border-radius: clamp(18px, 2.5vw, 22px);
        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);
        opacity: 0;
        transform: translateY(30px);
        animation: slideInUp 0.6s ease-out forwards;
    }

    .program-card:hover {
        transform: translateY(-12px) scale(1.025);
        box-shadow: 0 20px 40px rgba(0,0,0,0.16);
    }

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

    .hero-content {
        flex: 1;
        padding: clamp(35px, 5vw, 50px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        z-index: 1;
        color: #fff;
        text-align: left;
        padding-left: clamp(70px, 9vw, 100px);
        transition: all 0.5s ease;
    }

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

    .hero-subtitle {
        font-size: clamp(22px, 3.5vw, 26px);
        margin-bottom: clamp(18px, 3vw, 22px);
        transition: all 0.3s ease;
    }

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

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

    .hero-form {
        flex: 0 0 clamp(380px, 48vw, 450px);
        background-color: white;
        padding: clamp(30px, 4vw, 40px);
        border-radius: clamp(10px, 1.5vw, 12px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.11);
        margin: clamp(70px, 18vw, 130px);
        position: relative;
        z-index: 1;
        height: fit-content;
        align-self: center;
        transition: all 0.5s ease;
    }
}