/*
Theme Name: Arctic carbon
Text Domain: Arctic carbon
Version: 1.5
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/

@import 'assets/css/style.css';

body, input, textarea, button, .button, .faux-button, .wp-block-button__link, .wp-block-file__button, .has-drop-cap:not(:focus)::first-letter, .has-drop-cap:not(:focus)::first-letter, .entry-content .wp-block-archives, .entry-content .wp-block-categories, .entry-content .wp-block-cover-image, .entry-content .wp-block-latest-comments, .entry-content .wp-block-latest-posts, .entry-content .wp-block-pullquote, .entry-content .wp-block-quote.is-large, .entry-content .wp-block-quote.is-style-large, .entry-content .wp-block-archives *, .entry-content .wp-block-categories *, .entry-content .wp-block-latest-posts *, .entry-content .wp-block-latest-comments *, .entry-content p, .entry-content ol, .entry-content ul, .entry-content dl, .entry-content dt, .entry-content cite, .entry-content figcaption, .entry-content .wp-caption-text, .comment-content p, .comment-content ol, .comment-content ul, .comment-content dl, .comment-content dt, .comment-content cite, .comment-content figcaption, .comment-content .wp-caption-text, .widget_text p, .widget_text ol, .widget_text ul, .widget_text dl, .widget_text dt, .widget-content .rssSummary, .widget-content cite, .widget-content figcaption, .widget-content .wp-caption-text{
    //font-family: "Mitr", sans-serif !important;
}

/* Reset & Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Sarabun', 'Kanit', sans-serif; /* แนะนำให้ใช้ Google Fonts ภาษาไทย */
    font-size: 14px;
    color: #333;
    background-color: #f4f4f4;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ============================
   1. Top Bar
   ============================ */
.top-bar {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e1e1e1;
    padding: 8px 0;
    font-size: 13px;
    color: #666;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-link {
    color: #e02b20; /* สีแดงเน้น */
    font-weight: 600;
}

.top-link:hover {
    text-decoration: underline;
}

/* ============================
   2. Main Header
   ============================ */
.main-header {
    background-color: #fff;
    padding: 20px 0;
}

.main-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

/* Logo */
.site-title {
    font-size: 32px;
    font-weight: 800;
    color: #003366; /* สีน้ำเงินเข้ม */
    margin: 0;
    line-height: 1;
}

.site-title .highlight {
    color: #ff6600; /* สีส้ม */
}

/* Search Bar */
.header-search {
    flex-grow: 1;
    max-width: 500px;
}

.search-group {
    display: flex;
    border: 2px solid #0056b3; /* กรอบสีน้ำเงิน */
    border-radius: 4px;
    overflow: hidden;
}

.search-select {
    border: none;
    background-color: #f0f0f0;
    padding: 0 10px;
    font-size: 14px;
    color: #555;
    border-right: 1px solid #ddd;
    outline: none;
    cursor: pointer;
    display: none; /* ซ่อนบนมือถือได้ถ้าต้องการ */
}

@media (min-width: 768px) {
    .search-select {
        display: block;
    }
}

.search-field {
    flex-grow: 1;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    outline: none;
}

.search-group button {
    background-color: #0056b3;
    color: #fff;
    border: none;
    padding: 0 20px;
    cursor: pointer;
    font-size: 16px;
}

.search-group button:hover {
    background-color: #004494;
}

/* Header Actions (Contact, User, Cart) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Contact Box */
.contact-box {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0056b3;
    display: none; /* ซ่อนบนจอมือถือเล็กๆ */
}

@media (min-width: 992px) {
    .contact-box {
        display: flex;
    }
}

.contact-box i {
    font-size: 24px;
}

.contact-text span {
    display: block;
    font-size: 12px;
    color: #888;
}

