/* ไฟล์นี้: หน้าตาของทั้งเว็บ (สี ขนาดตัวอักษร ปุ่ม ตาราง การ์ด) เขียนเองทั้งหมด ไม่ใช้ Bootstrap
   คัดมาจากเว็บฝั่งมหาวิทยาลัย (KTBSFORUNIVERSITY) ให้หน้าตาเหมือนกัน ส่วนที่มีเฉพาะเว็บบริษัทอยู่ท้ายไฟล์ */
/* ===== พื้นฐาน: ล้างระยะขอบที่เบราว์เซอร์ใส่มาให้ ตัวอักษร และค่ากลาง ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ปุ่มและช่องกรอกใช้ตัวอักษรแบบเดียวกับทั้งหน้า */
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

/* ตัวอักษรและสีพื้นของทั้งหน้า */
body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: #333;
    background: #fafafa;
}

h1, h2, h3, h4, h5, h6 { line-height: var(--lh-heading); }

small { font-size: var(--fs-sm); }

/* ค่ากลางที่ใช้ทั้งไฟล์: สี ระยะห่าง ความโค้ง เงา ความสูงปุ่ม ขนาดตัวอักษร (แก้ที่นี่ที่เดียว เปลี่ยนทั้งเว็บ) */
:root {
    --dark-green: #1e7e4a;
    --teal: #1cc68a;
    --teal-soft: #2e9e77;
    --light-mint: #26d4aa;
    --light-mint-pale: #f0fdf9;
    --white: #ffffff;
    --text-dark: #333333;
    --text-gray: #666666;
    --border-light: #e0e0e0;

    --fs-sm:   0.875rem;    /* 14px */
    --fs-base: 1rem;        /* 16px */
    --fs-md:   1.125rem;    /* 18px */
    --fs-lg:   1.25rem;     /* 20px */
    --fs-xl:   1.5rem;      /* 24px */
    --fs-2xl:  1.875rem;    /* 30px */
    --fs-3xl:  2.25rem;     /* 36px */
    --danger: #dc3545;
    --warning: #ffc107;
    --success: #28a745;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 2px 10px rgba(0,0,0,0.08);
    --shadow-lg: 0 6px 20px rgba(0,0,0,0.12);

    --control-h: 40px;
    --control-h-sm: 34px;
    --control-h-lg: 46px;

    --lh-tight:   1.2;
    --lh-heading: 1.35;
    --lh-base:    1.6;
    --lh-relaxed: 1.75;
}

/* ===== แถบเมนูด้านบน (header.php): ปุ่ม ☰ โลโก้ ตะกร้า ปุ่มภาษา เมนูโปรไฟล์ ===== */
header {
    background-color: var(--dark-green);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
}

.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.menu-toggle {
    width: 32px; height: 32px;
    background: none; border: none;
    color: var(--white); font-size: 1.5rem;
    cursor: pointer; border-radius: var(--radius-sm);
}

.menu-toggle:hover { background: rgba(255,255,255,0.15); }

.logo {
    color: var(--white);
    font-size: var(--fs-lg);
    font-weight: 600;
    text-decoration: none;
    display: flex; align-items: center; gap: var(--space-3);
}

.logo-img { height: 42px; width: auto; display: block; }

/* ปุ่มเปลี่ยนภาษา TH / EN */
.lang-switcher { display: flex; gap: var(--space-1); }

.lang-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--white);
    text-decoration: none; border-radius: var(--radius-sm);
    font-size: var(--fs-sm); font-weight: 600;
}

.lang-btn.active, .lang-btn:hover { background: var(--teal); }

/* ===== เมนูด้านข้าง (เลื่อนออกมาเมื่อกด ☰) และพื้นหลังมืดด้านหลัง ===== */
.sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1998; opacity: 0; visibility: hidden;
    transition: 0.3s;
}

.sidebar-overlay.active { opacity: 1; visibility: visible; }

.sidebar {
    position: fixed; top: 0; left: 0;
    width: 280px; height: 100%;
    background: var(--dark-green);
    z-index: 1999;
    transform: translateX(-100%);
    transition: 0.3s;
}

.sidebar.active { transform: translateX(0); }

/* หัวแถบเมนู: คำว่า "เมนู" ซ้าย ปุ่มปิด ✕ ขวา อยู่แถวเดียวกัน */
.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-title { color: var(--white); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.05em; }

.sidebar-close {
    background: none; border: none;
    color: white; font-size: 1.5rem; cursor: pointer;
}

.sidebar nav ul { list-style: none; }

.sidebar nav a {
    display: block;
    color: white; text-decoration: none;
    padding: var(--space-3) var(--space-6);
    transition: 0.2s;
}

.sidebar nav a:hover, .sidebar nav a.active-link {
    background: rgba(255,255,255,0.12);
    padding-left: calc(var(--space-6) + var(--space-1));
}

/* ===== โครงหน้า หัวข้อหน้า และส่วนบนสุดของหน้า ===== */
.page-content { min-height: 60vh; }

.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-6);
}

.page-title {
    font-size: var(--fs-2xl);
    color: var(--dark-green);
    margin-bottom: var(--space-5);
}

.hero {
    background: linear-gradient(135deg, var(--dark-green), var(--teal-soft));
    color: white;
    padding: var(--space-7) var(--space-6);
    text-align: center;
}

.hero-image {
    width: 100%; max-width: 760px;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
}

.main-title { font-size: var(--fs-3xl); font-weight: 700; margin-bottom: var(--space-2); }

.main-subtitle { font-size: var(--fs-base); opacity: 0.9; }

/* ===== หน้าแรก: จุดเด่น 6 ข้อ ปุ่มในส่วนบนสุด เราคือใคร ปุ่มโซเชียล ===== */
.why-section {
    background: var(--light-mint-pale);
    padding: var(--space-6); border-radius: var(--radius-lg);
}

.section-title { font-size: var(--fs-xl); text-align: center; color: var(--dark-green); margin-bottom: var(--space-2); }

.section-subtitle { text-align: center; color: var(--text-gray); margin-bottom: var(--space-6); max-width: 65ch; margin-left: auto; margin-right: auto; }

.why-section .section-title { margin-top: 0; }

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
}

