/* =======================================
   1. Global Variables & Base Styles
======================================= */
/* นำเข้าฟอนต์จาก Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=Prompt:wght@300;400;500;600;700&display=swap');

/* ตั้งค่าฟอนต์ข้อความทั่วไป */
body, p, span, a, input, button, select, textarea {
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ตั้งค่าฟอนต์หัวข้อและส่วนที่ต้องการเน้น */
h1, h2, h3, h4, h5, h6, .page-title, .price, .fw-bold, .brand-name, .cart-badge {
    font-family: 'Kanit', sans-serif !important;
}

/* ปรับความคมชัดของฟอนต์ */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --primary-dark: #111e2d;
    --primary-blue: #1c355e;
    --accent-yellow: #f5b026;
    --text-gray: #666666;
    --bg-light: #f5f5f5;
    --success-green: #28a745;
    --danger-red: #d9534f;
}

body { 
    font-family: 'Kanit', sans-serif; 
    background-color: var(--bg-light); 
    color: #333; 
    margin: 0; 
    padding: 0; 
}

/* =======================================
   2. Header & Navigation
======================================= */
/* Top Bar */
.top-bar { 
    background-color: var(--primary-dark); 
    color: #aaa; 
    font-size: 13px; 
    padding: 8px 0; 
}
.top-bar a { color: #aaa; text-decoration: none; margin-left: 15px; }
.top-bar a:hover { color: var(--accent-yellow); }

/* Middle Header */
.middle-header { 
    background-color: white; 
    padding: 25px 0; 
    border-bottom: 1px solid #eee; 
    text-align: center; /* เผื่อกรณีรวมจากหลายโค้ด */
}
.brand-name { 
    color: var(--primary-dark); 
    font-weight: 700; 
    font-size: 32px; 
    text-decoration: none; 
    text-transform: uppercase; 
}
.brand-name span { color: var(--accent-yellow); }

/* Search Form */
.search-form .form-control { border: 2px solid var(--primary-blue); border-radius: 4px 0 0 4px; }
.search-form .btn { background-color: var(--primary-blue); color: white; border: 2px solid var(--primary-blue); border-radius: 0 4px 4px 0; }
.search-form .btn:hover { background-color: var(--accent-yellow); border-color: var(--accent-yellow); color: var(--primary-dark); }

/* Cart Icon */
.cart-icon-wrapper { position: relative; color: var(--primary-dark); font-size: 24px; text-decoration: none; }
.cart-badge { position: absolute; top: -5px; right: -10px; background-color: var(--accent-yellow); color: var(--primary-dark); font-size: 12px; font-weight: bold; border-radius: 50%; padding: 3px 6px; }

/* Main Navigation */
.main-nav { background-color: var(--primary-blue); }
.main-nav .nav-link { color: white !important; font-weight: 500; padding: 15px 20px !important; text-transform: uppercase; }
.main-nav .nav-link:hover { color: var(--accent-yellow) !important; }

/* =======================================
   3. Banners & Page Titles
======================================= */
/* Hero Banner (หน้าแรก) */
.hero-banner { 
    background: linear-gradient(rgba(28, 53, 94, 0.8), rgba(17, 30, 45, 0.9)), url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover; 
    color: white; 
    padding: 100px 0; 
    text-align: center; 
    border-bottom: 5px solid var(--accent-yellow);
}
.hero-banner h2 { font-size: 48px; font-weight: 700; text-transform: uppercase; margin-bottom: 20px; }
.hero-banner p { font-size: 20px; color: #ddd; margin-bottom: 30px; font-weight: 300; }

/* Page Banner (หน้าย่อย) */
.page-banner { 
    background-color: var(--bg-light); 
    padding: 60px 0; 
    text-align: center; 
    border-bottom: 1px solid #eaeaea; 
    margin-bottom: 50px; 
}
.page-banner h1 { font-size: 36px; font-weight: 700; color: var(--primary-dark); text-transform: uppercase; margin: 0 0 10px 0; }
.page-title { text-align: center; font-size: 32px; font-weight: 700; color: var(--primary-dark); text-transform: uppercase; margin-bottom: 10px; }

/* Breadcrumb */
.breadcrumb { display: flex; justify-content: center; font-size: 14px; margin: 0; }
.breadcrumb a { color: var(--text-gray); text-decoration: none; margin-right: 5px; }
.breadcrumb span { color: var(--primary-dark); font-weight: 500; margin-left: 5px; }

/* =======================================
   4. Buttons & Forms (Unified)
======================================= */
/* Accent Button */
.btn-accent { background-color: var(--accent-yellow); color: var(--primary-dark); font-weight: 600; padding: 12px 30px; text-transform: uppercase; border-radius: 4px; transition: 0.3s; }
.btn-accent:hover { background-color: white; color: var(--primary-dark); }

/* Theme Button (ใช้เยอะสุด) */
.btn-theme { 
    background-color: var(--accent-yellow); 
    color: var(--primary-dark); 
    font-weight: 700; 
    text-transform: uppercase; 
    border-radius: 0; 
    padding: 15px 30px; 
    border: none; 
    transition: 0.3s; 
    font-size: 16px; 
    width: 100%; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
}
.btn-theme:hover { background-color: var(--primary-dark); color: white; cursor: pointer; }
.btn-theme:disabled { background-color: #ccc; color: #666; cursor: not-allowed; }

/* Form Controls */
.form-group { margin-bottom: 20px; }
.form-control { border: 1px solid #e1e1e1; border-radius: 0; height: 50px; padding: 10px 20px; box-shadow: none !important; width: 100%; box-sizing: border-box; }
.form-control:focus { border-color: var(--accent-yellow); outline: none; }
.form-control[type="file"] { padding: 10px; }
.form-label, label { font-weight: 600; font-size: 14px; color: var(--primary-dark); display: block; margin-bottom: 8px; }
.form-label span { color: red; }

/* =======================================
   5. Products & Store Elements
======================================= */
.section-title { font-weight: 700; color: var(--primary-dark); text-transform: uppercase; position: relative; padding-bottom: 15px; margin-bottom: 40px; }
.section-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background-color: var(--accent-yellow); }

/* Product Cards */
.product-card { background: white; border: 1px solid #eee; border-radius: 0; transition: 0.3s; height: 100%; position: relative; overflow: hidden; }
.product-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.08); border-color: var(--accent-yellow); transform: translateY(-5px); }
.product-img-wrapper { position: relative; overflow: hidden; height: 250px; padding: 20px; background: white; display: flex; align-items: center; justify-content: center;}
.product-img { max-width: 100%; max-height: 100%; object-fit: contain; transition: 0.5s; }
.product-card:hover .product-img { transform: scale(1.05); }
.product-cat { font-size: 12px; color: #999; text-transform: uppercase; margin-bottom: 5px; display: block; }
.product-title { font-size: 16px; font-weight: 600; color: var(--primary-dark); text-decoration: none; display: block; margin-bottom: 10px; height: 48px; overflow: hidden; }
.product-title:hover { color: var(--accent-yellow); }
.product-price { font-size: 20px; font-weight: 700; color: var(--primary-blue); }

.btn-add-cart { width: 100%; background: var(--bg-light); color: var(--text-gray); border: none; padding: 10px; font-weight: 500; transition: 0.3s; border-top: 1px solid #eee; text-decoration: none; display: block; text-align: center;}
.product-card:hover .btn-add-cart { background: var(--primary-blue); color: white; }

/* Single Product Details */
.product-image-gallery { border: 1px solid #eee; padding: 20px; text-align: center; }
.product-image-gallery img { max-width: 100%; object-fit: contain; }
.product-sku { font-size: 14px; color: #888; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.stock-status { font-weight: 600; margin-bottom: 25px; display: inline-block; padding: 5px 12px; border-radius: 4px; font-size: 14px; }
.in-stock { background-color: #e6f4ea; color: #1e8e3e; }
.out-stock { background-color: #fce8e6; color: #d93025; }
.add-to-cart-wrapper { display: flex; gap: 15px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #eee; }
.quantity-input { width: 80px; height: 50px; text-align: center; border: 1px solid #ccc; border-radius: 0; font-weight: 600; font-size: 16px; }

/* Product Tabs */
.product-tabs { margin-top: 60px; margin-bottom: 60px; }
.nav-tabs { border-bottom: 2px solid #eee; }
.nav-tabs .nav-link { color: var(--text-gray); font-weight: 600; text-transform: uppercase; border: none; padding: 15px 30px; background: transparent; }
.nav-tabs .nav-link.active { color: var(--primary-dark); border-bottom: 3px solid var(--accent-yellow); background: transparent; }
.tab-content { padding: 30px 0; line-height: 1.8; color: var(--text-gray); white-space: pre-line; }

/* =======================================
   6. Sections (Offers, Account, Checkout)
======================================= */
/* Offers / Trust Indicators */
.offers-section { background-color: #fff; padding: 40px 0; border-top: 1px solid #eee; margin-top: 20px; }
.offer-box { display: flex; align-items: center; padding: 10px; transition: 0.3s; }
.offer-box:hover { transform: translateY(-5px); }
.offer-icon { font-size: 38px; color: var(--accent-yellow); margin-right: 20px; transition: 0.3s; }
.offer-box:hover .offer-icon { color: var(--primary-dark); }
.offer-content h4 { font-size: 16px; font-weight: 700; color: var(--primary-dark); margin: 0 0 5px 0; text-transform: uppercase; }
.offer-content p { font-size: 14px; color: var(--text-gray); margin: 0; }

/* Account & Payment Boxes */
.account-section h2 { font-size: 24px; font-weight: 600; color: var(--primary-dark); text-transform: uppercase; margin-bottom: 30px; }
.lost-password { font-size: 14px; color: var(--text-gray); text-decoration: none; transition: 0.3s; }
.lost-password:hover { color: var(--accent-yellow); }

.payment-box, .checkout-box { border: 1px solid #e1e1e1; padding: 40px; background-color: #fff; max-width: 600px; margin: 0 auto; box-shadow: 0 5px 15px rgba(0,0,0,0.03); border-radius: 0; }
.payment-box h3 { font-size: 20px; font-weight: 700; text-transform: uppercase; margin-bottom: 25px; color: var(--primary-dark); text-align: center; }

.order-summary-box, .total-summary { background-color: var(--primary-dark); color: white; padding: 20px; text-align: center; margin-bottom: 30px; font-size: 18px; }
.amount-due, .total-price { color: var(--accent-yellow); font-size: 32px; font-weight: 700; margin-top: 5px; }

/* Alerts */
.alert { padding: 15px; margin-bottom: 20px; border-radius: 4px; text-align: center; }
.alert-success { background-color: #d4edda; color: var(--success-green); border: 1px solid #c3e6cb; }
.alert-error { background-color: #f8d7da; color: var(--danger-red); border: 1px solid #f5c6cb; }

/* =======================================
   7. Footer
======================================= */
.site-footer { background-color: var(--primary-dark); color: #a0a6ad; margin-top: 50px; }
.footer-top { padding: 70px 0 50px; }
.footer-widget-title { color: #fff; font-weight: 600; text-transform: uppercase; margin-bottom: 25px; font-size: 18px; position: relative; padding-bottom: 12px; }
.footer-widget-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background-color: var(--accent-yellow); }
.footer-text { font-size: 15px; line-height: 1.8; margin-bottom: 20px; }
.footer-link { color: #a0a6ad; text-decoration: none; display: block; margin-bottom: 12px; font-size: 15px; transition: all 0.3s ease; }
.footer-link:hover { color: var(--accent-yellow); transform: translateX(5px); }
.footer-contact-info { list-style: none; padding: 0; margin: 0; }
.footer-contact-info li { display: flex; margin-bottom: 15px; font-size: 15px; line-height: 1.6; }
.footer-contact-info i { color: var(--accent-yellow); font-size: 18px; width: 35px; margin-top: 4px; flex-shrink: 0; }
.social-icons { display: flex; gap: 10px; margin-top: 20px; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255,255,255,0.05); color: #fff; border-radius: 4px; text-decoration: none; transition: 0.3s; }
.social-icon:hover { background: var(--accent-yellow); color: var(--primary-dark); }
.footer-bottom { background-color: #0d1723; padding: 25px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; text-align: center; }

/* =======================================
   8. Cart Page Styles
======================================= */

/* Cart Table Base */
.cart-table th { 
    background-color: var(--primary-dark); 
    color: white; 
    text-transform: uppercase; 
    font-size: 14px; 
    font-weight: 600; 
    padding: 15px; 
    border: none; 
}
.cart-table td { 
    padding: 20px 15px; 
    vertical-align: middle; 
    border-bottom: 1px solid #eee; 
}

/* Cart Product Elements (จำกัดเฉพาะในตารางตะกร้า เพื่อไม่ให้ตีกับหน้าแรก) */
.cart-table .product-img { 
    width: 70px; 
    height: 70px; 
    object-fit: contain; 
    border: 1px solid #eee; 
    padding: 5px; 
    margin-right: 15px; 
}
.cart-table .quantity-input { 
    width: 70px; 
    height: 40px; 
    text-align: center; 
    border: 1px solid #e1e1e1; 
    border-radius: 0; 
}

/* Text Links & Actions */
.product-name-link { 
    color: var(--primary-dark); 
    text-decoration: none; 
    font-weight: 600; 
}
.product-name-link:hover { color: var(--accent-yellow); }

.btn-remove { 
    color: #ccc; 
    transition: 0.3s; 
    font-size: 18px; 
    text-decoration: none; 
}
.btn-remove:hover { color: var(--danger-red); } /* ใช้ตัวแปรสีแดงจากอันที่แล้ว */

/* Cart Totals Box */
.cart-totals-box { 
    border: 2px solid var(--primary-dark); 
    padding: 30px; 
    background-color: #fff; 
}
.cart-totals-box h3 { 
    font-size: 20px; 
    font-weight: 700; 
    text-transform: uppercase; 
    margin-bottom: 25px; 
    color: var(--primary-dark); 
    border-bottom: 2px solid #eee; 
    padding-bottom: 10px; 
}
.total-row { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 15px; 
    font-size: 15px; 
}
.total-row.grand-total { 
    border-top: 1px solid #eee; 
    padding-top: 15px; 
    font-size: 20px; 
    font-weight: 700; 
    color: var(--primary-blue); 
}

/* Secondary Button */
.btn-secondary-theme { 
    background-color: var(--bg-light); 
    color: var(--primary-dark); 
    border: 1px solid #e1e1e1; 
    font-weight: 700; 
    text-transform: uppercase; 
    border-radius: 0; 
    padding: 12px 25px; 
    transition: 0.3s; 
    font-size: 14px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block;
}
.btn-secondary-theme:hover { 
    background-color: var(--primary-blue); 
    color: white; 
    border-color: var(--primary-blue); 
    cursor: pointer;
}