:root {
  --nen: #f6f7f9; --the: #fff; --chu: #1d2330; --mo: #5d6677; --vien: #dde1e8;
  --chinh: #0f6b5c; --chinh-dam: #0b5246; --canh-bao: #9a5b00; --nen-canh-bao: #fff4e0;
  --nguy: #a3261f; --nen-nguy: #fdecea; --ok: #1d6b2f;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --nen: #14171c; --the: #1d2128; --chu: #e6e9ef; --mo: #9aa3b2; --vien: #313743;
    --chinh: #3fb39d; --chinh-dam: #5cc8b3; --canh-bao: #f0b35a; --nen-canh-bao: #3a2c14;
    --nguy: #f08a83; --nen-nguy: #3a1d1b; --ok: #6fd08a;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--nen); color: var(--chu); font: 15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif; }
.dau, main, .the { max-width: 960px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4rem; margin: 0 0 4px; }
.phu, .nho { color: var(--mo); margin: 0 0 12px; font-size: .9rem; }
.ma-duyet { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { background: var(--the); border: 1px solid var(--vien); border-radius: 6px; padding: 6px 8px; }
textarea { width: 100%; min-height: 9em; resize: vertical; }
.tieu-de { width: 100%; margin-bottom: 6px; }
button { border: 1px solid var(--vien); background: var(--the); border-radius: 6px; padding: 6px 12px; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.chinh { background: var(--chinh); border-color: var(--chinh); color: #fff; }
button.chinh:hover:not(:disabled) { background: var(--chinh-dam); }
button.nguy { color: var(--nguy); }
.the { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--vien); padding-bottom: 8px; }
.the button.dang-chon { border-color: var(--chinh); color: var(--chinh); font-weight: 600; }
.loc { margin-left: auto; display: flex; gap: 6px; align-items: center; color: var(--mo); }
.huy-hieu { background: var(--chinh); color: #fff; border-radius: 10px; padding: 0 7px; font-size: .8rem; }
.huy-hieu:empty { display: none; }
.danh-sach { display: grid; gap: 12px; }
.the-muc { background: var(--the); border: 1px solid var(--vien); border-radius: 10px; padding: 14px; }
.the-muc h2 { font-size: 1rem; margin: 0 0 6px; }
.meta { color: var(--mo); font-size: .88rem; display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; }
.canh-bao { background: var(--nen-canh-bao); color: var(--canh-bao); border-radius: 6px; padding: 4px 8px; font-size: .85rem; margin: 4px 0; }
.ly-do { color: var(--mo); font-size: .88rem; border-left: 3px solid var(--vien); padding-left: 8px; margin: 8px 0; }
.hang-nut { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.thong-bao { padding: 8px 12px; border-radius: 6px; background: var(--nen-nguy); color: var(--nguy); }
.thong-bao.tot { background: transparent; color: var(--ok); border: 1px solid var(--ok); }
.noi-dung-khach { white-space: pre-wrap; background: var(--nen); border-radius: 6px; padding: 8px; font-size: .9rem; }
.them { display: block; margin: 16px auto; }
@media (max-width: 480px) { .loc { margin-left: 0; } }

/* Messenger */
.hoi-thoai { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; max-height: 420px; overflow-y: auto; }
.hoi-thoai .tin { margin: 0; padding: .45rem .65rem; border-radius: .6rem; max-width: 85%; white-space: pre-wrap; overflow-wrap: anywhere; }
.hoi-thoai .tin.vao { align-self: flex-start; background: #eef1f6; }
.hoi-thoai .tin.ra { align-self: flex-end; background: #e3f2e7; }
@media (prefers-color-scheme: dark) {
  .hoi-thoai .tin.vao { background: #2a2f38; }
  .hoi-thoai .tin.ra { background: #1f3a2a; }
}
.tra-loi { border-left: 3px solid #c9d3e3; padding-left: .7rem; margin-top: .6rem; }
.rong { flex: 1 1 18rem; min-width: 0; }

/* Thuộc tính hidden phải thắng mọi display (sửa lỗi tab cũ vẫn hiện khi chuyển tab). */
[hidden] { display: none !important; }
.chon { display: inline-flex; gap: .4rem; align-items: center; margin: .2rem 0; }
.bang { width: 100%; border-collapse: collapse; font-size: .85rem; }
.bang th, .bang td { text-align: left; padding: .3rem .4rem; border-bottom: 1px solid var(--vien); vertical-align: top; }
.the-muc { overflow-x: auto; }

/* Điểm khách từ kịch bản Messenger */
.muc { border-radius: 999px; padding: 1px 10px; font-weight: 600; font-size: .85rem; }
.muc-nong { background: #fde2e1; color: #a61b12; }
.muc-am { background: #fff1d6; color: #8a5300; }
.muc-lanh { background: #e4ecf7; color: #2a4d7a; }
@media (prefers-color-scheme: dark) {
  .muc-nong { background: #4a1714; color: #ffb4ad; }
  .muc-am { background: #45330f; color: #ffd48a; }
  .muc-lanh { background: #1c2c44; color: #a9c6ee; }
}

/* Gợi ý trả lời cho sale */
.goi-y { border-left: 3px solid var(--chinh, #1f7a5a); padding: 6px 10px; margin: 8px 0; }
.goi-y-chinh { background: var(--nen-nhe, rgba(31,122,90,.08)); border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.goi-y-chinh p, .goi-y-khac p { margin: 4px 0; }
.goi-y-khac { border-top: 1px dashed rgba(127,127,127,.35); padding: 6px 0; }
.nho-nut { font-size: .8rem; padding: 2px 10px; }