.feature-card {
    background: linear-gradient(135deg, var(--dark-green), var(--teal-soft));
    border-radius: var(--radius-lg); padding: var(--space-6);
    text-align: center; color: white;
    transition: 0.3s;
}

.feature-card:hover { transform: translateY(-4px); }

.feature-icon { font-size: 2rem; margin-bottom: var(--space-3); }

.feature-title { font-size: var(--fs-lg); margin-bottom: var(--space-2); }

.feature-desc { font-size: var(--fs-sm); opacity: 0.95; }

.home-section { margin-bottom: var(--space-8); }

.home-section:last-child { margin-bottom: 0; }

.section-action { text-align: center; margin-top: var(--space-6); }

.hero-actions {
    display: flex; flex-wrap: wrap;
    justify-content: center; gap: var(--space-4);
    margin-top: var(--space-5);
}

.btn-hero-solid {
    background: var(--white);
    color: var(--dark-green);
}

.btn-hero-solid:hover { background: var(--light-mint-pale); }

.btn-hero-ghost {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

.btn-hero-ghost:hover { background: rgba(255,255,255,0.15); }

.about-brief {
    max-width: 760px; margin: 0 auto;
    text-align: center;
}

.about-brief-lead {
    font-size: var(--fs-md);
    color: var(--text-dark);
    margin-bottom: var(--space-4);
}

.about-brief p { color: var(--text-gray); }

.about-brief .btn { margin-top: var(--space-5); }

.product-brief {
    font-size: var(--fs-sm);
    color: var(--text-gray);
    margin-bottom: var(--space-2);
}

.social-section {
    background: var(--light-mint-pale);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-7);
}

.social-buttons {
    display: flex; flex-wrap: wrap;
    justify-content: center; gap: var(--space-4);
}

.social-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-h-lg);
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-sm);
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s;
}

.social-btn:hover { transform: translateY(-2px); }

.social-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    font-size: var(--fs-base);
}

.social-facebook { background: #1877f2; }

.social-tiktok { background: #000000; }

/* ===== การ์ดสินค้า (ใช้ทุกหน้าที่มีรายการสินค้า) ===== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-5);
}

.product-card {
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: 0.3s;
}

.product-card:hover { box-shadow: var(--shadow-lg); }

.product-card img, .product-placeholder {
    width: 100%; height: 180px;
    object-fit: cover;
    background: var(--light-mint-pale);
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
}

.product-card { display: flex; flex-direction: column; }

.product-card-body { padding: var(--space-4); display: flex; flex-direction: column; flex: 1; }

.product-card-body .btn { margin-top: auto; align-self: flex-start; }

.product-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); color: var(--text-dark); }

.product-stock { font-size: var(--fs-sm); color: var(--text-gray); }

/* กล่องฟอร์มพื้นขาว (แบบกว้าง / เต็มความกว้าง) และช่อง 2 คอลัมน์ */
.form-card {
    background: white;
    padding: var(--space-6);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-width: 480px;
    margin: var(--space-6) auto;
}

.form-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); }

.form-wide { max-width: 800px; margin: 0 auto; }

.form-card-fill { max-width: 100%; margin: 0; }

/* ===== ปุ่ม: สีเขียว (หลัก) สีเทา (รอง) สีแดง (ลบ) ขนาดเล็ก/ใหญ่/เต็มแถว ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-h);
    padding: var(--space-2) var(--space-5);
    border: none; border-radius: var(--radius-sm);
    cursor: pointer; font-size: var(--fs-base);
    font-weight: 600; line-height: var(--lh-tight);
    text-decoration: none; text-align: center;
    transition: 0.2s;
}

.btn-primary { background: var(--dark-green); color: white; }

.btn-primary:hover { background: #156b40; }

.btn-secondary { background: #6c757d; color: white; }

.btn-sm {
    min-height: var(--control-h-sm);
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-sm);
}

.btn-lg {
    min-height: var(--control-h-lg);
    padding: var(--space-2) var(--space-6);
}

/* ===== กล่องข้อความแจ้งเตือน: เขียว = สำเร็จ / แดง = ผิดพลาด / ฟ้า = ข้อมูล ===== */
.alert {
    max-width: 1200px; margin: var(--space-4) auto;
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
}

.alert-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

/* ===== ตาราง (กรอบเลื่อนแนวนอนได้ถ้ากว้างเกินจอ) ===== */
.table-wrap { overflow-x: auto; background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

.table-empty { text-align: center; color: var(--text-gray); padding: var(--space-6); }

table { width: 100%; border-collapse: collapse; }

table th, table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border-light); }

table th { background: var(--light-mint-pale); color: var(--dark-green); font-weight: 600; }

table tr:hover { background: #f9f9f9; }

/* ===== ปุ่มติดต่อด่วนมุมขวาล่าง กดแล้วกาง Facebook / LINE / โทร ออกมา ===== */
.quick-contact-fab {
    position: fixed; right: 1.5rem; bottom: 1.5rem;
    z-index: 900;
    display: flex; flex-direction: column-reverse;
    align-items: center; gap: var(--space-3);
}

.quick-contact-btn {
    width: 56px; height: 56px;
    border-radius: 50%; border: none;
    background: var(--teal); color: white;
    font-size: 1.5rem; cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s;
}

.quick-contact-fab.active .quick-contact-btn {
    transform: rotate(135deg);
    background: var(--danger);
}

.qc-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white;
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    opacity: 0; visibility: hidden;
    transform: translateY(20px) scale(0.5);
    transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
}

.quick-contact-fab.active .qc-icon {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
}

.quick-contact-fab.active .qc-facebook { transition-delay: 0.05s; }

.quick-contact-fab.active .qc-line { transition-delay: 0.1s; }

.quick-contact-fab.active .qc-phone { transition-delay: 0.15s; }

