/* /chung/trao-doi/trao-doi.css — KHỐI TRAO ĐỔI DÙNG CHUNG · bản 1.0.0 (NV-TTLX-CHAT-1, 06/10/2026). Tiền tố lớp `trd-`.
   Dùng biến màu của khuôn chung (/chung/khuon/khuon.css, --gdc-*); thiếu khuôn thì rơi về giá trị dự phòng ghi kèm. */
.trd{font-family:var(--gdc-phong,system-ui,sans-serif);color:var(--gdc-chu,#1B2433);background:#fff;border:1px solid var(--gdc-vien,#DCE2EC);border-radius:12px;display:flex;flex-direction:column;min-height:320px;box-sizing:border-box}
.trd *{box-sizing:border-box}
.trd-dau{padding:12px 16px;border-bottom:1px solid var(--gdc-vien-nhat,#EBEFF5);display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--gdc-chu-phu,#4A5568)}
.trd-dau button{border:1px solid var(--gdc-vien,#DCE2EC);background:#fff;border-radius:16px;height:30px;padding:0 12px;font:600 12.5px var(--gdc-phong,system-ui,sans-serif);color:var(--gdc-chu,#1B2433);cursor:pointer}
.trd-dau button:hover{background:var(--gdc-nen-phu,#F6F8FB)}
.trd-tv{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px}
.trd-tv span{background:var(--gdc-nen-phu,#F6F8FB);border-radius:13px;padding:3px 10px;font-size:12.5px}
.trd-tv span b{font-weight:600;color:var(--gdc-chu,#1B2433)}
.trd-ds{flex:1 1 auto;padding:16px;display:flex;flex-direction:column;gap:12px;max-height:56vh;overflow-y:auto;background:var(--gdc-nen-nhom,#FAFBFD)}
.trd-rong{margin:auto;color:var(--gdc-chu-phu,#4A5568);font-size:14px;text-align:center;padding:24px}
.trd-ngay{align-self:center;font-size:12px;color:var(--gdc-chu-mo,#8A94A6);background:#fff;border:1px solid var(--gdc-vien-nhat,#EBEFF5);border-radius:11px;padding:2px 10px}
.trd-moi{align-self:stretch;text-align:center;font-size:12px;font-weight:700;color:var(--gdc-chinh,#2443B8);border-top:1px solid var(--gdc-chinh,#2443B8);padding-top:4px}
.trd-tin{max-width:min(640px,86%);align-self:flex-start}
.trd-tin.toi{align-self:flex-end}
.trd-ai{font-size:12.5px;color:var(--gdc-chu-phu,#4A5568);margin:0 4px 3px}
.trd-ai b{color:var(--gdc-chu,#1B2433);font-weight:600}
.trd-tin.toi .trd-ai{text-align:right}
.trd-bong{background:#fff;border:1px solid var(--gdc-vien,#DCE2EC);border-radius:12px;padding:10px 14px;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.trd-tin.toi .trd-bong{background:var(--gdc-xanh-nen,#E7EDFB);border-color:#CFDAF6}
.trd-bong .nhac{color:var(--gdc-chinh,#2443B8);font-weight:600}
.trd-tep{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.trd-tep button{display:inline-flex;align-items:center;gap:6px;max-width:100%;border:1px solid var(--gdc-vien,#DCE2EC);background:#fff;border-radius:8px;padding:6px 10px;font:500 13px var(--gdc-phong,system-ui,sans-serif);color:var(--gdc-chu,#1B2433);cursor:pointer;text-align:left}
.trd-tep button:hover{background:var(--gdc-nen-phu,#F6F8FB)}
.trd-tep button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.trd-tep button small{color:var(--gdc-chu-mo,#8A94A6);font-size:12px;flex:0 0 auto}
.trd-soan{flex:none;position:relative;border-top:1px solid var(--gdc-vien-nhat,#EBEFF5);padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.trd-soan textarea{display:block;width:100%;box-sizing:border-box;min-height:76px;max-height:none;overflow-y:hidden;padding:10px 12px;border:1px solid var(--gdc-vien,#DCE2EC);border-radius:8px;font:400 15px/1.5 var(--gdc-phong,system-ui,sans-serif);color:var(--gdc-chu,#1B2433);resize:none}
.trd-ghi-phim{margin-left:auto;padding:3px 8px;border-radius:6px;background:var(--gdc-nen-phu,#F6F8FB);color:#4a5568;font-size:12px;white-space:nowrap}
.trd-ghi-phim + .gdc-nut:last-child{margin-left:0}
.trd-soan textarea:focus{outline:2px solid var(--gdc-chinh,#2443B8);outline-offset:0;border-color:var(--gdc-chinh,#2443B8)}
.trd-hang{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.trd-hang .gdc-nut:last-child{margin-left:auto}
.trd-cho{display:flex;flex-wrap:wrap;gap:6px}
.trd-cho span{display:inline-flex;align-items:center;gap:6px;background:var(--gdc-nen-phu,#F6F8FB);border:1px solid var(--gdc-vien-nhat,#EBEFF5);border-radius:8px;padding:4px 6px 4px 10px;font-size:12.5px}
.trd-cho button{border:0;background:none;cursor:pointer;color:var(--gdc-chu-phu,#4A5568);font-size:15px;line-height:1;padding:2px 4px}
.trd-loi{background:var(--gdc-do-nen,#FDE8E6);color:var(--gdc-do,#A1281D);border-radius:8px;padding:8px 12px;font-size:13.5px;font-weight:600}
.trd-goi-y{position:absolute;left:16px;right:16px;bottom:100%;margin-bottom:4px;background:#fff;border:1px solid var(--gdc-vien,#DCE2EC);border-radius:10px;box-shadow:0 12px 32px rgba(27,36,51,.18);max-height:220px;overflow:auto;padding:6px;z-index:5}
.trd-goi-y button{display:block;width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:8px 10px;font:600 14px var(--gdc-phong,system-ui,sans-serif);color:var(--gdc-chu,#1B2433);cursor:pointer}
.trd-goi-y button small{display:block;font-weight:400;font-size:12.5px;color:var(--gdc-chu-phu,#4A5568)}
.trd-goi-y button:hover,.trd-goi-y button.chon{background:var(--gdc-nen-phu,#F6F8FB)}
.trd-chi-xem{padding:12px 16px;border-top:1px solid var(--gdc-vien-nhat,#EBEFF5);font-size:13.5px;color:var(--gdc-chu-phu,#4A5568)}
/* xem ảnh / PDF ngay trong trang */
.trd-xem{position:fixed;inset:0;z-index:260;background:rgba(27,36,51,.72);display:flex;flex-direction:column}
.trd-xem-dau{display:flex;align-items:center;gap:12px;padding:10px 16px;color:#fff;font:600 14px var(--gdc-phong,system-ui,sans-serif)}
.trd-xem-dau span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trd-xem-dau button,.trd-xem-dau a{border:1px solid rgba(255,255,255,.5);background:none;color:#fff;border-radius:8px;height:36px;padding:0 14px;font:600 13.5px var(--gdc-phong,system-ui,sans-serif);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.trd-xem-than{flex:1 1 auto;display:flex;align-items:center;justify-content:center;overflow:auto;padding:0 12px 12px}
.trd-xem-than img{max-width:100%;max-height:100%;background:#fff;border-radius:6px}
.trd-xem-than iframe{width:min(1000px,100%);height:100%;border:0;background:#fff;border-radius:6px}
/* ngăn trượt bên phải (màn chưa có thẻ Trao đổi riêng) */
.trd-ngan-nen{position:fixed;inset:0;z-index:240;background:rgba(27,36,51,.42);display:flex;justify-content:flex-end}
.trd-ngan{width:min(560px,100%);height:100%;background:var(--gdc-nen,#F3F5F9);display:flex;flex-direction:column;box-shadow:-12px 0 32px rgba(27,36,51,.18)}
.trd-ngan-dau{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border-bottom:1px solid var(--gdc-vien,#DCE2EC);font:700 16px var(--gdc-phong,system-ui,sans-serif);color:var(--gdc-chu,#1B2433)}
.trd-ngan-dau span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trd-ngan-than{flex:1 1 auto;overflow:auto;padding:12px}
.trd-ngan-than .trd{min-height:100%}
.trd-ngan-than .trd-ds{max-height:none}
@media (max-width:1023px),(pointer:coarse){.trd-ghi-phim{display:none}.trd-ghi-phim + .gdc-nut:last-child{margin-left:auto}}
@media (max-width:899px){
  .trd-ds{max-height:none;padding:12px}
  .trd-tin{max-width:92%}
  .trd-soan textarea{font-size:16px}
  .trd-ngan-than{padding:0}
  .trd-ngan-than .trd{border:0;border-radius:0}
}