.contact-text a {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* User Menu */
.user-menu {
    font-size: 13px;
    color: #555;
    display: none; /* ซ่อนบนมือถือ */
}

@media (min-width: 768px) {
    .user-menu {
        display: block;
    }
}

.user-menu i {
    margin-right: 5px;
}

/* Cart */
.header-cart .cart-contents {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-icon {
    position: relative;
    font-size: 22px;
    color: #333;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: #e02b20;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-amount {
    font-weight: 600;
    color: #333;
    display: none;
}

@media (min-width: 768px) {
    .cart-amount {
        display: block;
    }
}

/* ============================
   3. Navigation Bar
   ============================ */
.main-navigation {
    background-color: #0056b3; /* พื้นหลังเมนูสีน้ำเงิน */
    color: #fff;
}

.nav-menu {
    display: flex;
    flex-wrap: wrap;
}

.menu-item a {
    display: block;
    padding: 12px 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.menu-item:first-child a {
    border-left: 1px solid rgba(255,255,255,0.1);
}

.menu-item:hover a,
.menu-item.active a {
    background-color: #004494; /* สีเข้มขึ้นเมื่อ Hover */
}

/* Mobile Responsive Adjustments */
@media (max-width: 767px) {
    .main-header-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .site-branding {
        text-align: center;
        margin-bottom: 10px;
    }

    .header-actions {
        justify-content: center;
        margin-top: 10px;
    }

    .nav-menu {
        flex-direction: column; /* เมนูเรียงลงมาในมือถือ */
        display: none; /* ปกติต้องใช้ JS ทำปุ่ม Toggle เมนู */
    }
    
    /* ตัวอย่างแสดงเมนูแบบง่ายๆ */
    .main-navigation:hover .nav-menu {
        display: block;
    }
}


.menu-language-switcher-en-container > ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
  
.menu-language-switcher-en-container > ul li a img {
    margin-right: 5px;
}
  
.menu-language-switcher-en-container > ul li a {
    padding: 0 7px;
}


.related-product img{
    height: 500px;
    object-fit: cover;
    width: 100%;
}

.gallery-slider img{
    object-fit: cover;
    width: 100%;
    height: 100vh;
}

.gallery-slider .slick-track{
    display: flex !important;
}

.gallery-slider .slick-slide{
    height: inherit !important;
}

/* ปรับ Dropdown หมวดหมู่สินค้าที่ Gen จาก WordPress ให้สวยงาม */
.search-group select.search-select {
    border: none;
    background-color: #f0f0f0;
    padding: 0 10px;
    font-size: 14px;
    color: #555;
    border-right: 1px solid #ddd;
    outline: none;
    cursor: pointer;
    height: 44px; /* กำหนดความสูงให้เท่าปุ่ม */
    max-width: 150px;
}

/* ปรับแต่งเมนูที่ Gen จาก WordPress */
.nav-menu {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    list-style: none;
    position: relative; /* สำหรับ Sub-menu */
}

.nav-menu li a {
    display: block;
    padding: 12px 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.nav-menu li:first-child a {
    border-left: 1px solid rgba(255,255,255,0.1);
}

.nav-menu li:hover > a,
.nav-menu li.current-menu-item > a {
    background-color: #004494;
}

/* Sub-menu (ถ้ามีเมนูย่อย) */
.nav-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    min-width: 200px;
    z-index: 100;
}

.nav-menu .sub-menu li a {
    color: #333;
    border: none;
    border-bottom: 1px solid #eee;
}

.nav-menu .sub-menu li a:hover {
    background-color: #f5f5f5;
    color: #0056b3;
}

.nav-menu li:hover .sub-menu {
    display: block;
}

/* ============================
   3. New Navigation Bar Design
   ============================ */

/* แถบพื้นหลังสีเทา */
.bottom-nav-bar {
    background-color: #f5f5f5; /* สีเทาอ่อนตามรูป */
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    height: 50px; /* ความสูงของบาร์ */
    position: relative;
    z-index: 999; /* ให้อยู่เหนือเลเยอร์อื่น */
}

.nav-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.text-orange {
    color: #ff6600; /* สีส้มตาม Corporate Identity */
    margin-right: 5px;
}

/* --- ส่วนที่ 1: Category Menu (Left) --- */
.category-menu-wrapper {
    position: relative;
    width: 260px; /* ความกว้างของปุ่มและลิสต์ */
    height: 100%;
    border-right: 1px solid #e1e1e1;
    background-color: #f5f5f5;
}

.cat-menu-header {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 15px;
    cursor: pointer;
    font-weight: 600;
    color: #333;
    font-size: 15px;
    transition: 0.3s;
}

.cat-menu-header:hover {
    background-color: #fff;
    color: #ff6600;
}

.cat-menu-header .arrow-icon {
    margin-left: auto; /* ดันลูกศรไปขวาสุด */
    font-size: 12px;
    color: #999;
}

/* ตัว Dropdown List */
.category-dropdown {
    position: absolute;
    top: 50px; /* ต่อจากความสูงบาร์ */
    left: 0;
    width: 100%; /* กว้างเท่า wrapper (260px) */
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: none; /* ซ่อนไว้ก่อน */
    border: 1px solid #e1e1e1;
    border-top: none;
}

/* แสดง Dropdown เมื่อ Hover ที่ Wrapper */
.category-menu-wrapper:hover .category-dropdown {
    display: block;
}

/* สไตล์รายการเมนูข้างใน */
ul.vertical-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.vertical-menu > li {
    position: relative;
    border-bottom: 1px solid #eee;
}

ul.vertical-menu > li > a {
    display: block;
    padding: 12px 15px;
    color: #555;
    font-size: 14px;
    text-decoration: none;
    transition: 0.2s;
    display: flex;
    justify-content: space-between; /* เผื่อมี icon ลูกศรขวา */
}

ul.vertical-menu > li:hover > a {
    background-color: #ff6600;
    color: #fff;
}

/* Sub-Menu (Flyout ไปทางขวา - แบบ Mega Menu เบื้องต้น) */
ul.vertical-menu > li .sub-menu {
    display: none;
    position: absolute;
    left: 100%; /* เด้งออกไปทางขวา */
    top: 0;
    width: 600px; /* กว้างๆ แบบ Mega Menu ในรูป */
    min-height: 100%;
    background-color: #fff;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    border: 1px solid #e1e1e1;
    padding: 20px;
    z-index: 1000;
}

/* จัด Sub-menu เป็น Column (ถ้าต้องการ) */
ul.vertical-menu > li .sub-menu {
    column-count: 2; /* แบ่งเป็น 2 คอลัมน์แบบในรูป */
    column-gap: 20px;
}

ul.vertical-menu > li:hover .sub-menu {
    display: block;
}

ul.vertical-menu > li .sub-menu li {
    list-style: none;
    margin-bottom: 8px;
}

ul.vertical-menu > li .sub-menu li a {
    color: #666;
    font-size: 13px;
}

ul.vertical-menu > li .sub-menu li a:hover {
    color: #ff6600;
    text-decoration: underline;
}

/* --- ส่วนที่ 2: Secondary Menu (Center) --- */
.secondary-nav {
    flex-grow: 1; /* ขยายเต็มพื้นที่ที่เหลือ */
    padding-left: 20px;
}

ul.horizontal-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0; /* เราจะใช้ Border ขั้นแทน */
}

ul.horizontal-menu li a {
    color: #666;
    font-size: 14px;
    padding: 0 15px;
    border-right: 1px solid #ccc; /* เส้นคั่น | แบบในรูป */
    line-height: 1;
    display: block;
}

ul.horizontal-menu li:last-child a {
    border-right: none;
}

ul.horizontal-menu li a:hover {
    color: #ff6600;
}

/* --- ส่วนที่ 3: Contact Info (Right) --- */
.nav-contact-info {
    font-size: 14px;
    color: #555;
    font-weight: 500;
    white-space: nowrap; /* ห้ามขึ้นบรรทัดใหม่ */
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .bottom-nav-bar {
        height: auto;
        padding: 10px 0;
    }
    .nav-bar-inner {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    .category-menu-wrapper {
        width: 100%;
        border-right: none;
    }
    .category-dropdown {
        width: 100%;
        position: relative; /* บนมือถือให้เลื่อนลงมาปกติ */
        top: 0;
    }
    ul.horizontal-menu {
        flex-wrap: wrap;
    }
    ul.horizontal-menu li a {
        border-right: none;
        padding: 5px 10px 5px 0;
    }
}

.custom-logo-link {
  width: 100px;
  display: block;
}

.custom-logo-link img{
  max-width: 100%;
  height: auto;
}

/* จัดทรง Header ของหน้า Page */
.page-header {
    background-color: #f8f9fa;
    padding: 30px 0;
    margin-bottom: 40px;
    border-bottom: 1px solid #e1e1e1;
    text-align: center;
}
.page-title {
    font-size: 32px;
    color: #003366;
    margin: 0;
}
.page-content-editor {
    margin-bottom: 30px;
}

/* Container หลักของหน้าช่วยเหลือ */
.support-page-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    font-family: 'Sarabun', 'Kanit', sans-serif;
    color: #444;
}

.support-section {
    margin-bottom: 50px;
}

.section-title {
    font-size: 24px;
    color: #003366;
    margin-bottom: 25px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.section-title i {
    color: #ff6600;
    margin-right: 10px;
}

/* --- Section 1: Steps Grid --- */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.step-card {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease;
}

.step-card:hover {
    transform: translateY(-5px);
    border-color: #0056b3;
}

.step-number {
    width: 40px;
    height: 40px;
    background-color: #ff6600;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 15px;
}

.step-content {
    font-size: 16px;
    font-weight: 500;
}

/* --- Section 2: Shipping Box --- */
.shipping-highlight-box {
    display: flex;
    align-items: center;
    background-color: #f0f8ff; /* สีฟ้าน้ำทะเลอ่อนๆ */
    border-left: 5px solid #0056b3;
    padding: 30px;
    border-radius: 0 8px 8px 0;
}

.shipping-icon {
    font-size: 40px;
    color: #0056b3;
    margin-right: 25px;
}

.shipping-info h3 {
    margin: 0 0 10px 0;
    color: #003366;
}

.shipping-info p {
    margin: 0 0 5px 0;
    font-size: 16px;
}

/* --- Section 3: FAQ Accordion --- */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
}

.faq-item summary {
    padding: 18px 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    background-color: #fafafa;
    list-style: none; /* ซ่อนลูกศร default ของเบราว์เซอร์ */
    position: relative;
    transition: 0.3s;
}

.faq-item summary:hover {
    background-color: #f0f0f0;
    color: #0056b3;
}

/* ทำลูกศรชี้ลงเปิด-ปิด เองด้วย CSS */
.faq-item summary::after {
    content: '\002B'; /* เครื่องหมาย + */
    position: absolute;
    right: 20px;
    font-size: 20px;
    color: #ff6600;
}

.faq-item[open] summary::after {
    content: '\2212'; /* เครื่องหมาย - เมื่อเปิด */
}

/* ปิดลูกศร default สำหรับ Safari/Chrome เก่า */
.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-answer {
    padding: 20px;
    border-top: 1px solid #eee;
    color: #555;
    line-height: 1.6;
}

.faq-answer ul {
    margin-top: 10px;
    padding-left: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .shipping-highlight-box {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .shipping-icon {
        margin: 0 0 15px 0;
    }
}

/* Container หลัก */
.contact-page-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
    font-family: 'Sarabun', 'Kanit', sans-serif;
    color: #333;
}

.section-title {
    font-size: 24px;
    color: #003366;
    margin-bottom: 25px;
    text-align: center;
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
}

/* --- ส่วนที่ 1: ข้อมูลบริษัท --- */
.company-profile-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 50px;
    border-top: 5px solid #0056b3; /* แถบสีน้ำเงินด้านบน */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.company-name {
    font-size: 28px;
    color: #003366;
    margin-top: 0;
    margin-bottom: 15px;
}

.company-desc {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* --- ส่วนที่ 2: ช่องทางการติดต่อ (Grid & Cards) --- */
.contact-channels-section {
    margin-bottom: 50px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.contact-card {
    background-color: #fff;
    padding: 30px 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: #0056b3;
}

.contact-icon {
    font-size: 40px;
    color: #ff6600; /* สีส้มเป็นหลัก */
    margin-bottom: 15px;
}

/* สีเฉพาะสำหรับบางไอคอน (ปรับแต่งได้) */
.line-card .contact-icon { color: #00B900; } /* สีเขียว Line */
.fb-card .contact-icon { color: #1877F2; } /* สีน้ำเงิน Facebook */

.contact-card h4 {
    font-size: 18px;
    color: #003366;
    margin: 0 0 10px 0;
}

.contact-card p {
    font-size: 15px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.contact-card a {
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
}

.contact-card a:hover {
    color: #ff6600;
}

/* --- ส่วนที่ 3: แผนที่ --- */
.map-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
}

/* Responsive สำหรับมือถือ */
@media (max-width: 768px) {
    .company-profile-box {
        padding: 30px 20px;
    }
    .company-name {
        font-size: 24px;
    }
    .company-desc {
        font-size: 16px;
    }
    .contact-grid {
        grid-template-columns: 1fr; /* บนมือถือให้เรียง 1 แถว */
    }
}

/* =========================================
   WooCommerce Single Product Customization
   ========================================= */

/* =========================================
   แก้ไขปัญหา CSS ตีกันของ WooCommerce
   ========================================= */

/* ล้างค่า Float และความกว้างเดิมของรูปภาพ WooCommerce */
.woocommerce #content div.product div.images, 
.woocommerce div.product div.images, 
.woocommerce-page #content div.product div.images, 
.woocommerce-page div.product div.images {
    float: none !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* ล้างค่า Float และความกว้างเดิมของกล่องรายละเอียด WooCommerce */
.woocommerce #content div.product div.summary, 
.woocommerce div.product div.summary, 
.woocommerce-page #content div.product div.summary, 
.woocommerce-page div.product div.summary {
    float: none !important;
    width: 100% !important;
    clear: none !important;
}
/* 1. โครงสร้าง Grid ซ้าย-ขวา */
.product-main-grid {
    display: grid;
    grid-template-columns: 45% 52%;
    gap: 40px;
    margin-bottom: 50px;
}

/* 2. กรอบรูปภาพสินค้า (ด้านซ้าย) */
.product-gallery-wrapper {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.woocommerce-product-gallery__image img {
    border-radius: 6px;
}

/* 3. กล่องรายละเอียดสินค้า (ด้านขวา) */
.custom-summary-box {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-top: 5px solid #0056b3; /* แถบสีน้ำเงินบริษัท */
}

/* ชื่อสินค้า */
.custom-summary-box .product_title {
    font-size: 28px;
    color: #003366;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* ราคา */
.custom-summary-box .price {
    font-size: 24px !important;
    color: #ff6600 !important; /* สีส้ม */
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.custom-summary-box .price del {
    color: #999 !important;
    font-size: 16px;
    font-weight: 400;
    margin-right: 10px;
}

/* คำอธิบายย่อ (Short Description) */
.custom-summary-box .woocommerce-product-details__short-description {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* 4. ปุ่มหยิบใส่ตะกร้า (Add to Cart) & จำนวน */
.woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ddd;
}

.woocommerce div.product form.cart .quantity input.qty {
    width: 70px;
    height: 45px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    text-align: center;
}

.woocommerce div.product form.cart .button {
    background-color: #ff6600 !important; /* ปุ่มสีส้ม */
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 0 30px !important;
    height: 45px;
    border-radius: 4px !important;
    transition: 0.3s;
    border: none !important;
    display: flex;
    align-items: center;
}

.woocommerce div.product form.cart .button:hover {
    background-color: #e55c00 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255,102,0,0.3);
}

/* 5. หมวดหมู่สินค้า และ รหัส SKU (Meta) */
.custom-summary-box .product_meta {
    font-size: 14px;
    color: #666;
}

.custom-summary-box .product_meta a {
    color: #0056b3;
    text-decoration: none;
}

.custom-summary-box .product_meta a:hover {
    text-decoration: underline;
}

/* 6. ส่วนแท็บรายละเอียดด้านล่าง (Tabs) */
.product-bottom-area {
    margin-top: 40px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid #eee !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 20px 0 0 !important;
    padding: 10px 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: #555 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    padding: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #0056b3 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom: 3px solid #0056b3 !important;
}

/* Responsive มือถือ */
@media (max-width: 768px) {
    .product-main-grid {
        grid-template-columns: 1fr; /* ปรับเป็นแถวเดียวบนมือถือ */
    }
    .custom-summary-box {
        padding: 20px;
    }
}

.woocommerce-product-details__short-description{
    display: none;
}

/* =========================================
   ปรับแต่ง Product Gallery
   ========================================= */

/* ปิดการคลิกที่รูปใหญ่ ป้องกันการเด้งไปหน้าอื่นหรือเปิด Popup */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image a {
    pointer-events: none; /* ปิดการรับคำสั่งคลิก */
    cursor: default; /* เปลี่ยนเคอร์เซอร์เป็นลูกศรปกติ */
}

/* จัดเรียงรูปเล็ก (Thumbnails) ด้านล่างให้ดูสวยงาม */
.woocommerce div.product div.images .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    padding: 0;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    width: calc(25% - 7.5px); /* ให้เรียง 4 รูปต่อแถว */
    list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.2s;
    opacity: 0.6; /* ทำให้รูปที่ไม่ได้เลือกดูจางๆ */
}

/* รูปร่างที่ถูกเลือกอยู่ หรือตอนเอาเมาส์ชี้ ให้สีเข้มขึ้นและมีกรอบ */
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
    opacity: 1;
    border-color: #ff6600; /* กรอบสีส้ม */
}

/* =========================================
   ตกแต่งส่วน Related Products (สินค้าที่เกี่ยวข้อง)
   ========================================= */
.related.products {
    margin-top: 60px;
    border-top: 2px solid #eee;
    padding-top: 40px;
    clear: both;
}

/* หัวข้อ "สินค้าที่เกี่ยวข้อง" */
.related.products h2 {
    font-size: 24px;
    color: #003366; /* สีน้ำเงิน */
    margin-bottom: 30px;
    border-left: 5px solid #ff6600; /* แถบสีส้มด้านซ้าย */
    padding-left: 15px;
    line-height: 1;
}

/* จัด Layout เป็น Grid 4 คอลัมน์ */
.woocommerce .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ตัวการ์ดสินค้าแต่ละชิ้น */
.woocommerce .related.products ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* เอฟเฟกต์เมื่อเอาเมาส์ชี้ (Hover) */
.woocommerce .related.products ul.products li.product:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: #0056b3;
    transform: translateY(-5px); /* ลอยขึ้นนิดนึง */
}

/* รูปสินค้าในการ์ด */
.woocommerce .related.products ul.products li.product img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 4px;
}

/* ชื่อสินค้า (ตัดคำอัตโนมัติถ้าเกิน 2 บรรทัด) */
.woocommerce .related.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1; /* ดันปุ่มลงไปล่างสุดเสมอ */
}

/* ราคา */
.woocommerce .related.products ul.products li.product .price {
    color: #ff6600;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
}

/* ปุ่ม หยิบใส่ตะกร้า / ดูรายละเอียด */
.woocommerce .related.products ul.products li.product .button {
    display: block;
    width: 100%;
    background-color: #fff;
    color: #0056b3;
    border: 1px solid #0056b3;
    padding: 10px 0;
    border-radius: 4px;
    font-weight: 600;
    transition: 0.3s;
    text-align: center;
    margin-top: auto;
}

.woocommerce .related.products ul.products li.product .button:hover {
    background-color: #0056b3;
    color: #fff;
}

/* =========================================
   Responsive (รองรับหน้าจอมือถือและแท็บเล็ต)
   ========================================= */
@media (max-width: 991px) {
    .woocommerce .related.products ul.products {
        grid-template-columns: repeat(3, 1fr) !important; /* ไอแพด 3 รูป */
    }
}

@media (max-width: 768px) {
    .woocommerce .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important; /* มือถือ 2 รูปต่อแถว */
        gap: 10px !important;
    }
    
    .woocommerce .related.products ul.products li.product {
        padding: 10px;
    }
    
    .woocommerce .related.products ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px;
    }
    
    .woocommerce .related.products ul.products li.product .price {
        font-size: 15px;
    }
    
    .woocommerce .related.products ul.products li.product .button {
        padding: 8px 0;
        font-size: 13px;
    }
}

/* =========================================
   ตกแต่งการ์ดสินค้าทั้งหมด (หน้า Shop, หมวดหมู่, Related Products)
   ========================================= */

/* 1. จัด Layout เป็น Grid 4 คอลัมน์ สำหรับทุกหน้าแสดงสินค้า */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. ตัวการ์ดสินค้าแต่ละชิ้น */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    clear: none !important; /* ล้างค่าเดิมที่ทำให้แถวตก */
}

/* เอฟเฟกต์เมื่อเอาเมาส์ชี้การ์ด (Hover) */
.woocommerce ul.products li.product:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: #0056b3;
    transform: translateY(-5px); /* ลอยขึ้นนิดนึง */
}

