/*
 * FAQ Module – Stylesheet
 * File: catalog/view/theme/[theme]/stylesheet/faq.css
 * Màu chủ đạo: #eb3e32
 */

/* ========== Variables ========== */
:root {
  --faq-primary:    #eb3e32;
  --faq-primary-dk: #c92e23;
  --faq-text:       #1a1a2e;
  --faq-text-muted: #6b7280;
  --faq-border:     #e5e7eb;
  --faq-white:      #ffffff;
  --faq-radius:     10px;
  --faq-font:       'Segoe UI','Helvetica Neue',Arial,sans-serif;
}



/* ========== home.tpl ========== */
.faq-hero {
  background:linear-gradient(135deg,#eb3e32 0%,#f16256 60%,#f9a09a 100%);
  padding:52px 20px 44px;text-align:center;position:relative;overflow:hidden;
}
.faq-hero::before {
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.faq-hero h1 { font-family:var(--faq-font);font-size:2.2rem;font-weight:700;color:#fff;margin:0 0 24px;position:relative;text-shadow:0 2px 8px rgba(0,0,0,.15); }
.faq-search-wrap { max-width:560px;margin:0 auto;position:relative; }
.faq-search-wrap input { width:100%;padding:14px 52px 14px 20px;border:none;border-radius:40px;font-size:1rem;outline:none;box-shadow:0 4px 20px rgba(0,0,0,.15);color:var(--faq-text);box-sizing:border-box; }
.faq-search-wrap button { position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--faq-primary);border:none;border-radius:50%;width:38px;height:38px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s; }
.faq-search-wrap button:hover { background:var(--faq-primary-dk); }
.faq-wrap { max-width:1100px;margin:0 auto;padding:0 20px 60px;font-family:var(--faq-font);color:var(--faq-text); }
.faq-section-hd { border-left:4px solid var(--faq-primary);padding-left:14px;margin:44px 0 8px; }
.faq-section-hd h2 { font-size:18px;font-weight:700;margin:0 0 4px;text-transform:uppercase;letter-spacing:.03em; }
.faq-section-hd p  { font-size:.9rem;color:var(--faq-text-muted);margin:0; }
.faq-cat-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px; }
@media(max-width:768px){.faq-cat-grid{grid-template-columns:repeat(2,1fr);}.faq-hero h1{font-size:1.5rem;}}
@media(max-width:480px){.faq-cat-grid{grid-template-columns:1fr;}}
.faq-cat-card { display:flex;align-items:flex-start;gap:14px;background:var(--faq-white);border:1px solid var(--faq-border);border-radius:var(--faq-radius);padding:18px 16px;text-decoration:none;color:var(--faq-text);transition:box-shadow .2s,border-color .2s,transform .2s; }
.faq-cat-card:hover { box-shadow:0 6px 24px rgba(235,62,50,.18);border-color:var(--faq-primary);transform:translateY(-2px);color:var(--faq-text);text-decoration:none; }
.faq-cat-icon { width:44px;height:44px;flex-shrink:0;background:#fff0ef;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--faq-primary); }
.faq-cat-info h3 { font-size:16px;font-weight:600;margin:0 0 4px; }
.faq-cat-info p  { font-size:14px;color:var(--faq-text-muted);margin:0;line-height:1.4; }
.faq-accordion { margin-top:20px;display:grid;grid-template-columns:repeat(2,1fr); }
@media(max-width:640px){.faq-accordion{grid-template-columns:1fr;}}
.faq-acc-item { border:1px solid var(--faq-border);margin:-1px 0 0 -1px;background:var(--faq-white); }
.faq-acc-btn { width:100%;text-align:left;background:none;border:none;padding:16px 46px 16px 16px;cursor:pointer;font-family:var(--faq-font);font-weight:600;color:var(--faq-text);position:relative;line-height:1.4;transition:color .2s;display:flex;align-items:flex-start;gap:10px; }
.faq-acc-btn:hover { color:var(--faq-primary); }
.faq-acc-num { display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;background:var(--faq-primary);color:#fff;border-radius:50%;font-size:.75rem;font-weight:700;flex-shrink:0;margin-top:1px; }
.faq-acc-btn .faq-chevron { position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;transition:transform .25s; }
.faq-acc-item.open .faq-chevron { transform:translateY(-50%) rotate(180deg); }
.faq-acc-meta { font-size:14px;color:var(--faq-text-muted);padding:0 16px 4px 50px; }
.faq-acc-body { display:none;padding:0 16px 14px 50px; }
.faq-acc-body a { font-size:16px;color:var(--faq-primary);text-decoration:none;font-weight:500; }
.faq-acc-item.open .faq-acc-body { display:block; }
.faq-actions { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px; }
.faq-btn-outline { padding:10px 24px;border:2px solid var(--faq-primary);border-radius:40px;color:var(--faq-primary);background:transparent;font-weight:600;text-decoration:none;transition:background .2s,color .2s; }
.faq-btn-outline:hover { background:var(--faq-primary);color:#fff;text-decoration:none; }
.faq-btn-solid { padding:10px 28px;border:none;border-radius:40px;background:var(--faq-primary);color:#fff;font-weight:700;text-decoration:none;display:inline-block;transition:background .2s; }
.faq-btn-solid:hover { background:var(--faq-primary-dk);color:#fff;text-decoration:none; }
/* faq-support-title/desc handled inside .faq-support-info */
.faq-form-row { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px; }
@media(max-width:560px){.faq-form-row{grid-template-columns:1fr;}}
.faq-fc { width:100%;padding:10px 14px;border:1px solid var(--faq-border);border-radius:6px;font-family:var(--faq-font);color:var(--faq-text);background:var(--faq-white);box-sizing:border-box;transition:border-color .2s; }
.faq-fc:focus { outline:none;border-color:var(--faq-primary); }
textarea.faq-fc { resize:vertical; }

/* ========== category.tpl ========== */
.faq-hero { background:linear-gradient(135deg,#eb3e32 0%,#f16256 60%,#f9a09a 100%);padding:40px 20px 36px;text-align:center;position:relative;overflow:hidden; }
.faq-hero::before { content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.faq-hero h1 { font-family:var(--faq-font);font-size:2rem;font-weight:700;color:#fff;margin:0 0 20px;position:relative;text-shadow:0 2px 8px rgba(0,0,0,.15); }
.faq-search-wrap { max-width:560px;margin:0 auto;position:relative; }
.faq-search-wrap input { width:100%;padding:13px 50px 13px 20px;border:none;border-radius:40px;font-size:1rem;outline:none;box-shadow:0 4px 20px rgba(0,0,0,.15);color:var(--faq-text);box-sizing:border-box; }
.faq-search-wrap button { position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--faq-primary);border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s; }
.faq-search-wrap button:hover { background:var(--faq-primary-dk); }
.faq-breadcrumb { display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:16px 0 0;font-size:14px;color:var(--faq-text-muted); }
.faq-breadcrumb a { color:var(--faq-primary);text-decoration:none; }
.faq-breadcrumb a:hover { text-decoration:underline; }
.faq-section-hd { border-left:4px solid var(--faq-primary);padding-left:14px;margin:28px 0 20px; }
.faq-section-hd h2 { font-size:1.1rem;font-weight:700;margin:0 0 4px;text-transform:uppercase;letter-spacing:.03em; }
.faq-section-hd p  { font-size:16px;color:var(--faq-text-muted);margin:0; }
.faq-table-wrap { background:var(--faq-white);border:1px solid var(--faq-border);border-radius:var(--faq-radius);overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.07); }
.faq-table { width:100%;border-collapse:collapse;font-size:.9rem; }
.faq-table thead tr { background:#fafafa;border-bottom:2px solid var(--faq-border); }
.faq-table th { padding:12px 14px;text-align:left;font-weight:600;color:var(--faq-text-muted);font-size:14px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap; }
.faq-table th.tc,.faq-table td.tc { text-align:center; }
.faq-table tbody tr { border-bottom:1px solid var(--faq-border);transition:background .15s; }
.faq-table tbody tr:last-child { border-bottom:none; }
.faq-table tbody tr:hover { background:#fff1f0; }
.faq-table td { padding:14px;vertical-align:middle;color:var(--faq-text);line-height:1.4;text-align:left;font-size:16px; }
.faq-table td.faq-no { width:44px;text-align:center;font-weight:700;color:var(--faq-primary);font-size:16px; }
.faq-table td.faq-title a { font-weight:600;color:var(--faq-text);text-decoration:none;display:block;margin-bottom:2px; }
.faq-table td.faq-title a:hover { color:var(--faq-primary); }
.faq-table td.faq-title .faq-meta { font-size:14px;color:var(--faq-text-muted); }
.faq-stat { display:inline-flex;align-items:center;gap:4px;font-size:.82rem;color:var(--faq-text-muted); }
.faq-pagination-wrap { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:16px 0 0;font-size:16px;color:var(--faq-text-muted); }
.faq-empty { text-align:center;padding:52px 20px;color:var(--faq-text-muted); }
.faq-empty i { font-size:2.5rem;margin-bottom:12px;display:block;color:var(--faq-border); }
@media(max-width:640px){.faq-table th.hide-sm,.faq-table td.hide-sm{display:none;}.faq-hero h1{font-size:1.5rem;}}

/* ========== detail.tpl ========== */
.faq-hero { background:linear-gradient(135deg,#eb3e32 0%,#f16256 60%,#f9a09a 100%);padding:40px 20px 36px;text-align:center;position:relative;overflow:hidden; }
.faq-hero::before { content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.faq-hero h1 { font-family:var(--faq-font);font-size:1.9rem;font-weight:700;color:#fff;margin:0 0 20px;position:relative;text-shadow:0 2px 8px rgba(0,0,0,.15); }
.faq-search-wrap { max-width:560px;margin:0 auto;position:relative; }
.faq-search-wrap input { width:100%;padding:13px 50px 13px 20px;border:none;border-radius:40px;font-size:1rem;outline:none;box-shadow:0 4px 20px rgba(0,0,0,.15);color:var(--faq-text);box-sizing:border-box; }
.faq-search-wrap button { position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--faq-primary);border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s; }
.faq-search-wrap button:hover { background:var(--faq-primary-dk); }
.faq-breadcrumb { display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:16px 0 0;font-size:.85rem;color:var(--faq-text-muted); }
.faq-breadcrumb a { color:var(--faq-primary);text-decoration:none; }
.faq-breadcrumb a:hover { text-decoration:underline; }
.faq-card { background:var(--faq-white);border:1px solid var(--faq-border);border-radius:var(--faq-radius);box-shadow:0 2px 12px rgba(0,0,0,.07);margin-top:20px;overflow:hidden; }
.faq-card-hd { padding:28px 28px 20px;border-bottom:1px solid var(--faq-border); }
.faq-card-hd h1 { font-size:1.35rem;font-weight:700;color:var(--faq-text);margin:0 0 12px;line-height:1.4; }
.faq-card-meta { display:flex;flex-wrap:wrap;gap:16px;font-size:.82rem;color:var(--faq-text-muted); }
.faq-card-meta span { display:inline-flex;align-items:center;gap:5px; }
.faq-card-body { padding:24px 28px;font-size:16px;line-height:1.75;color:var(--faq-text);border-bottom:1px solid var(--faq-border); }
.faq-card-body ul,.faq-card-body ol { padding-left:24px;margin:12px 0; }
.faq-card-body li { margin-bottom:6px; }
.faq-card-body p  { margin:0 0 12px; }
.faq-card-body a  { color:var(--faq-primary); }
.faq-prevnext { display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--faq-border); }
.faq-prev-item,.faq-next-item { padding:16px 20px;text-decoration:none;color:var(--faq-text);transition:background .15s; }
.faq-prev-item:hover,.faq-next-item:hover { background:#fff1f0;text-decoration:none;color:var(--faq-text); }
.faq-next-item { text-align:right;border-left:1px solid var(--faq-border); }
.faq-pn-label { font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faq-text-muted);margin-bottom:4px;display:flex;align-items:center;gap:5px; }
.faq-next-item .faq-pn-label { justify-content:flex-end; }
.faq-pn-title { font-size:16px;font-weight:600;line-height:1.35; }
.faq-pn-empty { padding:16px 20px; }
.faq-pn-empty.next { border-left:1px solid var(--faq-border); }
.faq-card-ft { padding:18px 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px; }
.faq-share { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.faq-share-label { font-size:.85rem;color:var(--faq-text-muted);font-weight:500; }
.faq-share-btn { display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;text-decoration:none;transition:opacity .2s,transform .15s;font-size:16px;color:#fff; }
.faq-share-btn svg{
    width:16px;
    height:16px;
}
.faq-share-btn svg path{
    fill:#fff
}
.faq-share-btn:hover { opacity:.85;transform:scale(1.1);text-decoration:none; }
.faq-share-btn.copy { background:#6b7280; }
.faq-share-btn.fb   { background:#1877f2; }
.faq-share-btn.msg {
    background: linear-gradient(135deg, #7ecbff, #e3c2ff);
}
.faq-share-btn.tg   { background:#26a5e4; }
.faq-vote { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.faq-vote-label { font-size:.85rem;color:var(--faq-text-muted); }
.faq-vote-btn { display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:40px;border:1.5px solid var(--faq-border);background:var(--faq-white);font-size:.85rem;font-family:var(--faq-font);cursor:pointer;transition:border-color .2s,background .2s,color .2s;color:var(--faq-text-muted); }
.faq-vote-btn:hover { border-color:var(--faq-primary);color:var(--faq-primary); }
.faq-vote-btn.voted-like    { border-color:#16a34a;background:#f0fdf4;color:#16a34a; }
.faq-vote-btn.voted-dislike { border-color:#dc2626;background:#fef2f2;color:#dc2626; }
.faq-vote-btn:disabled { cursor:default;opacity:.6; }
/* faq-support detail overrides removed - see 2-col layout below */
.faq-form-row { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px; }
.faq-fc { width:100%;padding:10px 14px;border:1px solid var(--faq-border);border-radius:6px;font-size:.9rem;font-family:var(--faq-font);color:var(--faq-text);background:var(--faq-white);box-sizing:border-box;transition:border-color .2s; }
.faq-fc:focus { outline:none;border-color:var(--faq-primary); }
textarea.faq-fc { resize:vertical; }
.faq-btn-solid { padding:10px 28px;border:none;border-radius:40px;background:var(--faq-primary);color:#fff;font-weight:700;cursor:pointer;font-family:var(--faq-font);transition:background .2s; }
.faq-btn-solid:hover { background:var(--faq-primary-dk); }
.faq-toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#1a1a2e;color:#fff;padding:10px 22px;border-radius:40px;font-size:16px;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;z-index:9999; }
.faq-toast.show { opacity:1;transform:translateX(-50%) translateY(0); }
@media(max-width:560px){
  .faq-form-row{grid-template-columns:1fr;}
  .faq-prevnext{grid-template-columns:1fr;}
  .faq-next-item{border-left:none;border-top:1px solid var(--faq-border);text-align:left;}
  .faq-next-item .faq-pn-label{justify-content:flex-start;}
  .faq-pn-empty.next{border-left:none;border-top:1px solid var(--faq-border);}
  .faq-card-hd{padding:20px;}
  .faq-card-body{padding:18px 20px;}
  .faq-card-ft{padding:14px 20px;}
  .faq-hero h1{font-size:1.4rem;}
}

/* ========== Form contact feedback ========== */
/* faq-support-hd/bd overrides removed - see 2-col layout below */
.faq-form-msg      { padding:10px 16px;border-radius:6px;font-size:.9rem;margin-bottom:14px;line-height:1.5; }
.faq-form-msg--success { background:#f0fdf4;border:1px solid #86efac;color:#16a34a; }
.faq-form-msg--error   { background:#fef2f2;border:1px solid #fca5a5;color:#dc2626; }

/* ========== Detail content body ========== */
.faq-detail-content { line-height:1.8;color:var(--faq-text); }
.faq-detail-content p  { margin:0 0 14px; }
.faq-detail-content ul,
.faq-detail-content ol { padding-left:24px;margin:0 0 14px; }
.faq-detail-content li { margin-bottom:6px; }
.faq-detail-content a  { color:var(--faq-primary);text-decoration:underline; }
.faq-detail-content a:hover { color:var(--faq-primary-dk); }
.faq-detail-content img { max-width:100%;height:auto;border-radius:6px; }
.faq-detail-content table { width:100%;border-collapse:collapse;margin:0 0 14px; }
.faq-detail-content table th,
.faq-detail-content table td { padding:8px 12px;border:1px solid var(--faq-border); }
.faq-detail-content table th { background:#fafafa;font-weight:600; }
.faq-detail-content blockquote { border-left:4px solid var(--faq-primary);padding:10px 16px;margin:0 0 14px;background:#fff0ef;border-radius:0 6px 6px 0; }

/* ========== Support form – Layout 2 cột ========== */
.faq-support{
    margin-top:2rem;
    margin-bottom:2rem;
}
.faq-support-inner {
  display:grid;
  grid-template-columns:1fr 2fr;
  min-height:280px;
}

/* Cột trái: thông tin công ty */
.faq-support-info {
  background:var(--faq-primary);
  padding:32px 28px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.faq-support-info::before {
  content:'';
  position:absolute;
  width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.08);
  bottom:-60px;left:-60px;
}
.faq-support-info::after {
  content:'';
  position:absolute;
  width:120px;height:120px;border-radius:50%;
  background:rgba(255,255,255,.06);
  top:-30px;right:-30px;
}
.faq-support-title {
  font-size:1.1rem;font-weight:700;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 10px;
  position:relative;z-index:1;
  border:none;padding:0; /* reset border-left cũ */
}
.faq-support-desc {
  font-size:16px;
  color:rgba(255,255,255,.85);
  margin:0 0 24px;
  line-height:1.6;
  position:relative;z-index:1;
}
.faq-company-item {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:14px;
  font-size:16px;
  color:rgba(255,255,255,.9);
  position:relative;z-index:1;
}
.faq-company-item i {
  width:18px;flex-shrink:0;margin-top:2px;font-size:1rem;
}

/* Cột phải: form */
.faq-support-bd {
  background:var(--faq-white);
  padding:28px;
}

/* Responsive */
@media(max-width:640px){
  .faq-support-inner { grid-template-columns:1fr; }
}
@media(max-width:560px){
  .faq-form-row { grid-template-columns:1fr; }
  .faq-support-info { padding:24px 20px; }
  .faq-support-bd { padding:20px; }
}

/* ========== Sidebar câu hỏi liên quan ========== */
.faq-related-aside { padding-left:20px;margin-top:20px; }
.faq-related {
  background:var(--faq-white);
  border:1px solid var(--faq-border);
  border-radius:var(--faq-radius);
  overflow:hidden;
  position:sticky;
  top:20px;
}
.faq-related-hd {
  background:#fafafa;
  border-bottom:2px solid var(--faq-primary);
  padding:14px 16px;
  font-size:.88rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--faq-text);
  display:flex;
  align-items:center;
  gap:8px;
}
.faq-related-hd i { color:var(--faq-primary); font-size:1rem; }
.faq-related-list {
  list-style:none;
  margin:0;
  padding:0;
}
.faq-related-item {
  border-bottom:1px solid var(--faq-border);
}
.faq-related-item:last-child { border-bottom:none; }
.faq-related-item a {
  display:block;
  padding:11px 16px;
  font-size:.87rem;
  color:var(--faq-text);
  text-decoration:none;
  line-height:1.45;
  transition:background .15s, color .15s;
  position:relative;
  padding-left:28px;
}
.faq-related-item a::before {
  content:'›';
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--faq-primary);
  font-size:1.1rem;
  font-weight:700;
  line-height:1;
}
.faq-related-item a:hover {
  background:#fff1f0;
  color:var(--faq-primary);
  text-decoration:none;
}
@media(max-width:767px){
  .faq-related-aside { padding-left:0; margin-top:20px; }
  .faq-related { position:static; }
}