/* ==========================================================================
   หน้าถาม-ตอบ (frontend/qa) - index.blade.php (หน้ารวม) + show.blade.php (รายละเอียดคำถาม)
   โครงตาม mockup: แถบ breadcrumb สีเข้ม + banner กลางจอ + การ์ด 2 คอลัมน์
   ขนาดตัวอักษร/ระยะใช้สเกลเดียวกับหน้าอื่นของเว็บ (contact-us.css, home/news-events.css)
   ========================================================================== */

.qa-page {
    --qa-ink: var(--bs-primary-500, #002777);   /* หัวข้อ / ตัวเลข / ปุ่มหลัก */
    --qa-blue: #2d66cc;                           /* แท็บที่เลือก / ไอคอนคำถาม */
    --qa-text: #3a4668;                           /* เนื้อความ */
    --qa-muted: #454f69; /* 7:1 ขึ้นไป (AAA) */
    --qa-soft: #e6edf8;                           /* แท็บ / ป้าย / วงกลมไอคอน */
    --qa-panel: #f5f8fd;                          /* พื้นกล่องรายการในการ์ด */
    --qa-line: #e3e9f3;
    --qa-radius: 10px;
    --qa-shadow: 0 14px 44px rgba(33, 48, 105, 0.08);

    color: var(--qa-text);
    text-align: left;
}

/* กรอบเนื้อหา - ระยะเดียวกับแถบ breadcrumb (<x-breadcrumb variant="bar">) และ .bk-container ของ booking
   ขอบซ้ายของการ์ดจึงตรงแนวกับข้อความ breadcrumb ตาม mockup */
.qa-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4.5vw, 5.5rem);
}

/* ---------- banner + ช่องค้นหา ---------- */
.qa-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(240px, 18vw, 340px);
    padding: 2rem 1rem;
    position: relative;
    background: #0b3bb8;
    text-align: center;
    color: #fff;
}

/* รูป hero เป็นชั้นตกแต่ง ::after (ไม่ใช่ background ของ section) - ตัวตรวจ WCAG วัดคอนทราสต์ของหัวข้อได้
   (ขาวบนพื้น #0b3bb8 = 9.0:1) แทนที่จะขึ้นข้อควรระวัง "ข้อความอยู่บนรูปภาพพื้นหลัง" */
.qa-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--qa-hero-image) center / cover no-repeat;
}

.qa-hero > * {
    position: relative;
    z-index: 1;
}
.qa-hero.is-compact {
    min-height: 220px;
}
.qa-hero-inner {
    width: min(100%, 680px);
}
.qa-hero-title {
    font-weight: 800;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.2;
    color: #fff;
    margin: 0 0 0.5rem;
}
.qa-hero-desc {
    font-size: clamp(0.92rem, 1.1vw, 1.1rem);
    font-weight: 500;
    margin: 0 0 1.75rem;
}
.qa-hero-search {
    position: relative;
    display: flex;
    height: 50px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(4, 20, 70, 0.25);
}
.qa-hero-search:focus-within {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45), 0 10px 30px rgba(4, 20, 70, 0.25);
}
.qa-hero-search > i {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--qa-ink);
    font-size: 0.85rem;
}
.qa-hero-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    padding: 0 1rem 0 2.6rem;
    font-size: 0.92rem;
    color: var(--qa-ink);
    background: transparent;
}
.qa-hero-search input::placeholder {
    color: var(--qa-muted);
}
.qa-hero-search button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    border: 0;
    background: var(--qa-ink);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0 1.4rem;
    transition: background 0.2s;
}
.qa-hero-search button i {
    font-size: 0.8rem;
}
.qa-hero-search button:hover {
    background: var(--bs-primary-300, #202eab);
}

/* ---------- โครงการ์ด ---------- */
.qa-body {
    padding: 2.25rem 0 3rem;
}
/* ซ้าย: เนื้อหาหลัก | ขวา: แถบข้าง (.qa-side) - แต่ละฝั่งต่อการ์ดลงมาเอง ไม่ผูกความสูงกัน */
.qa-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 31%, 460px);
    gap: 1.75rem;
    align-items: start;
}
.qa-stack {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
}

.qa-card {
    background: #fff;
    border-radius: var(--qa-radius);
    box-shadow: var(--qa-shadow);
    padding: 1.75rem 2rem 2rem;
    min-width: 0;
    scroll-margin-top: 100px;
}
.qa-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.qa-card-title {
    font-weight: 800;
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--qa-ink);
    margin: 0 0 1.1rem;
}
.qa-card-foot {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

/* ปุ่มของหน้านี้ใช้ <x-button> / <x-see-more> (.btn-app ใน main.css) - ไม่ประกาศปุ่มของตัวเองแล้ว */
.qa-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--qa-blue);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}
.qa-link:hover {
    color: var(--qa-ink);
    text-decoration: underline;
}