/* 3. รูปสินค้า */
.woocommerce ul.products li.product img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 4px;
}

/* 4. ชื่อสินค้า (ตัดคำอัตโนมัติถ้าเกิน 2 บรรทัด ...) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.5 !important;
    max-height: 3em !important;
    font-size: 14px !important;
    color: #333 !important;
    margin-bottom: 15px !important;
    white-space: normal !important;
    padding: 0 !important;
}

/* 5. ราคา */
.woocommerce ul.products li.product .price {
    color: #ff6600 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* 6. ปุ่ม หยิบใส่ตะกร้า / ดูรายละเอียด (ดันไปอยู่ล่างสุดเสมอ) */
.woocommerce ul.products li.product .button {
    display: block !important;
    width: 100% !important;
    background-color: #fff !important;
    color: #0056b3 !important;
    border: 1px solid #0056b3 !important;
    padding: 10px 0 !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    transition: 0.3s !important;
    text-align: center !important;
    margin-top: auto !important; /* ดันปุ่มลงล่างสุด */
}

.woocommerce ul.products li.product .button:hover {
    background-color: #0056b3 !important;
    color: #fff !important;
}

/* =========================================
   แก้ไข Related Products ให้เรียง 4 อัน และตัดคำ (...)
   ========================================= */

/* 1. บังคับ Grid 4 คอลัมน์ และล้างค่าระยะห่างเดิม */
.woocommerce .related.products ul.products,
.woocommerce-page .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. ล้างค่า Float และ Margin ของ WooCommerce ที่ทำให้แถวตก */
.woocommerce .related.products ul.products li.product,
.woocommerce-page .related.products ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important; /* สำคัญมาก: ป้องกันคลาส .first, .last ดันแถวตก */
    display: flex !important;
    flex-direction: column !important;
}