.qc-facebook { background: #1877f2; }

.qc-line { background: #06c755; }

.qc-phone { background: var(--dark-green); }

.qc-icon:hover { transform: scale(1.1); }

.quick-contact-fab.active .qc-icon:hover { transform: translateY(0) scale(1.1); }

/* ===== ส่วนท้ายของเว็บ (footer.php) ===== */
footer {
    background: var(--dark-green);
    color: white; padding: var(--space-6); margin-top: var(--space-7);
}

.footer-content {
    max-width: 1200px; margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
}

.footer-section h3 { font-size: var(--fs-md); margin-bottom: var(--space-3); }

.footer-section p { font-size: var(--fs-base); opacity: 0.9; line-height: var(--lh-relaxed); }

.footer-bottom { text-align: center; padding-top: var(--space-5); margin-top: var(--space-5); border-top: 1px solid rgba(255,255,255,0.1); font-size: var(--fs-sm); opacity: 0.8; }

/* ไอคอนลายเส้นในหน้าแอดมิน */
.icon { width: 20px; height: 20px; flex-shrink: 0; }

@keyframes bell-shake {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-14deg); }
    75% { transform: rotate(14deg); }
}

/* หน้าร้านบนมือถือ: ปุ่มและช่องกรอกกลับไปสูง 44px ให้นิ้วกดง่าย */
@media (max-width: 768px) {
    :root { --control-h: 44px; --control-h-sm: 38px; }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4); margin-bottom: var(--space-6);
}

.stat-card {
    background: white; padding: var(--space-5);
    border-radius: var(--radius-md); text-align: center;
    box-shadow: var(--shadow-sm);
}

.stat-card .number { font-size: var(--fs-2xl); font-weight: 700; color: var(--dark-green); }

.stat-card .label { color: var(--text-gray); font-size: var(--fs-base); }

/* ===== หน้ารวมหมวดหมู่: รูปหมวด (ชี้แล้วรูปขยายเล็กน้อย) ===== */
.category-thumb { display: block; text-decoration: none; line-height: 0; }

.category-thumb img, .category-thumb .product-placeholder {
    width: 100%; height: 180px;
    object-fit: cover;
    display: block;
    background: var(--light-mint-pale);
    transition: transform 0.3s;
}

.category-thumb .product-placeholder {
    display: flex; align-items: center; justify-content: center; font-size: 3rem;
}

.category-card:hover .category-thumb img { transform: scale(1.05); }

.category-card .category-thumb { overflow: hidden; }

/* ข้อความอธิบายตัวเล็กสีเทา (ใต้ช่องกรอก ใต้หัวข้อ) */
.form-hint { display: block; color: var(--text-gray); font-size: var(--fs-sm); margin-top: var(--space-1); }

@media (max-width: 768px) {
    .header-container { padding: var(--space-3) var(--space-4); }

    .logo.has-logo .logo-text { display: none; }

    .logo-img { height: 36px; }

    .main-content { padding: var(--space-4); }
}

/* ===== หน้าติดต่อเรา และหน้าเกี่ยวกับเรา ===== */
.contact-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    margin-bottom: var(--space-7);
    align-items: start;
}

.about-history {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: center;
}

.about-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.about-block { margin-bottom: var(--space-7); }

.about-heading {
    color: var(--dark-green);
    font-size: var(--fs-xl);
    border-bottom: 3px solid var(--teal);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-6);
}

.about-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.about-cards .about-card-title {
    color: var(--dark-green);
    font-size: var(--fs-lg);
    margin-bottom: var(--space-4);
}

.about-text {
    line-height: var(--lh-relaxed);
    max-width: 65ch;
}

/* ชื่อบริษัทต้นย่อหน้าประวัติบริษัท ตัวหนาและสีเข้มกว่าข้อความรอบข้าง (บริษัทขอเมื่อ 28 ต.ค. 2569) ส่วนอื่นของย่อหน้าไม่เปลี่ยน */
.about-name { font-weight: 700; color: #111; }

.about-contact {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    text-align: center;
}

.about-contact h2 {
    color: var(--dark-green);
    font-size: var(--fs-xl);
    margin-bottom: var(--space-6);
}

.about-contact-line {
    font-size: var(--fs-base);
    margin-bottom: var(--space-2);
}

.about-contact .btn { margin-top: var(--space-5); }

.contact-map-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.contact-info-wrapper { display: flex; align-items: center; }

.contact-info-card {
    background: var(--light-mint-pale);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    width: 100%;
    box-shadow: var(--shadow-md);
}

.contact-info-card h2 { color: var(--dark-green); margin-bottom: var(--space-6); font-size: var(--fs-xl); }

.info-group { margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-light); }

.info-group:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.info-group h4 { color: var(--dark-green); margin-bottom: var(--space-2); font-size: var(--fs-base); }

.info-group p { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text-dark); }

.contact-link { color: var(--dark-green); text-decoration: none; font-weight: 600; }

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

.info-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-6); }

/* คำถามที่พบบ่อย (2 คอลัมน์) */
.faq-section {
    background: var(--light-mint-pale);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: var(--space-7) 0;
    box-shadow: var(--shadow-md);
}

.faq-section h2 { color: var(--dark-green); text-align: center; margin-bottom: var(--space-6); font-size: var(--fs-xl); }

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }

.faq-item h4 { color: var(--dark-green); margin-bottom: var(--space-2); }

.faq-item p { line-height: var(--lh-relaxed); color: var(--text-dark); font-size: var(--fs-base); }