/* ไอคอน "?" ในกรอบคำพูด (แถว FAQ + การ์ดถามคำถามใหม่) - วาดด้วย css ไม่ต้องใช้รูป */
.qa-q-ico {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    margin-bottom: 5px;
    border-radius: 7px;
    background: var(--qa-blue);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
}
.qa-q-ico::after {
    content: "";
    position: absolute;
    left: 5px;
    bottom: -5px;
    border-style: solid;
    border-width: 6px 7px 0 0;
    border-color: var(--qa-blue) transparent transparent transparent;
}
.qa-q-ico.is-lg {
    width: 46px;
    height: 38px;
    margin-bottom: 8px;
    border-radius: 10px;
    font-size: 1.3rem;
}
.qa-q-ico.is-lg::after {
    left: 8px;
    bottom: -8px;
    border-width: 9px 10px 0 0;
}

/* ระหว่าง ajax โหลด - หรี่กล่องไว้กันกดซ้ำ */
.qa-page .is-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* แถบแจ้งผล */
.qa-flash {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #e4f6ee;
    color: #157a53;
    border-radius: var(--qa-radius);
    padding: 0.8rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.qa-flash.err {
    background: #fdecec;
    color: #b32626;
}
.qa-flash[hidden] {
    display: none;
}

/* ---------- FAQ: แท็บหมวดหมู่ ---------- */
.qa-faq-tabs-wrap {
    position: relative;
    margin: 0 0 1.5rem;
}
.qa-faq-tabs {
    display: flex;
    gap: 0.75rem;
    /* หมวดเยอะเกินความกว้างการ์ด = เลื่อนแนวนอน (mockup ตัดแท็บสุดท้ายไว้ครึ่งตัว)
       ซ่อน scrollbar ไว้ - เมาส์ใช้การกดค้างลาก/ปุ่มลูกศรแทน (script.blade.php) */
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
}
.qa-faq-tabs::-webkit-scrollbar {
    display: none;
}
.qa-faq-tabs-wrap.is-scrollable .qa-faq-tabs {
    cursor: grab;
}
.qa-faq-tabs.is-dragging {
    cursor: grabbing !important;
}
/* ระหว่างลาก ไม่ให้แท็บที่เมาส์ผ่านเปลี่ยนสี hover กระพริบ */
.qa-faq-tabs.is-dragging .qa-faq-tab {
    pointer-events: none;
}

/* ขอบจาง + ปุ่มลูกศร ขึ้นเฉพาะฝั่งที่ยังมีแท็บซ่อนอยู่ */
.qa-faq-tabs-wrap::before,
.qa-faq-tabs-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 72px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.qa-faq-tabs-wrap::before {
    left: 0;
    background: linear-gradient(90deg, #fff 35%, rgba(255, 255, 255, 0));
}
.qa-faq-tabs-wrap::after {
    right: 0;
    background: linear-gradient(270deg, #fff 35%, rgba(255, 255, 255, 0));
}
.qa-faq-tabs-wrap.can-prev::before,
.qa-faq-tabs-wrap.can-next::after {
    opacity: 1;
}
.qa-faq-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--qa-ink);
    font-size: 0.75rem;
    box-shadow: 0 2px 10px rgba(33, 48, 105, 0.2);
    transition: background 0.2s, color 0.2s;
}
.qa-faq-arrow:hover {
    background: var(--qa-ink);
    color: #fff;
}
.qa-faq-arrow.is-prev { left: 0; }
.qa-faq-arrow.is-next { right: 0; }
.qa-faq-arrow[hidden] {
    display: none;
}
.qa-faq-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 1rem;
    border-radius: 4px;
    background: var(--qa-soft);
    color: var(--qa-ink);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.qa-faq-tab:hover {
    background: #d6e0f2;
    color: var(--qa-ink);
}
.qa-faq-tab.active {
    background: #1a47a0; /* ตัวขาว 8.6:1 (AAA) - เดิม --qa-blue 5.41:1 */
    color: #fff;
}

/* ---------- FAQ: รายการ (<details>) ---------- */
.qa-faq-list {
    background: var(--qa-panel);
    border-radius: var(--qa-radius);
    padding: 0 1rem;
}
.qa-faq-item + .qa-faq-item {
    border-top: 1px solid var(--qa-line);
}
.qa-faq-item summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "ico q cat chev";
    align-items: center;
    column-gap: 1rem;
    min-height: 58px;
    padding: 0.5rem 0;
    cursor: pointer;
    list-style: none;
}
.qa-faq-item summary::-webkit-details-marker {
    display: none;
}
.qa-faq-item summary:focus-visible {
    outline: 2px solid var(--qa-blue);
    outline-offset: 2px;
    border-radius: 4px;
}
.qa-faq-item .qa-q-ico {
    grid-area: ico;
}
.qa-faq-q {
    grid-area: q;
    color: var(--qa-ink);
    font-size: 0.95rem;
    line-height: 1.5;
}
.qa-faq-item summary:hover .qa-faq-q {
    color: var(--qa-blue);
}
.qa-faq-cat {
    grid-area: cat;
    color: var(--qa-text);
    font-size: 0.88rem;
    white-space: nowrap;
}
.qa-faq-chev {
    grid-area: chev;
    color: var(--qa-ink);
    font-size: 0.75rem;
    transition: transform 0.2s;
}
.qa-faq-item[open] .qa-faq-chev {
    transform: rotate(180deg);
}
.qa-faq-a {
    margin: -0.15rem 0 1rem calc(30px + 1rem);
    padding: 0.9rem 1.1rem;
    background: #fff;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-radius);
}
.qa-faq-a-by {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #1a8a5e;
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
}
.qa-faq-a-text {
    color: var(--qa-text);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0 0 0.6rem;
}
.qa-faq-empty {
    background: var(--qa-panel);
    border-radius: var(--qa-radius);
}