/* 3. บังคับชื่อสินค้าให้แสดงแค่ 2 บรรทัด ถ้าเกินให้เป็น ... */
.woocommerce .related.products ul.products li.product .woocommerce-loop-product__title,
.woocommerce .related.products ul.products li.product h2.woocommerce-loop-product__title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* กำหนดจำนวนบรรทัดที่ต้องการ */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.5 !important;
    max-height: 3em !important; /* ป้องกันกล่องสูงเกิน (1.5 x 2 บรรทัด = 3em) */
    font-size: 14px !important;
    margin-bottom: 15px !important;
    white-space: normal !important;
    padding: 0 !important;
}

/* (แถม) ดันปุ่มตะกร้าให้ไปอยู่ล่างสุดของการ์ดเสมอ กรณีชื่อสั้นยาวไม่เท่ากัน */
.woocommerce .related.products ul.products li.product .button {
    margin-top: auto !important;
}

.woocommerce ul.products::before{
    display: none !important;
}

/* =========================================
   ตกแต่ง Breadcrumb (แถบนำทาง)
   ========================================= */

/* แถบพื้นหลังแนวยาว */
.custom-breadcrumb-wrapper {
    background-color: #f8f9fa; /* สีเทาอ่อน */
    border-bottom: 1px solid #e1e1e1;
    padding: 12px 0;
    margin-bottom: 40px; /* ระยะห่างก่อนเริ่มเนื้อหาสินค้า */
    width: 100%;
}

