/* Hỏi nha sĩ — danh sách, biểu mẫu thu gọn, thẻ câu hỏi, trang chi tiết & câu trả lời. Chỉ trong .p-qa (trang chủ vẫn dùng thẻ hỏi đáp cũ). Màu mục: --sec (hồng tím). */
.p-qa{--qa-sec:var(--sec,#c2409b);--qa-sec-s:var(--sec-s,#fbeaf5)}
/* đầu trang */
.p-qa .phead{align-items:flex-end;gap:18px}
.p-qa .phead h1{font-size:30px;letter-spacing:-.9px;margin:2px 0 6px}
.p-qa .phead p{max-width:62ch;font-size:13.5px;line-height:1.65;color:var(--ink-2);text-wrap:pretty;margin:0}
.p-qa .phead .stats{display:grid;grid-template-columns:repeat(3,minmax(92px,1fr));gap:8px}
.p-qa .phead .stat{padding:10px 12px}
.p-qa .phead .stat small{display:flex;gap:4px;align-items:center;line-height:1.3}
/* 5 bước: thanh gọn, vuốt ngang trên điện thoại */
.p-qa .flow{display:flex;gap:8px;border:0;background:none;margin-top:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 6px;scrollbar-width:none}
.p-qa .flow::-webkit-scrollbar{display:none}
.p-qa .flow>div{flex:1 0 176px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;align-items:center;font-size:11.5px;line-height:1.35;color:var(--ink-3)}
.p-qa .flow>div+div{border-left:1px solid var(--line)}
.p-qa .flow .ic{width:28px;height:28px;font-size:15px}
.p-qa .flow b{font-size:12.5px;margin-bottom:1px}
/* ô "Đặt câu hỏi": thanh mời hỏi, bấm mới mở biểu mẫu (không cần JS) */
.p-qa .askf-wrap{margin:0 0 14px}
.p-qa .ask-bar{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);background:linear-gradient(135deg,var(--qa-sec),#9a2f7a);color:#fff;cursor:pointer;list-style:none;box-shadow:0 10px 22px -14px rgba(154,47,122,.9);transition:transform .15s,box-shadow .15s}
.p-qa .ask-bar::-webkit-details-marker{display:none}
.p-qa .ask-bar:hover{transform:translateY(-1px)}
.p-qa .ask-bar:focus-visible{outline:3px solid var(--qa-sec-s);outline-offset:2px}
.p-qa .ask-ic{flex:none;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:22px}
.p-qa .ask-tx{display:grid;gap:2px;min-width:0;flex:1}
.p-qa .ask-tx b{font-size:16px;letter-spacing:-.3px}
.p-qa .ask-tx small{font-size:12px;line-height:1.4;color:rgba(255,255,255,.86)}
.p-qa .ask-go{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#fff;color:var(--qa-sec);font-size:12.5px;font-weight:800}
.p-qa .ask-go i{font-size:12px;transition:transform .2s}
.p-qa .askf-wrap[open] .ask-go i{transform:rotate(180deg)}
.p-qa .ask-go-c{display:none}
.p-qa .askf-wrap[open] .ask-go-o{display:none}
.p-qa .askf-wrap[open] .ask-go-c{display:inline}
.p-qa .askf-wrap[open] .ask-bar{border-radius:var(--r) var(--r) 0 0;box-shadow:none}
.p-qa .askf-wrap .askf{margin:0;border-radius:0 0 var(--r) var(--r);border-top:0}
.p-qa .askf-wrap .askf-hd{display:none}
/* bộ lọc + tìm */
.p-qa .pills{margin-top:2px}
.p-qa .sbox2{margin-top:10px}
.p-qa .tbar{margin-top:10px}
/* thẻ câu hỏi */
.p-qa .qa{padding:16px 18px;margin-bottom:12px;border-radius:var(--r);transition:border-color .15s,box-shadow .15s}
.p-qa .qa:hover{border-color:#e4c4d8;box-shadow:0 8px 20px -16px rgba(154,47,122,.55)}
.p-qa .qa .q{gap:0}
.p-qa .qa .q .qi{display:none}
.p-qa .qa .q a b{font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.2px;color:var(--ink);text-wrap:balance}
.p-qa .qa .q a:hover b{color:var(--qa-sec)}
.p-qa .qa .q small{display:block;margin-top:4px;font-size:12px;line-height:1.5}
.p-qa .qa .a{margin:12px 0 0;border-left:0;border-radius:var(--r-s);background:#f6f8fb;padding:12px 14px;font-size:13.5px;line-height:1.65}
.p-qa .qa .a .who{flex-wrap:wrap;row-gap:4px;margin-bottom:6px}
.p-qa .qa .a .who .av{width:28px;height:28px;border-radius:8px;font-size:10.5px}
.p-qa .qa .a .who>span:not(.av){font-size:12px}
.p-qa .qa .ft{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line-2);gap:6px 16px;font-size:12px}
.p-qa .qa .ft a:last-child{display:inline-flex;gap:4px;align-items:center}
.p-qa .qa .ft a:last-child::after{content:"→"}
/* chi tiết câu hỏi */
.p-qa .qdet{max-width:none}
.p-qa .qdet .qbox{padding:20px 22px}
.p-qa .qdet .qbox .cat{display:inline-flex;gap:5px;align-items:center;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:var(--qa-sec-s);color:var(--qa-sec)!important}
.p-qa .qdet h1{font-size:26px;line-height:1.28;letter-spacing:-.7px;margin:10px 0 10px;text-wrap:balance}
.p-qa .qdet .meta-l{display:flex;flex-wrap:wrap;gap:6px}
.p-qa .qdet .meta-l span{display:inline-flex;gap:5px;align-items:center;padding:3px 10px;border-radius:999px;background:var(--bg-2);font-size:12px;color:var(--ink-3)}
.p-qa .qdet .qtxt{margin:14px 0 0;background:var(--bg-2);border-radius:0 var(--r-s) var(--r-s) 0;border-left:3px solid var(--qa-sec);padding:13px 16px;font-size:15px;line-height:1.7}
.p-qa .qdet .qtxt p{margin:0 0 8px}.p-qa .qdet .qtxt p:last-child{margin:0}
.p-qa .qdet .abox{margin-top:14px;padding:20px 22px;border:1px solid #cfeadf;border-left:1px solid #cfeadf;border-top:3px solid var(--mint);background:linear-gradient(180deg,#f6fcfa,#fff 120px)}
.p-qa .qdet .abox .who{grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:12px;padding-bottom:14px}
.p-qa .qdet .abox .who .dav{position:relative;width:52px!important;height:68px!important;min-height:0;font-size:16px!important;padding-bottom:0!important;align-self:start;overflow:visible}
.p-qa .qdet .abox .who .dav .ok{position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;color:var(--mint);font-size:16px}
.p-qa .qdet .abox .who>div{min-width:0}
.p-qa .qdet .abox .who b{font-size:15.5px}
.p-qa .qdet .abox .who small{margin-top:3px;line-height:1.5}
.p-qa .qdet .abox>p{max-width:68ch;font-size:15.5px;line-height:1.8}
.p-qa .qdet .vote{flex-wrap:wrap;gap:8px 10px;margin-top:10px}
.p-qa .qdet .disc{margin-top:16px;padding-top:12px;font-size:11.5px;line-height:1.5}
/* điện thoại */
@media (max-width:760px){
  .p-qa .phead{display:grid;gap:12px;align-items:start}
  .p-qa .phead h1{font-size:26px}
  .p-qa .phead .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .p-qa .phead .stat small{font-size:11px}
  .p-qa .flow>div{flex-basis:164px}
  .p-qa .ask-bar{padding:12px 14px;gap:11px}
  .p-qa .ask-ic{width:38px;height:38px;font-size:20px}
  .p-qa .ask-tx b{font-size:15px}
  .p-qa .ask-tx small{font-size:11.5px}
  .p-qa .ask-go{padding:0;width:34px;height:34px;justify-content:center;border-radius:50%}
  .p-qa .ask-go-o,.p-qa .ask-go-c,.p-qa .askf-wrap[open] .ask-go-c{display:none}
  .p-qa .qa{padding:14px}
  .p-qa .qa .q a b{font-size:15px}
  .p-qa .qdet .qbox,.p-qa .qdet .abox{padding:16px 14px}
  .p-qa .qdet h1{font-size:22px}
  .p-qa .qdet .abox .who{grid-template-columns:auto minmax(0,1fr)}
  .p-qa .qdet .abox .who .btn{grid-column:1/-1;margin-left:0;justify-content:center;min-height:40px}
  .p-qa .qdet .abox>p{font-size:15px}
  .p-qa .qdet .vote .btn{min-height:40px}
}

/* ===== Thẻ hỏi đáp có màu (trang Hỏi nha sĩ + cụm "Hỏi – nha sĩ trả lời" ở trang chủ) ===== */
.p-qa .qa,.hqa .qa{--qt:var(--blue);--qt-s:#e6efff;--qt-d:#1f62d6;position:relative;border-radius:var(--r);border:1px solid var(--line);background:#fff;overflow:hidden}
.qa.qt1{--qt:#0c9c79;--qt-s:#dff5ee;--qt-d:#0a7d61}
.qa.qt2{--qt:#ef7d1a;--qt-s:#ffeedd;--qt-d:#c4620d}
.qa.qt3{--qt:#6b4fd8;--qt-s:#ece7ff;--qt-d:#4a31b8}
.qa.qt4{--qt:#d6456b;--qt-s:#ffe6ec;--qt-d:#b02a50}
.p-qa .qa::before,.hqa .qa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--qt)}
.p-qa .qa .q,.hqa .qa .q{display:flex;gap:11px;align-items:flex-start}
.p-qa .qa .q .qi,.hqa .qa .q .qi{display:grid!important;flex:none;width:34px;height:34px;border-radius:10px;background:var(--qt);color:#fff;font-size:18px;place-items:center}
.hqa .qa .q a b{font-size:14px;font-weight:600;line-height:1.4;color:var(--ink)}
.p-qa .qa .q a:hover b,.hqa .qa .q a:hover b{color:var(--qt-d)}
.p-qa .qa .q small,.hqa .qa .q small{color:var(--ink-3)}
/* khối trả lời của nha sĩ: nền xanh bạc hà đậm hơn, avatar đặc */
.p-qa .qa .a,.hqa .qa .a{border-left:3px solid var(--mint);border-radius:0 var(--r-s) var(--r-s) 0;background:linear-gradient(100deg,#d8f3ea,#eefaf6 70%);color:#1f3a33}
.hqa .qa .a{margin:10px 0 0;padding:10px 12px}
.p-qa .qa .a .who .av,.hqa .qa .a .who .av{background:var(--mint)!important;color:#fff!important;border-radius:8px;width:28px;height:28px;font-size:10.5px}
.p-qa .qa .a .who b,.hqa .qa .a .who b{color:#0f3d32}
.p-qa .qa .a .who>span:not(.av),.hqa .qa .a .who>span:not(.av){color:#3f6b5e!important}
.p-qa .qa .ft,.hqa .qa .ft{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line-2);color:var(--ink-2)}
.p-qa .qa .ft a:last-child,.hqa .qa .ft a:last-child{color:var(--qt-d)!important}
.hqa .qa .ft{flex-wrap:wrap;gap:6px 14px;font-size:11.5px}
.hqa .qa{padding:14px 16px 12px 18px}
.hqa .qa .ft a:last-child{margin-left:auto;font-weight:700}
.hqa .qa .ft a:last-child::after{content:" →"}

/* Làm dịu: bỏ vạch màu bên trái, khối trả lời nền nhạt bo tròn đều, chỉ giữ màu ở ô biểu tượng theo chủ đề */
.p-qa .qa::before,.hqa .qa::before{content:none}
.p-qa .qa,.hqa .qa{border-color:var(--line-2,#eef1f4);box-shadow:0 1px 2px rgba(20,33,61,.04)}
.p-qa .qa:hover,.hqa .qa:hover{border-color:var(--line);box-shadow:0 10px 24px -18px rgba(20,33,61,.35)}
.hqa .qa{padding:14px 16px 12px}
.p-qa .qa .q .qi,.hqa .qa .q .qi{background:var(--qt-s);color:var(--qt-d);border-radius:10px}
.p-qa .qa .a,.hqa .qa .a{border-left:0;border-radius:var(--r);background:#f5faf8;color:var(--ink-2)}
.p-qa .qa .a .who .av,.hqa .qa .a .who .av{background:#dcf2ea!important;color:#0a7d61!important}
.p-qa .qa .a .who b,.hqa .qa .a .who b{color:var(--ink)}
.p-qa .qa .a .who>span:not(.av),.hqa .qa .a .who>span:not(.av){color:var(--ink-3)!important}
.p-qa .qa .ft,.hqa .qa .ft{border-top-color:var(--line-2,#eef1f4)}