/* กล่องชวนดูสินค้า พื้นสีเขียว */
.cta-section {
    background: linear-gradient(135deg, var(--dark-green), #156b40);
    color: white; border-radius: var(--radius-lg);
    padding: var(--space-6); text-align: center;
    margin-top: var(--space-7);
}

.cta-section h2 { font-size: var(--fs-xl); margin-bottom: var(--space-4); }

.cta-section p { margin-bottom: var(--space-5); font-size: var(--fs-md); opacity: 0.9; }

.btn-light { background: white; color: var(--dark-green); }

.btn-light:hover { background: var(--light-mint-pale); }

@media (max-width: 768px) {
    .contact-main { grid-template-columns: 1fr; gap: var(--space-6); }

    .about-history { grid-template-columns: 1fr; }

    .about-cards { grid-template-columns: 1fr; }

    .faq-grid { grid-template-columns: 1fr; }

    .info-actions { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .btn-sm { min-height: var(--control-h); }

    .lang-btn, .menu-toggle, .sidebar-close {
        width: var(--control-h); height: var(--control-h);
    }

    .product-card .btn {
        display: flex;
        width: 100%;
        align-self: stretch;
    }

    .page-content { padding-bottom: 5rem; }

    .hero-actions, .social-buttons { flex-direction: column; }

    .hero-actions .btn, .social-btn { width: 100%; justify-content: center; }

    .home-section { margin-bottom: var(--space-6); }
}

@media (max-width: 768px) {
    :root {
        --fs-3xl: 2rem;
        --fs-2xl: 1.75rem;
        --fs-xl:  1.5rem;
        --fs-lg:  1.375rem;
        --fs-md:  1.125rem;
    }
}

/* ===== หน้ารวมหมวดหมู่: วิดีโอ 2 คลิป (วิธีเลือกใบเลื่อย / วิธีวัดความยาว) วางคู่กัน จอแคบเรียงลงมา ===== */
/* (เว็บบริษัทใช้ในหน้าแรก ต่อจากส่วนสินค้า คัดมาเมื่อ 27 ต.ค. 2569) */
.blade-videos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--space-6);
    margin-top: var(--space-7);
}
/* การ์ดละคลิป: หัวข้อ → คำอธิบาย → วิดีโอ → ปุ่ม เรียงลงมาตรงกลาง */
.blade-video {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--light-mint-pale);
    border-radius: var(--radius-lg);
    text-align: center;
}
.blade-video .section-title { margin-bottom: 0; }
/* คำอธิบายยืดเต็มที่ว่าง วิดีโอของทั้ง 2 การ์ดจะได้อยู่ระดับเดียวกัน แม้ข้อความยาวไม่เท่ากัน */
.blade-video p { flex: 1; max-width: 48ch; color: var(--text-dark); line-height: var(--lh-base); }
/* คลิปเป็นวิดีโอแนวตั้ง สัดส่วน 9:16 กว้างไม่เกิน 320px */
.blade-video-frame {
    width: 100%; max-width: 320px;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-md); overflow: hidden;
    background: #000000; box-shadow: var(--shadow-md);
}
.blade-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 768px) {
    .blade-video { padding: var(--space-4); }
}

@media print {
    header,
footer,
.sidebar,
.sidebar-overlay,
.quick-contact-fab { display: none !important; }

    body { background: var(--white); }

    .page-content { padding: 0; }

    .main-content { padding: 0; }
}

/* ============================================================
 * ส่วนที่มีเฉพาะเว็บบริษัท (KTBSFORBUSINESS)
 *
 * ทุกอย่างด้านบนคัดมาจาก assets/css/main.css ของเว็บฝั่งมหาวิทยาลัย (KTBSFORUNIVERSITY)
 * เมื่อ 19 ต.ค. 2569 ให้หน้าตาสองเว็บเหมือนกัน เอาออกเฉพาะกฎของหน้าที่เว็บบริษัทไม่มี
 * (ตะกร้า สมาชิก คำสั่งซื้อ หน้าแอดมิน หน้าสินค้ารายตัว)
 * ถ้าฝั่งมหาวิทยาลัยปรับหน้าตาอีก ให้คัดกฎที่เปลี่ยนมาแทนที่ด้านบน แล้วคงส่วนนี้ไว้ท้ายไฟล์
 * ============================================================ */

/* ปุ่ม "สินค้า" บนแถบหัวเว็บ ถัดจากปุ่มเปลี่ยนภาษา พาไปหน้าประเภทสินค้า
   ค่าทุกตัวคัดจาก .header-login (ปุ่มเข้าสู่ระบบ) ของเว็บฝั่งมหาวิทยาลัย ซึ่งอยู่ตำแหน่งเดียวกัน
   ปุ่มทรงแคปซูลขอบขาว ชี้แล้วพื้นเป็นสีมิ้นต์ ตอนอยู่หน้าประเภทสินค้าเป็นสีมิ้นต์ค้างไว้ (เหมือนปุ่ม TH/EN ที่เลือกอยู่) */
.header-products {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-pill);
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.header-products:hover, .header-products.active { background: var(--teal); border-color: var(--teal); }

/* จอมือถือเหลือแค่ไอคอน ไม่แสดงคำ (กฎเดียวกับปุ่มเข้าสู่ระบบของฝั่งมหาวิทยาลัย) */
@media (max-width: 768px) {
    .header-products-text { display: none; }
    .header-products { padding: var(--space-1) var(--space-2); }
}

/* ==================== แบนเนอร์หน้าแรก (index.php) ====================
 * รูปแบนเนอร์ (assets/img/hero-bg.webp) เต็มความกว้างจอเป็นพื้นหลัง ชื่อบริษัทกับคำโปรยวางทับอยู่ตรงกลาง
 * เปลี่ยนจากแบบเดิม (รูปกรอบมนบนพื้นเขียว ชื่อบริษัทกับปุ่ม 2 ปุ่มอยู่ใต้รูป) ตามที่บริษัทขอเมื่อ 27 ต.ค. 2569
 * ใช้คลาส .hero-banner เพิ่มจาก .hero เฉพาะหน้าแรก หน้าอื่นที่ใช้ .hero (เกี่ยวกับเรา ติดต่อ สินค้า) ยังเป็นพื้นเขียวเหมือนเดิม
 *
 * รูปยังเป็นแท็ก <img> ไม่ย้ายไปเป็น background-image ใน CSS เพราะเบราว์เซอร์เห็นรูปตั้งแต่อ่าน HTML
 * จึงโหลดได้เร็ว (fetchpriority) และยังเปลี่ยนรูปได้ด้วยการเขียนทับไฟล์เหมือนเดิม
 * ==================== */