/* จัดรูปแบบตัวอักษรและการเรียงตัว */
.custom-breadcrumb-wrapper .woocommerce-breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    color: #333; /* สีของหน้าปัจจุบัน (หน้าสุดท้าย) */
    font-weight: 500;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* เผื่อหน้าจอมือถือเล็ก จะได้ปัดตกบรรทัดให้อัตโนมัติ */
}

/* ลิงก์ที่กดได้ (หน้าก่อนหน้า) */
.custom-breadcrumb-wrapper .woocommerce-breadcrumb a {
    color: #0056b3; /* สีน้ำเงิน */
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px; /* ระยะห่างระหว่างไอคอนบ้านกับข้อความ */
    font-weight: 400;
}

/* เมื่อเอาเมาส์ชี้ลิงก์ */
.custom-breadcrumb-wrapper .woocommerce-breadcrumb a:hover {
    color: #ff6600; /* สีส้ม */
}

/* ไอคอนลูกศรคั่น */
.breadcrumb-separator {
    font-size: 11px;
    color: #aaa;
    margin: 0 12px;
}

/* Responsive บนมือถือ */
@media (max-width: 768px) {
    .custom-breadcrumb-wrapper {
        padding: 10px 0;
        margin-bottom: 20px;
    }
    .custom-breadcrumb-wrapper .woocommerce-breadcrumb {
        font-size: 13px;
    }
    .breadcrumb-separator {
        margin: 0 8px;
    }
}

/* =========================================
   ตกแต่งกล่องแจ้งเตือน (WooCommerce Notices)
   ========================================= */

/* คุมความกว้างและการเว้นระยะ */
.woocommerce-notices-wrapper {
    width: 100%;
    margin-bottom: 25px;
}

/* ล้างค่าดีไซน์เก่าของ WooCommerce */
.woocommerce-message, 
.woocommerce-error, 
.woocommerce-info {
    background-color: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important;
    padding: 18px 20px 18px 60px !important; /* เว้นที่ด้านซ้ายให้ไอคอน */
    margin: 0 0 20px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #444 !important;
    position: relative;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* ปิดไอคอนเดิมที่ดูเชย */
.woocommerce-message::before, 
.woocommerce-error::before, 
.woocommerce-info::before {
    display: none !important;
}

/* --- สีและไอคอนตามประเภทแจ้งเตือน (ใช้ FontAwesome) --- */

/* 1. สำเร็จ (สีเขียว) - เช่น เพิ่มลงตะกร้าแล้ว */
.woocommerce-message {
    border-left: 5px solid #28a745 !important;
}
.woocommerce-message::after {
    content: '\f058'; /* ไอคอนติ๊กถูก */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #28a745;
    font-size: 24px;
}

/* 2. ผิดพลาด (สีแดง) - เช่น ลืมเลือกสี/ไซส์ */
.woocommerce-error {
    border-left: 5px solid #dc3545 !important;
    list-style: none !important; /* บางที error มาเป็นรายการ */
}
.woocommerce-error li { margin: 0 !important; }
.woocommerce-error::after {
    content: '\f057'; /* ไอคอนกากบาท */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #dc3545;
    font-size: 24px;
}

/* 3. แจ้งข้อมูล (สีน้ำเงิน) */
.woocommerce-info {
    border-left: 5px solid #0056b3 !important;
}
.woocommerce-info::after {
    content: '\f05a'; /* ไอคอนตัว i */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #0056b3;
    font-size: 24px;
}

/* --- ตกแต่งปุ่มในกล่องแจ้งเตือน (เช่น ปุ่ม "ดูตะกร้าสินค้า") --- */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border: 1px solid #ddd !important;
    margin-left: auto !important; /* ดันปุ่มไปทางขวาสุด */
    transition: all 0.2s ease !important;
}

.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
    background-color: #0056b3 !important; /* เปลี่ยนเป็นสีน้ำเงินเมื่อเอาเมาส์ชี้ */
    color: #fff !important;
    border-color: #0056b3 !important;
}

/* บนมือถือให้ปุ่มตกลงมาอยู่ด้านล่างแทนถ้าข้อความยาว */
@media (max-width: 576px) {
    .woocommerce-message, .woocommerce-error, .woocommerce-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .woocommerce-message::after, .woocommerce-error::after, .woocommerce-info::after {
        top: 30px; /* ขยับไอคอนบนมือถือ */
    }
    .woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button {
        margin-left: 0 !important;
        margin-top: 15px !important;
        width: 100% !important;
        text-align: center !important;
    }
}


/* =========================================
   หน้า Cart ว่าง (Empty Cart) & สินค้าแนะนำด้านล่าง
   ========================================= */

/* 1. ปรับแต่งกล่องหน้าตะกร้าว่างด้านบน */
.wp-block-woocommerce-empty-cart-block {
    background: #fff;
    padding: 50px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-top: 5px solid #0056b3; /* แถบสีน้ำเงิน */
    margin-bottom: 50px;
}

.wc-block-cart__empty-cart__title {
    color: #003366 !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* 2. ปรับแต่งส่วนสินค้าใหม่ (New in Store) ให้เหมือน Related Products */
.wc-block-grid.has-4-columns ul.wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* การ์ดสินค้าแต่ละชิ้น */
.wc-block-grid__product {
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    padding: 15px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    margin: 0 !important;
    max-width: 100% !important
}

.wc-block-grid__product:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    border-color: #0056b3 !important;
    transform: translateY(-5px) !important;
}

/* รูปภาพสินค้า */
.wc-block-grid__product-image {
    margin-bottom: 15px !important;
}
.wc-block-grid__product-image img {
    border-radius: 4px !important;
    width: 100% !important;
    height: auto !important;
}

/* ชื่อสินค้า (ตัดคำที่ 2 บรรทัด พร้อม ...) */
.wc-block-grid__product-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.5 !important;
    margin: 0 0 10px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 3em !important;
}

/* ราคาสินค้า */
.wc-block-grid__product-price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ff6600 !important; /* สีส้ม */
    margin-bottom: 15px !important;
}