/* ---------- ถามคำถามใหม่ ---------- */
.qa-ask {
    text-align: center;
}
.qa-ask .qa-card-title {
    text-align: left;
}
.qa-ask-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--qa-soft);
}
.qa-ask-text {
    color: var(--qa-text);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 1.25rem;
}
.qa-ask-note {
    color: var(--qa-muted);
    font-size: 0.8rem;
    margin: 0.5rem 0 0;
}

/* ---------- หมวดหมู่คำถาม ---------- */
.qa-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.qa-cat-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    color: var(--qa-text);
    font-size: 0.92rem;
    text-decoration: none;
    transition: color 0.2s;
}
.qa-cat-list b {
    color: var(--qa-ink);
    font-weight: 700;
}
.qa-cat-list a:hover,
.qa-cat-list a.active,
.qa-cat-list a.active b {
    color: var(--qa-blue);
}

/* ---------- คำถามล่าสุด / ผลการค้นหา ---------- */
.qa-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: -0.25rem 0 1rem;
}
.qa-filter {
    background: var(--qa-soft);
    color: var(--qa-ink);
    border-radius: 4px;
    padding: 0.15rem 0.7rem;
    font-size: 0.82rem;
}
.qa-filter-count {
    color: var(--qa-muted);
    font-size: 0.82rem;
    margin-left: 0.25rem;
}

.qa-post {
    position: relative;
    display: flex;
    gap: 1rem;
    background: var(--qa-panel);
    border-radius: var(--qa-radius);
    padding: 1.1rem 1.25rem;
    transition: box-shadow 0.2s;
}
.qa-post + .qa-post {
    margin-top: 0.85rem;
}
.qa-post:hover {
    box-shadow: inset 0 0 0 1px #c9d6ee;
}
.qa-post-avatar {
    flex: 0 0 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--qa-soft);
    color: var(--qa-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
}
.qa-post-avatar.is-sm {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    font-size: 0.6rem;
}
.qa-post-body {
    flex: 1;
    min-width: 0;
}
.qa-post-head {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.qa-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    background: var(--qa-soft);
    color: var(--qa-text);
    border-radius: 4px;
    padding: 0.1rem 0.6rem;
    font-size: 0.78rem;
    text-decoration: none;
}
a.qa-chip.is-cat:hover {
    background: #d6e0f2;
    color: var(--qa-ink);
}
.qa-post-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
    margin: 0;
    min-width: 0;
}
.qa-post-title a {
    color: var(--qa-ink);
    text-decoration: none;
}
/* ยืดลิงก์หัวเรื่องให้กดได้ทั้งการ์ด */
.qa-post-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--qa-radius);
}
.qa-post-title a:hover {
    color: var(--qa-blue);
}
.qa-post-title a:focus-visible {
    outline: none;
}
.qa-post-title a:focus-visible::after {
    outline: 2px solid var(--qa-blue);
    outline-offset: 2px;
}
.qa-post-excerpt {
    color: var(--qa-text);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0.35rem 0 0;
    /* ตัดเหลือ 2 บรรทัด */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.qa-post-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.25rem;
    margin-top: 0.75rem;
}
.qa-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    color: var(--qa-ink);
    font-size: 0.85rem;
    font-weight: 600;
}
.qa-post-meta > span + span::before {
    content: "•";
    margin: 0 0.6rem;
}
.qa-post-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--qa-text);
    font-size: 0.85rem;
}
.qa-post-stats i {
    color: var(--qa-ink);
    font-size: 0.8rem;
    margin-right: 0.25rem;
}