.hero-banner {
    position: relative;
    min-height: clamp(420px, 70vh, 680px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* รูปขยายเต็มกล่องแบนเนอร์ object-fit: cover ตัดขอบส่วนที่เกินออกแทนการยืดรูป
   แสดงสว่างเท่ารูปจริง (บริษัทขอเมื่อ 28 ต.ค. 2569 เดิมหรี่ไว้ครึ่งหนึ่ง) ตัวหนังสือสีขาวอ่านออกได้เพราะมีขอบดำ (ด้านล่าง)
   ระหว่างรูปยังโหลดไม่เสร็จจะเห็นพื้นเขียวของ .hero แทน */
.hero-banner .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
}

/* กล่องข้อความต้องเป็น position: relative ถึงจะขึ้นอยู่ชั้นบนของรูปที่เป็น absolute */
.hero-content { position: relative; max-width: 900px; }

/* ขอบดำรอบตัวหนังสือสีขาว ให้อ่านออกทั้งตรงท่อนไม้สีเข้มและแผ่นใบเลื่อยสีอ่อน
   วาดด้วยเงาแข็ง 8 ทิศรอบตัวอักษร แทน -webkit-text-stroke ที่กินเนื้อตัวอักษรเข้าไปและทำให้วรรณยุกต์ไทยดูหนาเป็นก้อน
   ชื่อบริษัทตัวใหญ่ใช้ขอบ 2px คำโปรยตัวเล็กใช้ 1.5px (หนาไปวรรณยุกต์ไทยจะเบียดกัน) บวกเงาดำฟุ้งรอบตัวหนังสือ
   ให้พื้นหลังตรงนั้นมืดลงเฉพาะที่ ตัวส้มจึงไม่กลืนกับท่อนไม้สีน้ำตาลส้ม (ปรับให้ชัดขึ้นเมื่อ 28 ต.ค. 2569 หลังเอากรอบออก) */
.hero-banner .main-title {
    text-shadow:
        -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000,
        -2px 0 0 #000, 2px 0 0 #000,
        -2px 2px 0 #000, 0 2px 0 #000, 2px 2px 0 #000,
        0 0 16px rgba(0, 0, 0, 0.9),
        0 4px 18px rgba(0, 0, 0, 0.7);
}

.hero-banner .main-subtitle {
    opacity: 1;   /* .main-subtitle เดิมโปร่ง 0.9 ทำให้ขอบดำจางไปด้วย */
    font-weight: 600;
    text-shadow:
        -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000,
        -1.5px 0 0 #000, 1.5px 0 0 #000,
        -1.5px 1.5px 0 #000, 0 1.5px 0 #000, 1.5px 1.5px 0 #000,
        0 0 12px rgba(0, 0, 0, 0.95),
        0 0 24px rgba(0, 0, 0, 0.8);
}

/* ==== ตัวหนังสือในแบนเนอร์ (บริษัทขอเมื่อ 28 ต.ค. 2569) ====
 * ตัวหนังสือใหญ่ สีส้ม #ef8c29 ทั้งชื่อบริษัทและคำโปรย ขอบดำรอบตัวอักษร (ดูด้านบน) วางบนรูปตรง ๆ
 * เคยลองใส่กรอบสี่เหลี่ยมเส้นคู่พื้นเขียวเข้มโปร่งแสง (มีเส้นคั่นรูปฟันเลื่อยใต้ชื่อด้วย) แล้วบริษัทขอเอาออกทั้งสองอย่าง
 * ขนาดตัวหนังสือโตตามความกว้างจอ (clamp) จอคอมชื่อบริษัทราว 64px จากเดิม 36px จอมือถือ 36px */
.hero-banner .hero-content {
    --hero-text: #ef8c29;
    max-width: min(1100px, 100%);
}

.hero-banner .main-title {
    font-size: clamp(2.25rem, 4.5vw, 4rem);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-3);
    color: var(--hero-text);
}

.hero-banner .main-subtitle {
    font-size: clamp(1.05rem, 1.7vw, 1.45rem);
    color: var(--hero-text);
}

/* ==================== ส่วน "เราคือใคร" หน้าแรก (index.php) ====================
 * จัดตามหัวข้อ ABOUT ของเว็บ hololivepro.com ที่บริษัทส่งมาเป็นตัวอย่างเมื่อ 27 ต.ค. 2569
 * แถบเต็มความกว้างจอ พื้นเทาอ่อน มีวงกลมใหญ่สีเทาเข้มกว่านิดหนึ่งทางซ้าย
 * และชื่อบริษัทตัวใหญ่สีขาวเลื่อนไปทางซ้ายช้า ๆ อยู่ข้างหลังเนื้อหา
 * ==================== */
.about-band {
    position: relative;
    overflow: hidden;   /* ตัดตัวหนังสือใหญ่ที่ยาวเกินจอ ไม่ให้หน้าเว็บเลื่อนซ้ายขวาได้ */
    padding: 6rem var(--space-6);   /* เว้นบนล่างกว้าง ให้ตัวหนังสือใหญ่ข้างหลังมีที่โล่งรอบ ๆ แบบเว็บตัวอย่าง */
    /* วงกลมใหญ่ ศูนย์กลางอยู่นอกจอทางซ้าย เห็นแค่ขอบโค้งเหมือนเว็บตัวอย่าง */
    background:
        radial-gradient(circle at -5% 40%, #ececec 0 38vw, transparent calc(38vw + 1px)),
        #f4f4f4;
}

/* ตัวหนังสือใหญ่ที่เลื่อน (bigMarquee() ใน helpers.php) ใช้ทั้งที่นี่และพื้นหลังของหน้าอื่น (.page-band ด้านล่าง)
   ค่าตั้งต้นอยู่กึ่งกลางแถบตามแนวตั้ง */
.marquee {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    color: var(--white);
    font-size: clamp(5rem, 11vw, 13rem);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;   /* คำภาษาอังกฤษเป็นตัวพิมพ์ใหญ่แบบเว็บตัวอย่าง (ภาษาไทยไม่มีผล) */
    pointer-events: none;   /* อยู่ข้างหลัง คลิกทะลุไปที่ปุ่มได้ */
}

/* คำเดียวกัน 4 ชุดยาวเท่ากัน เลื่อนไป -25% (ยาว 1 ชุดพอดี) แล้วเริ่มใหม่ ภาพตอนจบกับตอนเริ่มเหมือนกันทุกจุด
   เวลาต่อรอบ (--marquee-time) helpers.php คิดตามความยาวคำ
   ผู้ใช้ที่ตั้งค่าเครื่องให้ลดการเคลื่อนไหว ตัวหนังสือจะนิ่ง (กฎ prefers-reduced-motion ท้ายไฟล์) */
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee var(--marquee-time, 40s) linear infinite;
}

.marquee-track span { padding-right: 0.4em; }

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-25%); }
}

/* เนื้อหาต้องเป็น position: relative ถึงจะขึ้นอยู่ชั้นบนของตัวหนังสือใหญ่ที่เป็น absolute */
.about-band-content { position: relative; max-width: 1200px; margin: 0 auto; }