/* ปุ่ม Add to Cart (ปุ่มขอบสีน้ำเงิน) */
.wc-block-grid__product-add-to-cart .wp-block-button__link {
    background-color: transparent !important;
    color: #0056b3 !important;
    border: 1px solid #0056b3 !important;
    padding: 10px 15px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: block !important;
    width: 100% !important;
    transition: 0.3s !important;
    text-decoration: none !important;
    margin-top: auto !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
    background-color: #0056b3 !important;
    color: #fff !important;
}

/* 3. จัดการเส้นคั่น (Separator) */
hr.wp-block-separator {
    border: none;
    border-top: 1px solid #eee;
    margin: 40px 0;
}

/* Responsive */
@media (max-width: 991px) {
    .wc-block-grid.has-4-columns ul.wc-block-grid__products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =========================================
   ตกแต่งหน้า Checkout (WooCommerce Blocks)
   ========================================= */

/* 1. จัดเลย์เอาต์หลักเป็น 2 คอลัมน์ */
.wp-block-woocommerce-checkout {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    margin-top: 30px !important;
}

/* ฝั่งซ้าย: ข้อมูลที่อยู่ผู้รับ (60%) */
.wc-block-checkout__main {
    flex: 1 1 60% !important;
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* ฝั่งขวา: สรุปยอดรวม (40%) */
.wc-block-checkout__sidebar {
    flex: 1 1 calc(40% - 40px) !important;
    background: #f8f9fa; /* พื้นหลังเทาอ่อน */
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #e1e1e1;
    border-top: 5px solid #0056b3 !important; /* แถบน้ำเงินบริษัท */
    position: sticky;
    top: 20px;
}

/* 2. ตกแต่งหัวข้อส่วนต่างๆ */
.wc-block-components-title, 
.wc-block-checkout__totals-title {
    font-size: 20px !important;
    color: #003366 !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

/* 3. ตกแต่งฟิลด์กรอกข้อมูล (Inputs) */
.wc-block-components-text-input input, 
.wc-block-components-combobox input {
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    padding: 12px !important;
    transition: 0.3s !important;
}

.wc-block-components-text-input input:focus {
    border-color: #0056b3 !important;
    box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.1) !important;
}

/* 4. ส่วนชำระเงิน (Payment Methods) */
.wc-block-checkout__payment-method {
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    padding: 10px !important;
}

.wc-block-checkout__payment-method--selected {
    border-color: #0056b3 !important;
    background: #f0f7ff !important;
}

/* 5. ราคาและยอดรวมสุทธิ */
.wc-block-components-totals-footer-item-tax-value {
    color: #ff6600 !important; /* สีส้ม */
    font-size: 26px !important;
    font-weight: 800 !important;
}

/* 6. ปุ่ม "สั่งซื้อสินค้า" (Place Order) */
.wc-block-checkout__add-note .wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-checkout__submit-button {
    background-color: #ff6600 !important;
    color: #fff !important;
    padding: 20px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    width: 100% !important;
    transition: 0.3s !important;
    border: none !important;
}

.wc-block-checkout__submit-button:hover {
    background-color: #e55c00 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,102,0,0.4) !important;
}

/* =========================================
   หน้า My Account (บัญชีของฉัน)
   ========================================= */

/* เลย์เอาต์แบ่ง 2 ฝั่ง */
.woocommerce-account .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

/* --- ฝั่งซ้าย: เมนูนำทาง (25%) --- */
.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 25%;
    max-width: 25%;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid #f0f0f0;
}

.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 15px 20px;
    color: #444;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: 0.3s;
}

/* สไตล์เมื่อเอาเมาส์ชี้ หรือเมนูที่เลือกอยู่ */
.woocommerce-MyAccount-navigation ul li:hover a,
.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #f0f7ff;
    color: #0056b3;
    padding-left: 25px; /* เลื่อนข้อความนิดนึงให้ดูมีลูกเล่น */
    border-left: 4px solid #ff6600; /* แถบสีส้มด้านซ้าย */
}

/* --- ฝั่งขวา: เนื้อหาข้อมูล (75%) --- */
.woocommerce-account .woocommerce-MyAccount-content {
    flex: 0 0 calc(75% - 30px);
    max-width: calc(75% - 30px);
    background: #fff;
    padding: 30px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    min-height: 400px;
}

/* ข้อความต้อนรับใน Dashboard */
.woocommerce-MyAccount-content p {
    font-size: 16px;
    line-height: 1.8;
}

.woocommerce-MyAccount-content strong {
    color: #0056b3;
}

/* ปุ่มต่างๆ ในหน้าประวัติการสั่งซื้อ */
.woocommerce-MyAccount-content .woocommerce-button {
    background-color: #0056b3 !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    transition: 0.3s;
}

.woocommerce-MyAccount-content .woocommerce-button:hover {
    background-color: #003366 !important;
}

/* ลบสไตล์เก่าของ Woo ออกให้หมดสำหรับหน้านี้ */
.woocommerce-Address-title, .u-column1, .u-column2, .col2-set.addresses {
    float: none !important;
    width: 100% !important;
}

/* สร้าง Grid ใหม่ */
.custom-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 20px;
}

.address-box {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    background: #fff;
}

.address-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f5f5f5;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.address-header h3 {
    margin: 0 !important;
    font-size: 18px !important;
    color: #003366 !important;
}

.edit-btn {
    font-size: 13px !important;
    color: #ff6600 !important;
    text-decoration: none !important;
    font-weight: 600;
}

.edit-btn:hover {
    text-decoration: underline !important;
}

.address-content address {
    font-style: normal;
    color: #666;
    line-height: 1.6;
}

.address-instruction {
    background: #f8f9fa;
    padding: 15px;
    border-left: 4px solid #0056b3;
    color: #555;
    font-size: 14px;
}

/* =========================================
   หน้าแรกสไตล์ Officework
   ========================================= */

/* ระยะห่างของแต่ละ Section */
.home-section {
    margin-top: 50px;
    margin-bottom: 50px;
}

/* หัวข้อประจำส่วน (Section Title) */
.section-title {
    font-size: 24px;
    color: #003366; /* น้ำเงินบริษัท */
    font-weight: 700;
    margin-bottom: 30px;
    border-left: 6px solid #ff6600; /* แถบส้มอันเป็นเอกลักษณ์ */
    padding-left: 15px;
    line-height: 1.2;
}

/* ตกแต่งส่วน Category (ถ้าใช้ Shortcode) */
.woocommerce ul.products.columns-6 {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 15px !important;
}

.woocommerce ul.product-categories li.category {
    text-align: center;
    background: #fff;
    padding: 20px 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    transition: 0.3s;
}

.woocommerce ul.product-categories li.category:hover {
    border-color: #0056b3;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.woocommerce ul.product-categories li.category img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain;
    margin-bottom: 10px;
}

.woocommerce ul.product-categories li.category h2 {
    font-size: 14px !important;
    color: #333 !important;
    font-weight: 600;
}