/* สถานะคำถาม (การ์ดคำถาม + หน้ารายละเอียด) */
.qa-status {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.05rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
}
.qa-status.is-pending {
    background: #e2eaf8;
    border-color: #9fb3dc;
    color: #16398c; /* เดิม #1d4fb8 (6.1:1) - WCAG AAA 7:1 */
}
.qa-status.is-answered {
    background: #e4f6ee;
    border-color: #a7dcc4;
    color: #0b5a3a; /* 7.4:1 (AAA) - เดิม #157a53 4.75:1 */
}

/* เลขหน้า (pagination ของ bootstrap) */
.qa-pager {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}
.qa-pager .pagination {
    margin: 0;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.qa-pager .page-link {
    border: 0;
    border-radius: 4px;
    min-width: 34px;
    text-align: center;
    color: var(--qa-text);
    font-size: 0.85rem;
    font-weight: 600;
}
.qa-pager .page-link:hover {
    background: var(--qa-soft);
    color: var(--qa-ink);
}
.qa-pager .page-item.active .page-link {
    background: var(--qa-ink);
    color: #fff;
}
.qa-pager .page-item.disabled .page-link {
    color: #c6cddd;
    background: transparent;
}

/* ---------- สถิติการใช้งาน ---------- */
.qa-usage-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
}
.qa-usage-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.qa-usage-icon {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.qa-usage-icon.is-blue   { background: #e3ecfb; color: #1f5fd6; }
.qa-usage-icon.is-sky    { background: #e3f0fd; color: #2b73e0; }
.qa-usage-icon.is-orange { background: #fdefe2; color: #f07b1d; }
.qa-usage-icon.is-red    { background: #fde8ea; color: #e0343d; }
.qa-usage-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.qa-usage-text .l {
    color: var(--qa-text);
    font-size: 0.85rem;
    line-height: 1.3;
}
.qa-usage-text .v {
    color: var(--qa-ink);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
}

/* ==========================================================================
   หน้ารายละเอียดคำถาม (partial_detail.blade.php)
   ========================================================================== */
.qa-detail-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.qa-detail-top-btns {
    display: flex;
    gap: 1rem;
}
.qa-back,
.qa-share {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--qa-ink);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    transition: color 0.2s;
}
.qa-back:hover,
.qa-share:hover {
    color: var(--qa-blue);
}
.qa-share.on {
    color: #e8963a;
}
.qa-detail-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.qa-detail-title {
    color: var(--qa-ink);
    font-weight: 800;
    font-size: 1.3rem;
    line-height: 1.5;
    margin: 0.6rem 0 0.75rem;
}
.qa-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    color: var(--qa-muted);
    font-size: 0.8rem;
}
.qa-meta i {
    margin-right: 0.3rem;
}
.qa-detail-meta {
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--qa-line);
}
.qa-by {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--qa-ink);
    font-weight: 600;
}
.qa-detail-text {
    color: var(--qa-text);
    font-size: 0.92rem;
    line-height: 1.8;
    margin: 1.1rem 0 0;
}
.qa-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.qa-tag {
    background: var(--qa-panel);
    color: var(--qa-text);
    font-size: 0.78rem;
    border-radius: 4px;
    padding: 0.15rem 0.65rem;
}

/* คำตอบ */
.qa-answer-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin: 1.75rem 0 0.9rem;
}
.qa-answer-count {
    color: var(--qa-ink);
    font-weight: 800;
    font-size: 1.05rem;
    margin: 0;
}
.qa-answer-sort {
    color: var(--qa-muted);
    font-size: 0.8rem;
}
.qa-answer-sort b {
    color: var(--qa-ink);
}
.qa-answer {
    background: var(--qa-panel);
    border: 1px solid transparent;
    border-radius: var(--qa-radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: 0.85rem;
}
.qa-answer.best {
    background: #f2fbf6;
    border-color: #b9e5d0;
}
.qa-answer-best {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #1a8a5e;
    font-weight: 700;
    font-size: 0.85rem;
    margin: 0 0 0.75rem;
}
.qa-answer-author {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}
.qa-avatar {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--qa-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* รูปโปรไฟล์มาจาก helper getAvatarImage() (มี fallback + onerror ในตัว) */
.qa-avatar-img {
    border-radius: 50%;
    object-fit: cover;
    background: var(--qa-soft);
}
.qa-answer-author .n {
    color: var(--qa-ink);
    font-weight: 700;
    font-size: 0.88rem;
    margin: 0;
}
.qa-answer-author .t {
    color: var(--qa-muted);
    font-size: 0.76rem;
    margin: 0;
}
.qa-answer-body {
    color: var(--qa-text);
    font-size: 0.9rem;
    line-height: 1.8;
    margin: 0;
}
.qa-answer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.qa-act {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid var(--qa-line);
    border-radius: 4px;
    padding: 0.3rem 0.85rem;
    color: var(--qa-text);
    font-size: 0.8rem;
    font-weight: 600;
    transition: 0.2s;
}
.qa-act:hover,
.qa-act.on {
    border-color: var(--qa-blue);
    color: var(--qa-blue);
}
.qa-act.on {
    background: #eef3fc;
}
.qa-no-answer {
    color: var(--qa-muted);
    font-size: 0.88rem;
    background: var(--qa-panel);
    border-radius: var(--qa-radius);
    padding: 1.25rem;
    margin: 0;
    text-align: center;
}

/* ฟอร์มตอบคำถาม */
.qa-answer-form {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--qa-line);
    scroll-margin-top: 100px;
}
.qa-answer-form-title {
    color: var(--qa-ink);
    font-weight: 800;
    font-size: 1rem;
    margin: 0 0 0.75rem;
}
.qa-answer-form textarea,
.qa-input {
    width: 100%;
    border: 1px solid #dfe5f1;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    color: var(--qa-ink);
    background: #fff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.qa-answer-form textarea {
    resize: vertical;
    margin-bottom: 0.85rem;
}
.qa-answer-form textarea:focus,
.qa-input:focus {
    border-color: var(--qa-blue);
    box-shadow: 0 0 0 3px rgba(45, 102, 204, 0.15);
}
.qa-err {
    color: var(--bs-secondary);
    font-size: 0.82rem;
    margin: -0.4rem 0 0.75rem;
}
.qa-login-note {
    color: var(--qa-text);
    font-size: 0.9rem;
    margin: 0;
}
.qa-login-note a {
    color: var(--qa-blue);
    font-weight: 700;
}

/* ---------- คิวกลั่นกรอง: สถานะคำถาม/คำตอบของเจ้าของที่ยังไม่เผยแพร่ ---------- */
.qa-review {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    border: 1px solid #fcd34d;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.92rem;
}
.qa-review i { margin-top: 0.2rem; }
.qa-review p { margin: 0.25rem 0 0; color: var(--qa-text); white-space: pre-line; }
.qa-review.is-revision { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
.qa-review.is-rejected { border-color: #fca5a5; background: #fef2f2; color: #b91c1c; }
.qa-revise {
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--qa-line);
    border-radius: 10px;
}
.qa-revise summary { cursor: pointer; font-weight: 700; color: var(--qa-ink); margin-bottom: 0.75rem; }
.qa-answer.is-mine-pending { opacity: 0.85; border-style: dashed; }
.qa-answer-review {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
}

/* ---------- modal ถามคำถามใหม่ ---------- */
.qa-modal {
    border: 0;
    border-radius: 12px;
}
.qa-modal .modal-header,
.qa-modal .modal-footer {
    border-color: var(--qa-line);
    padding: 1.1rem 1.5rem;
}
.qa-modal .modal-title {
    color: var(--qa-ink);
    font-weight: 800;
    font-size: 1.15rem;
}
.qa-modal .modal-body {
    padding: 1.25rem 1.5rem;
}
.qa-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}
.qa-field label {
    color: var(--qa-ink);
    font-weight: 600;
    font-size: 0.88rem;
}
.qa-field .req {
    color: #8f1218; /* 7:1 ขึ้นไป (AAA) */
}
.qa-modal .qa-err {
    margin: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* จอแคบ: คอลัมน์เดียว เนื้อหาหลักก่อน แล้วค่อยแถบข้าง (ถามคำถาม + หมวดหมู่วางคู่กัน สถิติเต็มแถว) */
@media (max-width: 1199.98px) {
    .qa-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .qa-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
    .qa-side .qa-usage {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .qa-body {
        padding: 1.5rem 0 2rem;
    }
    .qa-card {
        padding: 1.5rem 1.25rem;
    }
    .qa-side {
        grid-template-columns: minmax(0, 1fr);
    }
    .qa-post {
        padding: 1rem;
        gap: 0.8rem;
    }
    .qa-post-avatar {
        flex-basis: 40px;
        height: 40px;
        font-size: 0.85rem;
    }
    .qa-post-head {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    /* หมวดของ FAQ ย้ายลงไปใต้คำถาม */
    .qa-faq-list {
        padding: 0 0.85rem;
    }
    .qa-faq-item summary {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "ico q   chev"
            "ico cat chev";
        column-gap: 0.8rem;
        row-gap: 0.1rem;
        padding: 0.75rem 0;
    }
    .qa-faq-cat {
        font-size: 0.8rem;
        color: var(--qa-muted);
    }
    .qa-faq-a {
        margin-left: 0;
    }
    .qa-hero-search button span,
    .qa-hero-search > i {
        display: none;
    }
    .qa-hero-search input {
        padding-left: 1rem;
    }
    .qa-post-avatar {
        display: none;
    }
    .qa-detail-top {
        flex-wrap: wrap;
    }
    .qa-answer-actions .ms-auto {
        margin-left: 0 !important;
    }
}

/* ==========================================================================
   กล่องคำถามล่าสุด: ปุ่มกรอง "ตอบแล้ว / ยังไม่ตอบ" + กดคำถามแล้วกางคำตอบใต้การ์ด (ตาม mockup)
   partial_list (.qa-item > .qa-post + .qa-thread) / partial_thread (.qa-reply) / js: togglePost ใน script.blade.php
   ========================================================================== */
.qa-page {
    --qa-open: #2f67f6;        /* การ์ดคำถามที่กางอยู่ / ปุ่มกรองที่เลือก / ป้าย "คำตอบ" */
    --qa-reply-bg: #dfe7f6;    /* กล่องคำตอบ */
    --qa-reply-ink: #1b2a5c;
}

.qa-list .qa-card-head {
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.qa-list .qa-card-title {
    margin: 0;
}
.qa-list-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem 1rem;
}
.qa-status-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.qa-status-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 42px;
    padding: 0.4rem 1.25rem;
    border-radius: 4px;
    background: #e9ebef;
    color: #3a4258; /* 8.4:1 (AAA) - เดิม #616978 4.63:1 */
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.qa-status-tab:hover {
    background: #dde2ea;
    color: var(--qa-text);
}
.qa-status-tab.is-on,
.qa-status-tab.is-on:hover {
    background: var(--qa-open);
    color: #fff;
}

.qa-item + .qa-item {
    margin-top: 0.85rem;
}

/* การ์ดคำถามที่กางอยู่: พื้นน้ำเงิน ตัวหนังสือขาว */
.qa-post.is-open {
    background: var(--qa-open);
    box-shadow: none;
}
.qa-post.is-open .qa-post-avatar {
    background: #fff;
    color: var(--qa-open);
}
.qa-post.is-open .qa-chip {
    background: #fff;
    color: var(--qa-ink);
}
.qa-post.is-open .qa-post-title a,
.qa-post.is-open .qa-post-title a:hover {
    color: #fff;
}
.qa-post.is-open .qa-post-title a:focus-visible::after {
    outline-color: #fff;
}
.qa-post.is-open .qa-post-excerpt {
    color: rgba(255, 255, 255, 0.92);
    display: block;            /* กางแล้วแสดงรายละเอียดครบ ไม่ตัด 2 บรรทัด */
    -webkit-line-clamp: unset;
}
.qa-post.is-open .qa-post-meta,
.qa-post.is-open .qa-post-stats,
.qa-post.is-open .qa-post-stats i {
    color: #fff;
}
.qa-post.is-open .qa-status {
    background: #fff;
    border-color: #fff;
}

/* คำตอบใต้การ์ด - เยื้องเข้ามาจากขอบซ้ายของการ์ด */
.qa-thread {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0 0 2.6rem;
}
.qa-thread[hidden] {
    display: none;
}
.qa-reply {
    background: var(--qa-reply-bg);
    border-radius: var(--qa-radius);
    padding: 0.9rem 1.1rem 1rem;
    color: var(--qa-reply-ink);
}
.qa-reply-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
}
.qa-chip.is-answer {
    background: var(--qa-open);
    color: #fff;
}
.qa-reply-meta {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
}
.qa-reply-meta > span + span::before {
    content: "•";
    margin: 0 0.6rem;
}
.qa-reply-best {
    margin-left: auto;
    color: #157a53;
    font-size: 0.8rem;
    font-weight: 600;
}
.qa-reply-body {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}
.qa-thread-loading,
.qa-thread-empty {
    margin: 0;
    padding: 0.85rem 1.1rem;
    border-radius: var(--qa-radius);
    background: var(--qa-reply-bg);
    color: var(--qa-reply-ink);
    font-size: 0.88rem;
}
.qa-thread-loading i,
.qa-thread-empty i {
    margin-right: 0.35rem;
}
.qa-thread-foot {
    display: flex;
    justify-content: flex-end;
}

/* หน้ารายละเอียด: ฟอร์มตอบ (เฉพาะเจ้าหน้าที่) */
.qa-answer-form-note {
    color: var(--qa-muted);
    font-size: 0.8em;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .qa-list-tools,
    .qa-status-tabs {
        width: 100%;
    }
    .qa-status-tab {
        flex: 1;
        min-width: 0;
    }
    .qa-thread {
        margin-left: 1rem;
    }
}

/* รูปโปรไฟล์ในวงกลม (การ์ดคำถาม / ผู้ถามในหน้ารายละเอียด / ผู้ตอบในกล่องคำตอบที่กางออก) */
.qa-post-avatar,
.qa-reply-avatar {
    overflow: hidden;
}
.qa-post-avatar img,
.qa-reply-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.qa-post.is-open .qa-post-avatar {
    box-shadow: 0 0 0 2px #fff;
}
.qa-reply-avatar {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
}

/* FAQ ที่แอดมินกำหนด (partial_faq): คำตอบที่กางออกเป็นแถบฟ้าอ่อนเต็มความกว้างรายการ ตาม mockup */
.qa-faq-list {
    overflow: hidden;          /* ข้อสุดท้ายกางออก มุมล่างยังโค้งตามกล่อง */
}
.qa-faq-a {
    margin: 0 -1rem;
    padding: 1rem 1.5rem 1.15rem calc(1rem + 30px + 1rem);
    background: var(--qa-reply-bg);
    border: 0;
    border-radius: 0;
}
.qa-faq-a .qa-faq-a-text {
    margin: 0;
    color: var(--qa-reply-ink);
    font-size: 0.92rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* คำตอบ FAQ เป็น html จากตัวแก้ไขหลังบ้าน (ย่อหน้า / รายการ / ลิงก์ / ตัวหนา-เอียง) */
.qa-faq-a .qa-faq-a-text > :first-child {
    margin-top: 0;
}
.qa-faq-a .qa-faq-a-text > :last-child {
    margin-bottom: 0;
}
.qa-faq-a .qa-faq-a-text p {
    margin: 0 0 0.6em;
}
.qa-faq-a .qa-faq-a-text ul,
.qa-faq-a .qa-faq-a-text ol {
    margin: 0 0 0.6em;
    padding-left: 1.4em;
}
.qa-faq-a .qa-faq-a-text li + li {
    margin-top: 0.35em;
}
.qa-faq-a .qa-faq-a-text a {
    color: var(--qa-blue);
    text-decoration: underline;
}

/* ==========================================================================
   ถามคำถามใหม่: ฟอร์มกางในกล่อง (section_ask) แทน modal - ตาม mockup
   เปิด/ปิดแบบ animate ด้วย grid-template-rows 0fr → 1fr (สูงเท่าเนื้อหาจริง ไม่ต้องกำหนด max-height)
   ========================================================================== */
/* ปุ่ม "ถามคำถามใหม่" = <x-button variant="blue"> - ไอคอน + หมุนเป็น × ตอนฟอร์มกางอยู่ */
.js-qa-ask-toggle i {
    transition: transform 0.3s;
}
.js-qa-ask-toggle[aria-expanded="true"] i {
    transform: rotate(45deg);
}

.qa-ask-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.4s ease, opacity 0.3s ease;
}
.qa-ask-panel.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}
.qa-ask-panel-inner {
    min-height: 0;
    overflow: hidden;
}
.qa-ask-form {
    padding: 1.6rem 0.15rem 0.25rem;
    text-align: left;
    transform: translateY(-8px);
    transition: transform 0.4s ease;
}
.qa-ask-panel.is-open .qa-ask-form {
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .qa-ask-panel,
    .qa-ask-form,
    .js-qa-ask-toggle i {
        transition: none;
    }
}

.qa-ask-form .qa-field {
    margin-bottom: 1.25rem;
}
.qa-ask-form .qa-field label,
.qa-field-label {
    color: var(--qa-ink);
    font-weight: 700;
    font-size: 0.95rem;
}
.qa-ask-form .qa-input {
    background: #f5f8fd;
    border-color: #c9d1df;
    border-radius: 4px;
    padding: 0.7rem 0.9rem;
    font-size: 0.92rem;
}
.qa-ask-form .qa-input::placeholder {
    color: #8b93a7;
}
.qa-ask-form select.qa-input {
    background-color: #fff;
}
.qa-ask-form textarea.qa-input {
    resize: vertical;
    min-height: 140px;
}
.qa-ask-form .qa-input.is-invalid {
    border-color: var(--bs-secondary, #d82028);
}

/* ตัวนับตัวอักษร (ขวาของป้ายช่อง) - ใกล้เต็มสีส้ม / เต็มสีแดง */
.qa-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.qa-count {
    flex-shrink: 0;
    color: var(--qa-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.qa-count.is-near {
    color: #b7791f;
}
.qa-count.is-full {
    color: var(--bs-secondary, #d82028);
    font-weight: 600;
}

/* ไฟล์แนบ: กล่องเส้นประ (กด/ลากไฟล์มาวาง) + รายการไฟล์ที่เลือก */
.qa-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.1rem 1rem 1.2rem;
    border: 1px dashed #c9d1df;
    border-radius: 6px;
    background: #f5f8fd;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.qa-drop:hover,
.qa-drop:focus-visible,
.qa-drop.is-over {
    border-color: var(--qa-open);
    background: #edf2fd;
    outline: none;
}
.qa-drop.is-full {
    cursor: not-allowed;
    opacity: 0.6;
}
.qa-drop-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.3rem;
    border-radius: 50%;
    background: var(--qa-soft);
    color: var(--qa-ink);
    font-size: 0.85rem;
}
.qa-drop-title {
    color: var(--qa-ink);
    font-weight: 700;
    font-size: 0.88rem;
}
.qa-drop-title u {
    text-underline-offset: 2px;
}
.qa-drop-hint {
    color: var(--qa-muted);
    font-size: 0.82rem;
    line-height: 1.6;
}
.qa-drop-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.qa-drop-list:empty {
    display: none;
}
.qa-drop-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--qa-line);
    border-radius: 6px;
    background: #fff;
    font-size: 0.82rem;
}
.qa-drop-thumb {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--qa-soft);
    color: #c0392b;
    object-fit: cover;
}
.qa-drop-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--qa-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qa-drop-size {
    flex-shrink: 0;
    color: var(--qa-muted);
}
.qa-drop-del {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9aa3b8;
    cursor: pointer;
}
.qa-drop-del:hover {
    background: #fdecec;
    color: var(--bs-secondary, #d82028);
}

.qa-ask-form .qa-err {
    margin: -0.25rem 0 0.9rem;
}
.qa-ask-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    margin-top: 0.5rem;
}

/* ไฟล์แนบของคำถาม (หน้าคำถาม - partial_detail) */
.qa-files {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.25rem 0 1rem;
    padding: 0;
}
.qa-file {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 280px;
    padding: 0.4rem 0.7rem 0.4rem 0.4rem;
    border: 1px solid var(--qa-line);
    border-radius: 8px;
    background: #fff;
    color: var(--qa-ink);
    font-size: 0.82rem;
    text-decoration: none;
    transition: border-color 0.2s;
}
.qa-file:hover {
    border-color: var(--qa-blue);
    color: var(--qa-ink);
}
.qa-file img,
.qa-file > i {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
}
.qa-file > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fdecec;
    color: #c0392b;
    font-size: 1.1rem;
}
.qa-file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qa-file-size {
    flex-shrink: 0;
    color: var(--qa-muted);
}

/* ==========================================================================
   หน้าคำถามทั้งหมด (frontend/qa/all) - แถบเครื่องมือ: ดรอปดาวน์มีป้าย (หมวดหมู่ / เรียงลำดับตาม) ซ้าย + ปุ่มสถานะขวา
   ดรอปดาวน์ = component select-dropdown (.app-dd-labeled ใน main.css) ขนาดเดียวกับหน้ารายการของ mrta-booking/news
   ========================================================================== */
.qa-all-page .qa-body {
    padding-top: 2.5rem;
}
.qa-all-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.9rem;
}
.qa-all-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}
.qa-all-toolbar .app-dd {
    width: 320px;
    min-width: 0;
}
.qa-all-toolbar .app-dd-toggle {
    height: 42px;
    background: #fff;
    font-size: 0.95rem;
}
.qa-all-toolbar .qa-status-tab {
    min-width: 128px;
    min-height: 42px;
    font-size: 1rem;
}
.qa-all-list {
    padding: 1.6rem;
}
.qa-all-pager .pagination-custom {
    margin-top: 2.25rem;
}
@media (max-width: 767.98px) {
    .qa-all-filters,
    .qa-all-toolbar .app-dd,
    .qa-all-toolbar .qa-status-tabs {
        width: 100%;
    }
    .qa-all-toolbar .qa-status-tab {
        flex: 1;
        min-width: 0;
    }
    .qa-all-list {
        padding: 1rem;
    }
}