/* ตัวหนังสือในส่วน "เราคือใคร" ใหญ่ขึ้นอีกนิด (บริษัทขอเมื่อ 28 ต.ค. 2569)
   หัวข้อ 24 -> 32px ย่อหน้าแรก 18 -> 22px ย่อหน้าที่สอง 16 -> 19px บนจอคอม จอแคบลดลงเองตาม clamp
   กรอบข้อความกว้างขึ้นจาก 760px เป็น 880px ตัวใหญ่ขึ้นแล้วจะได้ไม่ขึ้นบรรทัดใหม่ถี่เกินไป
   ใช้ .about-band นำหน้า เพราะ .section-title กับ .about-brief ตั้งขนาดไว้ที่อื่นด้วย (ส่วนอื่นของเว็บไม่เปลี่ยน) */
.about-band .section-title { font-size: clamp(1.625rem, 2.6vw, 2rem); margin-bottom: var(--space-4); }

.about-band .about-brief { max-width: 880px; }

.about-band .about-brief-lead { font-size: clamp(1.2rem, 1.9vw, 1.375rem); }

.about-band .about-brief p { font-size: clamp(1.05rem, 1.6vw, 1.1875rem); }

/* หัวข้อกับคำอธิบายใต้หัวข้อของส่วน "ใบเลื่อยที่เราผลิต" และ "ทำไมต้องเลือกเรา?" ใหญ่ขึ้น (บริษัทขอเมื่อ 28 ต.ค. 2569)
   หัวข้อ 24 -> 32px (เท่าหัวข้อ "เราคือใคร") คำอธิบาย 16 -> 19px ใช้คลาส .home-section-big ใน index.php เฉพาะสองส่วนนี้
   ส่วนวิดีโอกับช่องทางติดตามยังขนาดเดิม ถ้าอยากให้เท่ากันทั้งหน้า เติมคลาสนี้ให้ส่วนเหล่านั้นได้เลย */
.home-section-big > .section-title { font-size: clamp(1.625rem, 2.6vw, 2rem); margin-bottom: var(--space-3); }

.home-section-big > .section-subtitle { font-size: clamp(1.05rem, 1.6vw, 1.1875rem); max-width: 75ch; }

@media (max-width: 768px) {
    .about-band { padding: var(--space-7) var(--space-4); }
}

/* ==================== พื้นสีขาวแทนสีเขียวมิ้นต์ (บริษัทขอเมื่อ 28 ต.ค. 2569) ====================
 * กล่องที่เคยเป็นพื้นมิ้นต์อ่อนทั้งเว็บ (ข้อมูลติดต่อ คำถามที่พบบ่อย ช่องทางติดตาม กล่องสอบถามใต้โปสเตอร์ ฯลฯ)
 * เป็นสีขาวหมด เปลี่ยนที่ค่ากลาง --light-mint-pale ที่เดียว ทุกกฎที่ใช้สีนี้จึงเปลี่ยนตามกัน
 * ปุ่มขาว .btn-light (หน้าติดต่อเรา) เคยเปลี่ยนเป็นสีนี้ตอนชี้ ตอนนี้จะไม่เปลี่ยนเลย จึงให้เป็นเทาอ่อนแทน
 * ==================== */