/* ลบตัวเลขจำนวนสินค้าในวงเล็บ (count) ออกให้ดูคลีน */
.woocommerce ul.product-categories li.category mark.count {
    display: none;
}

/* =========================================
   Footer สไตล์ Officework
   ========================================= */
.site-footer {
    background-color: #003366; /* สีน้ำเงินเข้ม */
    color: #ffffff;
    padding: 60px 0 0 0;
    font-size: 15px;
}

.footer-widgets {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr; /* แบ่ง 4 คอลัมน์ */
    gap: 40px;
    padding-bottom: 40px;
}

.footer-col h4 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

/* ขีดส้มใต้หัวข้อ */
.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: #ff6600;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: 0.3s;
}

.footer-col ul li a:hover {
    color: #ff6600;
    padding-left: 5px;
}

.footer-col p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 15px;
}

.footer-col i {
    margin-right: 10px;
    color: #ff6600; /* ไอคอนสีส้ม */
}

/* โลโก้ในฟุตเตอร์ */
.footer-logo {
    max-width: 180px;
    margin-bottom: 20px;
    filter: brightness(0) invert(1); /* ถ้าโลโก้สีเข้ม ให้เปลี่ยนเป็นสีขาว */
}

/* แถบลิขสิทธิ์ด้านล่าง */
.footer-bottom {
    background-color: #002244; /* น้ำเงินเข้มขึ้นอีกนิด */
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bottom-flex p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.payment-methods {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    gap: 15px;
}

/* Responsive มือถือ */
@media (max-width: 991px) {
    .footer-widgets {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-widgets {
        grid-template-columns: 1fr;
    }
    .bottom-flex {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* มือถือเรียงเป็นแถวเดียว */
@media (max-width: 600px) {
    .custom-address-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Responsive มือถือ --- */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        flex-direction: column;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Responsive มือถือ */
@media (max-width: 991px) {
    .wp-block-woocommerce-checkout {
        flex-direction: column !important;
    }
    .wc-block-checkout__main, 
    .wc-block-checkout__sidebar {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}


/* =========================================
   ตกแต่งหน้า WooCommerce Block Cart
   สไตล์ Officework (พร้อมเปลี่ยนคำเป็นภาษาไทย)
   ========================================= */

/* --- 1. จัดเลย์เอาต์หลัก ซ้าย-ขวา --- */
.wp-block-woocommerce-cart.is-large {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}

.wc-block-cart__main {
    flex: 1 1 60%; /* ฝั่งซ้าย 60% */
}

.wc-block-cart__sidebar {
    flex: 1 1 calc(40% - 40px); /* ฝั่งขวา 40% */
    background: #f9f9f9;
    padding: 30px;
    border: 1px solid #e1e1e1;
    border-top: 4px solid #0056b3; /* แถบสีน้ำเงินด้านบนแบบบริษัท */
    border-radius: 8px;
}

/* --- 2. เปลี่ยนคำในหัวตาราง (อังกฤษ -> ไทย) --- */
.wc-block-cart-items__header th {
    border-bottom: 2px solid #ddd !important;
    padding-bottom: 15px;
    color: #555 !important;
}

/* Product -> สินค้า */
th.wc-block-cart-items__header-image span { font-size: 0; visibility: hidden; }
th.wc-block-cart-items__header-image span::after { 
    content: "รูปสินค้า"; font-size: 14px; visibility: visible; 
}

/* Details -> รายละเอียดสินค้า */
th.wc-block-cart-items__header-product span { font-size: 0; visibility: hidden; }
th.wc-block-cart-items__header-product span::after { 
    content: "รายการสินค้า"; font-size: 14px; visibility: visible; 
}

/* Total -> ราคารวม */
th.wc-block-cart-items__header-total span { font-size: 0; visibility: hidden; }
th.wc-block-cart-items__header-total span::after { 
    content: "ราคารวม"; font-size: 14px; visibility: visible; 
}

/* --- 3. ตกแต่งรายการสินค้าในตะกร้า --- */
.wc-block-cart-items__row {
    border-bottom: 1px solid #eee !important;
}
.wc-block-cart-items__row td {
    padding: 20px 0;
}

/* รูปสินค้า */
.wc-block-cart-item__image img {
    border-radius: 6px;
    border: 1px solid #eee;
    max-width: 80px;
}

/* ชื่อสินค้า */
.wc-block-components-product-name {
    color: #333 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.wc-block-components-product-name:hover {
    color: #0056b3 !important;
}

/* ซ่อนคำอธิบายยาวๆ ใต้ชื่อสินค้า (ถ้ามี) ให้ดูคลีนขึ้น */
.wc-block-components-product-metadata__description {
    display: none;
}

/* ราคาต่อชิ้น */
.wc-block-components-product-price__value {
    color: #ff6600 !important;
    font-weight: 600;
}

/* ปุ่มลบสินค้า (Remove item) -> นำออก */
.wc-block-cart-item__remove-link {
    font-size: 0 !important;
    color: #999 !important;
    text-decoration: none !important;
    margin-top: 10px;
}
.wc-block-cart-item__remove-link::after {
    content: "\f2ed  ลบสินค้า"; /* ไอคอนถังขยะ FontAwesome */
    font-family: 'Font Awesome 6 Free', 'Sarabun', sans-serif;
    font-weight: 900;
    font-size: 13px;
    visibility: visible;
}
.wc-block-cart-item__remove-link:hover::after {
    color: #dc3545;
}

/* --- 4. ตกแต่งปุ่มเพิ่ม/ลด จำนวน (+ / -) --- */
.wc-block-components-quantity-selector {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.wc-block-components-quantity-selector__input {
    font-weight: 600;
    color: #333;
}
.wc-block-components-quantity-selector__button {
    color: #666;
    background: #f5f5f5;
}

/* --- 5. เปลี่ยนคำฝั่งขวา: กล่องสรุปยอด (Cart Totals) --- */

/* Cart totals -> สรุปคำสั่งซื้อ */
.wc-block-cart__totals-title { font-size: 0 !important; margin-bottom: 20px !important;}
.wc-block-cart__totals-title::after { 
    content: "สรุปคำสั่งซื้อ"; 
    font-size: 20px; 
    color: #003366; 
    font-weight: 700;
    visibility: visible; 
}

/* Add coupons -> ใส่โค้ดส่วนลด */
.wc-block-components-panel__button { font-size: 0 !important; color: #0056b3 !important; }
.wc-block-components-panel__button::after { 
    content: "ใส่โค้ดส่วนลด"; font-size: 16px; visibility: visible; font-weight: 500;
}
.wc-block-components-panel__button-icon { display: none; } /* ซ่อนไอคอนเดิม */

/* Estimated total -> ยอดรวมสุทธิ */
.wc-block-components-totals-footer-item {
    border-top: 2px solid #ddd;
    padding-top: 20px;
    margin-top: 15px;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 0; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label::after { 
    content: "ยอดรวมสุทธิ"; font-size: 18px; font-weight: bold; color: #333; visibility: visible; 
}

/* ยอดเงินรวม (ตัวใหญ่สีส้ม) */
.wc-block-components-totals-footer-item-tax-value {
    color: #ff6600 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
}

/* --- 6. ปุ่มดำเนินการสั่งซื้อ (Proceed to Checkout) --- */
.wc-block-cart__submit-button {
    background-color: #ff6600 !important;
    border-radius: 6px !important;
    padding: 15px 0 !important;
    transition: 0.3s !important;
    margin-top: 20px !important;
    border: none !important;
}

.wc-block-cart__submit-button:hover {
    background-color: #e55c00 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255,102,0,0.3);
}

.wc-block-components-button__text { font-size: 0 !important; }
.wc-block-components-button__text::after { 
    content: "ดำเนินการชำระเงิน"; 
    font-size: 18px; 
    color: #fff;
    font-weight: bold;
    visibility: visible; 
}

/* 1. ปรับแต่งรูปภาพ (Thumbnail) ใน Slick Slide ให้มีสัดส่วนและจัดวางเหมือนรูปสินค้า */
.category-item.slick-slide img {
    width: 100% !important;
    height: 200px !important; /* ปรับตัวเลขความสูงให้เท่ากับรูปสินค้าจริงของคุณ */
    object-fit: cover !important; /* ช่วยให้รูปไม่เบี้ยว ไม่บีบ */
    border-radius: 4px; /* เพิ่มความโค้งมนให้เท่ากับรูปสินค้าด้านล่าง (ถ้ามี) */
    transition: all 0.3s ease;
}

/* 2. ปรับแต่งตัวกล่องข้อความ/หมวดหมู่ (ถ้าต้องการให้มีกรอบหรือเงาเหมือนกล่องสินค้า) */
.category-item.slick-slide {
    background: #ffffff;
    border: 1px solid #f0f0f0; /* เส้นขอบจางๆ เหมือนกล่องสินค้า */
    border-radius: 8px; /* ความโค้งของกล่อง */
    padding: 15px; /* ระยะห่างจากขอบกล่องด้านใน */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* เงาจางๆ ด้านล่างกล่อง */
    margin: 0 10px; /* ระยะห่างระหว่างสไลด์แต่ละตัว */
    text-align: center;
}

/* 3. ปรับแต่งส่วนของหัวข้อชื่อหมวดหมู่ให้เข้ากัน */
.category-item.slick-slide h3 {
    font-size: 16px;
    margin-top: 10px;
    color: #333333;
    font-weight: 600;
}

/* --- 7. Responsive มือถือ --- */

@media (max-width: 991px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important; /* ไอแพด 3 รูป */
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important; /* มือถือ 2 รูปต่อแถว */
        gap: 10px !important;
    }
    
    .woocommerce ul.products li.product {
        padding: 10px;
    }
    
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important;
    }
    
    .woocommerce ul.products li.product .price {
        font-size: 15px !important;
    }
    
    .woocommerce ul.products li.product .button {
        padding: 8px 0 !important;
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {
    .wp-block-woocommerce-cart.is-large {
        flex-direction: column;
        gap: 20px;
    }
    .wc-block-cart__sidebar {
        width: 100%;
    }
}

/* ==========================================
   1. ปรับปรุงหน้า WooCommerce Order Received
   ========================================== */

/* จัดระยะขอบหน้าโดยรวมให้กระชับและสมดุล */
.woocommerce-order {
    max-width: 1000px;
    margin: 0 auto;
    font-family: 'Prompt', 'Kanit', sans-serif;
}

/* สไตล์กล่องข้อความขอบคุณ + สรุปคำสั่งซื้อด้านบน */
.woocommerce-notice--success {
    background-color: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #166534 !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
    font-weight: 500;
}

.woocommerce-order-overview {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px !important;
    margin-bottom: 35px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.woocommerce-order-overview li {
    border-right: 1px solid #e5e7eb !important;
    padding-right: 20px !important;
    margin-right: 0 !important;
}

.woocommerce-order-overview li:last-child {
    border-right: none !important;
}

/* ==========================================
   2. หัวข้อ (Headings)
   ========================================== */

.woocommerce-order-details__title,
.woocommerce-column__title {
    font-size: 1.5rem !important; /* ปรับขนาดจากที่ใหญ่เกินไปให้อยู่ในระดับพอดี */
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin-bottom: 16px !important;
}

/* ==========================================
   3. ตาราง Order Details
   ========================================== */

.woocommerce-table--order-details {
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    overflow: hidden;
    margin-bottom: 40px !important;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
    padding: 14px 18px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.woocommerce-table--order-details thead th {
    background-color: #f9fafb !important;
    color: #374151 !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

/* ==========================================
   4. จัดレイアウトที่อยู่ (Billing & Shipping Address)
   ========================================== */

/* แก้ปัญหา Billing address ถูกบีบแคบ */
.woocommerce-customer-details {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 24px !important;
}

.woocommerce-column--billing-address,
.woocommerce-column--shipping-address {
    width: 100% !important;
    float: none !important;
}

.woocommerce-customer-details address {
    background: #ffffff;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 20px !important;
    line-height: 1.6 !important;
    color: #4b5563 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* ==========================================
   แก้ไขปัญหา Address โดนบีบแคบ (Forced Override)
   ========================================== */

/* 1. เคลียร์ Grid/Flex ของเดิม และบังคับให้กล่องอยู่คู่กัน */
.woocommerce-customer-details {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 30px !important;
}

/* 2. บังคับย่อขนาดหัวข้อที่ใหญ่เกินไป */
.woocommerce-column__title,
.woocommerce-order-details__title {
    font-size: 20px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    word-break: normal !important;
}

/* 3. ปลดล็อกความกว้างของคอลัมน์ซ้าย-ขวา */
.woocommerce-column--billing-address,
.woocommerce-column--shipping-address,
.woocommerce-columns--2 .col-1,
.woocommerce-columns--2 .col-2 {
    flex: 1 1 300px !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

/* 4. ปลดล็อกตัวกล่อง address ไม่ให้โดนบีบเป็นแท่งแคบ */
.woocommerce-customer-details address {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    padding: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04) !important;
    font-style: normal !important;
    line-height: 1.7 !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

/* ==========================================
   เว้นระยะห่างกล่อง Shipping address
   ========================================== */

/* 1. เพิ่มระยะห่างระหว่างกล่อง Billing และ Shipping */
.woocommerce-column--shipping-address,
.woocommerce-customer-details .col-2 {
    margin-top: 32px !important;
}

/* 2. เพิ่มระยะห่างใต้หัวข้อ Shipping address ก่อนเข้าตัวกล่อง */
.woocommerce-column--shipping-address .woocommerce-column__title {
    margin-top: 24px !important;
    margin-bottom: 16px !important;
}