:root { --light-mint-pale: #ffffff; }

.btn-light:hover { background: #f0f0f0; }

/* กล่องสอบถามใต้โปสเตอร์เป็นสีขาวอยู่ในกล่องโปสเตอร์สีขาว ยังต้องมีเส้นขอบแบ่ง แต่เปลี่ยนจากมิ้นต์เป็นเทาอ่อน */
.inquiry-box { border-color: var(--border-light); }

/* ==================== การ์ดประเภทสินค้า 3 ใบ (หน้าแรก และหน้าประเภทสินค้า) ====================
 * เดิมตารางใส่การ์ดได้มากที่สุดเท่าที่จอกว้างพอ (ช่องละอย่างน้อย 260px) จอกว้างได้ 4 ช่อง การ์ด 3 ใบเล็กและเหลือช่องว่างทางขวา
 * จอแคบลงหน่อย (หน้าต่างแคบกว่าราว 890px หรือซูมเบราว์เซอร์) เหลือ 2 ช่อง ใบที่สามตกไปอยู่แถวล่างคนเดียว
 * บริษัทขอให้เรียง 3 ใบแถวเดียวเหมือนเดิมและรูปใหญ่ขึ้น (28 ต.ค. 2569) จึงตั้งเป็น 3 ช่องเท่ากันเต็มความกว้าง
 * จอมือถือเรียงลงมาทีละใบ ถ้าวันหน้ามีประเภทที่ 4 จะขึ้นแถวใหม่ทางซ้าย
 * รูปการ์ดใช้สัดส่วน 4:3 ตามไฟล์จริง (800×600) แทนความสูงตายตัว 180px รูปจึงใหญ่ตามความกว้างการ์ดและเห็นครบไม่ถูกตัด
 * ==================== */
.product-grid { grid-template-columns: repeat(3, 1fr); }

.category-thumb img,
.category-thumb .product-placeholder { height: auto; aspect-ratio: 4 / 3; }

@media (max-width: 768px) {
    .product-grid { grid-template-columns: 1fr; }
}

/* ==================== แถบพื้นเทาวงกลมใหญ่ หน้าแรก (index.php ส่วนที่ 4-6) ====================
 * วิดีโอ 2 คลิป / ทำไมต้องเลือกเรา? / ช่องทางติดตาม อยู่บนแถบนี้ผืนเดียวยาวต่อกันถึงท้ายเว็บ
 * จัดตามพื้นหลังของเว็บ hololivepro.com ที่บริษัทส่งมาเป็นตัวอย่างเมื่อ 27 ต.ค. 2569
 * สีพื้น #f8f8f8 กับวงกลม #f4f4f4 วัดจากภาพหน้าจอเว็บตัวอย่าง วงกลมวาดด้วย radial-gradient ไม่ต้องใช้ไฟล์รูป
 * ขนาดวงกลมอิงความกว้างจอ (vw) แต่ไม่เล็กกว่าราว 240px จอมือถือจะได้ยังเห็นเป็นวงโค้งใหญ่
 * ==================== */
.soft-band {
    background:
        radial-gradient(circle at 0% 12%, #f4f4f4 0 max(26vw, 240px), transparent calc(max(26vw, 240px) + 1px)),
        radial-gradient(circle at 100% 50%, #f4f4f4 0 max(32vw, 260px), transparent calc(max(32vw, 260px) + 1px)),
        radial-gradient(circle at 15% 100%, #f4f4f4 0 max(24vw, 220px), transparent calc(max(24vw, 220px) + 1px)),
        #f8f8f8;
}

/* กล่องของแต่ละส่วนเคยมีพื้นสีมิ้นต์ เอาออกให้เห็นวงกลมของแถบข้างหลัง แบบเว็บตัวอย่างที่วางเนื้อหาบนพื้นตรง ๆ
   (ส่วน "ทำไมต้องเลือกเรา?" เคยใช้รูปใบเลื่อยโลโก้ KT เป็นพื้นหลังอยู่ช่วงสั้น ๆ วันเดียวกัน แล้วบริษัทขอเปลี่ยนเป็นแบบนี้) */
.soft-band .blade-video,
.soft-band .why-section,
.soft-band .social-section { background: transparent; }

/* ==================== พื้นหลังเนื้อหาของหน้าอื่น (about.php / contact.php / categories.php) ====================
 * แบบเดียวกับส่วน "เราคือใคร" หน้าแรก (บริษัทขอเมื่อ 27 ต.ค. 2569): พื้นเทาอ่อน วงกลมใหญ่สีเทาเข้มกว่านิดหนึ่ง
 * และตัวหนังสือใหญ่สีขาวเลื่อนช้า ๆ แต่คำที่เลื่อนเป็นหัวข้อของหน้านั้น (เช่น "ติดต่อเรา")
 * และอยู่ด้านบนตรงหัวเนื้อหา ไม่ได้อยู่กลางแถบ เพราะหน้าพวกนี้ยาว อยู่กลางจะไปโผล่กลางเนื้อหา
 * หน้ายาวจึงมีวงกลม 2 วง ซ้ายบนกับขวาล่าง
 * ==================== */
.page-band {
    position: relative;
    overflow: hidden;   /* ตัดตัวหนังสือใหญ่ที่ยาวเกินจอ ไม่ให้หน้าเว็บเลื่อนซ้ายขวาได้ */
    background:
        radial-gradient(circle at -5% 12%, #ececec 0 max(30vw, 260px), transparent calc(max(30vw, 260px) + 1px)),
        radial-gradient(circle at 105% 88%, #ececec 0 max(26vw, 220px), transparent calc(max(26vw, 220px) + 1px)),
        #f4f4f4;
}

.page-band .marquee { top: var(--space-4); transform: none; }

/* เนื้อหาขึ้นชั้นบนของตัวหนังสือใหญ่ และเว้นด้านบนเพิ่ม ให้เห็นตัวหนังสือใหญ่เป็นแถบหัวข้อก่อนถึงเนื้อหา
   จอคอมให้เนื้อหาทับครึ่งล่างของตัวหนังสือนิดหนึ่งแบบเว็บตัวอย่าง จอมือถือ (ตัวหนังสือสูง 5rem) เว้นอย่างน้อย 5.5rem
   ไม่งั้นการ์ดใบแรกบังตัวหนังสือเกือบหมด */
.page-band > .main-content { position: relative; padding-top: clamp(5.5rem, 8vw, 8rem); }

/* หน้าที่จบด้วยแถบพื้นเทา (.soft-band หน้าแรก / .page-band หน้าอื่น) ให้แถบชนท้ายเว็บพอดี
   ปกติท้ายเว็บเว้นด้านบนไว้ 3rem และจอมือถือ <main> เว้นด้านล่างไว้ 5rem กันปุ่มลอยบังเนื้อหา
   ที่ว่างพวกนี้กลายเป็นขอบพื้นขาวคั่นระหว่างแถบกับท้ายเว็บ จึงตัดออก แล้วย้ายที่เว้นกันปุ่มลอยเข้าไปอยู่ในแถบแทน
   (:has() ใช้ได้ในเบราว์เซอร์ปัจจุบันทุกตัว เบราว์เซอร์เก่ามาก ๆ จะเห็นขอบขาวแคบ ๆ เหมือนเดิม ไม่พัง) */
.page-content:has(> .soft-band:last-child, > .page-band:last-child) ~ footer { margin-top: 0; }

/* <main> สูงอย่างน้อย 60vh (.page-content) หน้าที่เนื้อหาสั้นบนจอสูง ๆ จะเหลือพื้นขาวใต้แถบ
   ให้ <main> เรียงลูกเป็นคอลัมน์ แล้วแถบสุดท้ายยืดเต็มที่ว่างที่เหลือ (flex-grow) */
.page-content:has(> .soft-band:last-child, > .page-band:last-child) { display: flex; flex-direction: column; }
.page-content > .soft-band:last-child, .page-content > .page-band:last-child { flex-grow: 1; }

@media (max-width: 768px) {
    .page-content:has(> .soft-band:last-child, > .page-band:last-child) { padding-bottom: 0; }

    .soft-band, .page-band { padding-bottom: 5rem; }
}

/* เมนูด้านข้างที่ปิดอยู่ ซ่อนด้วย visibility ด้วย ไม่ใช่แค่เลื่อนออกนอกจอ
   ไม่งั้นแป้นพิมพ์ยัง Tab เข้าไปโฟกัสลิงก์ในเมนูที่มองไม่เห็นได้ และโปรแกรมอ่านหน้าจอยังอ่านเมนูที่ปิดอยู่
   ตอนเปิด visibility เปลี่ยนทันที (0s) เพราะ JS ย้ายโฟกัสไปที่ปุ่มปิดในจังหวะเดียวกัน
   ตอนปิดรอ 0.3s ให้เมนูเลื่อนออกจบก่อนค่อยซ่อน หน้าตาตอนเลื่อนจึงเหมือนเดิม */
.sidebar { visibility: hidden; transition: transform 0.3s, visibility 0.3s; }
.sidebar.active { visibility: visible; transition: transform 0.3s, visibility 0s; }

/* ==================== โปสเตอร์ของประเภทสินค้า (categories.php) ====================
 * กดปุ่มดูรายละเอียดบนการ์ดประเภทไหน หน้าจะโหลดใหม่พร้อม ?type= แล้วโปสเตอร์
 * ของประเภทนั้นมาขึ้นตรงนี้ ใต้การ์ดทั้งสามใบ
 *
 * scroll-margin-top เผื่อไว้ให้แถบหัวเว็บที่ติดอยู่ด้านบน (position: sticky)
 * ไม่บังหัวข้อโปสเตอร์ตอนเบราว์เซอร์เลื่อนมาที่ #poster เอง
 * ==================== */
.poster-view {
    margin-top: var(--space-7);
    padding: var(--space-6);
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    scroll-margin-top: 90px;
}

.poster-title {
    font-size: var(--fs-xl);
    color: var(--dark-green);
    text-align: center;
    margin-bottom: var(--space-5);
}

/* โปสเตอร์เป็นรูปเต็มความกว้าง จำกัดไม่ให้กว้างเกิน 900px
   เพราะไฟล์โปสเตอร์เป็นแนวตั้ง ถ้าปล่อยเต็มจอคอมจะสูงจนต้องเลื่อนหลายรอบ
   โปสเตอร์หน้าถัดไป (poster_more) ใช้คลาสเดียวกัน จึงเรียงต่อลงมาข้างใต้ขนาดเท่ากัน */
.poster-image {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 0 auto var(--space-6);
    border-radius: var(--radius-md);
}

/* กรณีไม่มีทั้งไฟล์โปสเตอร์และรูปประจำประเภท จะได้กล่องไอคอนแทน
   ต้องสั่งความสูงเอง เพราะ .product-placeholder เดิมสูงตามการ์ดที่ครอบอยู่ */
.product-placeholder.poster-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1.414;
    font-size: var(--fs-3xl);
    background: var(--light-mint-pale);
}

/* การ์ดของประเภทที่กำลังเปิดดูอยู่ ตีกรอบไว้ให้รู้ว่าโปสเตอร์ข้างล่างเป็นของใบไหน */
.category-card-active { outline: 3px solid var(--teal); outline-offset: 2px; }

/* กล่องสอบถามใต้โปสเตอร์ในหน้าประเภทสินค้า
   เว็บชุดนี้ไม่มีตะกร้าและไม่มีระบบสั่งซื้อ จึงเป็นช่องทางติดต่อกลับบริษัท คือโทร LINE และอีเมล
   พื้นหลังอ่อนกับเส้นขอบทำให้กล่องนี้เด่นแยกออกจากโปสเตอร์ที่อยู่เหนือมัน */
.inquiry-box {
    margin-top: var(--space-5);
    padding: var(--space-5);
    background: var(--light-mint-pale);
    border: 1px solid var(--light-mint);
    border-radius: var(--radius-md);
}

.inquiry-box h3 {
    font-size: var(--fs-md);
    margin-bottom: var(--space-2);
}

.inquiry-box p {
    font-size: var(--fs-sm);
    color: var(--text-gray);
    margin-bottom: var(--space-4);
}

/* ปุ่มติดต่อเรียงแนวนอน ตกบรรทัดใหม่เองเมื่อจอแคบ (flex-wrap) ไม่ต้องเขียนกฎย่อสำหรับมือถือ */
.inquiry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

@media (max-width: 768px) {
    .poster-view { padding: var(--space-4); margin-top: var(--space-6); }
}

/* ==================== การใช้งานด้วยแป้นพิมพ์ ====================
 * ลูกค้าบางรายใช้แป้นพิมพ์หรือโปรแกรมอ่านหน้าจอแทนเมาส์
 * ต้องเห็นว่าโฟกัสอยู่ที่ไหน และข้ามเมนูไปที่เนื้อหาได้
 * ทั้งหมดนี้ไม่เปลี่ยนหน้าตาตอนใช้เมาส์ จึงไม่ทำให้ต่างจากเว็บฝั่งมหาวิทยาลัย
 * ==================== */

/* ลิงก์ข้ามเมนู ซ่อนไว้เหนือจอ เลื่อนลงมาให้เห็นเฉพาะตอนได้รับโฟกัส (กด Tab ครั้งแรกของหน้า) */
.skip-link {
    position: absolute; top: 0; left: var(--space-4);
    z-index: 3000;
    padding: var(--space-2) var(--space-4);
    background: var(--white); color: var(--dark-green);
    font-weight: 600; text-decoration: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-lg);
    transform: translateY(-120%);
}
.skip-link:focus { transform: translateY(0); }

/* กรอบโฟกัสเฉพาะตอนใช้แป้นพิมพ์ (:focus-visible) คลิกด้วยเมาส์ไม่ขึ้นกรอบ
   สีขาวตัดกับพื้นเขียวของหัวเว็บ เมนู ท้ายเว็บ และแบนเนอร์ สีเขียวเข้มตัดกับพื้นขาวของเนื้อหา */
:focus-visible { outline: 3px solid var(--dark-green); outline-offset: 2px; }
header :focus-visible, .sidebar :focus-visible, footer :focus-visible,
.hero :focus-visible, .cta-section :focus-visible { outline-color: var(--white); }
.quick-contact-fab :focus-visible { outline-color: var(--dark-green); outline-offset: 3px; }

/* <main> รับโฟกัสจากลิงก์ข้ามเมนูได้ แต่ไม่ต้องมีกรอบล้อมทั้งหน้า */
main:focus { outline: none; }

/* ลิงก์เบอร์โทรและอีเมลท้ายเว็บ สีเดียวกับข้อความรอบข้าง (หน้าตาเหมือนข้อความธรรมดา)
   ขีดเส้นใต้ตอนชี้ให้รู้ว่ากดได้ */
.footer-section a { color: inherit; text-decoration: none; }
.footer-section a:hover { text-decoration: underline; }

/* ผู้ใช้ที่ตั้งค่าระบบให้ลดการเคลื่อนไหว (เวียนหัวง่าย) ปิดแอนิเมชันทั้งหมด
   ใช้ transition: none ไม่ใช่ย่อเวลาเหลือ 0.01ms ตามสูตรที่เห็นทั่วไป เพราะเมนูด้านข้างต้องมองเห็นได้
   "ทันที" ที่เปิด (JS ย้ายโฟกัสเข้าไปในจังหวะเดียวกัน) ถ้ายังมี transition แม้สั้นแค่ไหน
   ณ จังหวะนั้นเมนูยังเป็น hidden อยู่ โฟกัสจะไม่ติด */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .skip-link { display: none !important; }
}