/* Widget "Nhờ HVSC thiết kế riêng" + "Góp ý giao diện / Báo sai" + trang quản trị/tài khoản (mod-request.js).
   Mọi thứ nằm trong .rq nên không đụng CSS của trang chủ. Tự có token sáng/tối (theo hệ điều hành hoặc html[data-scheme]). */
.rq,.rq *{box-sizing:border-box}
.rq{--q-bg:#FFFFFF;--q-bg2:#FDF0E8;--q-tx:#2B1D1A;--q-tx2:#5E4841;--q-line:rgba(90,50,40,.28);--q-acc:#A62B2B;--q-on:#FFFFFF;--q-acc-soft:rgba(166,43,43,.10);--q-gold:#7A5412;
  --q-ok-bg:#DDF3E3;--q-ok-tx:#14532D;--q-warn-bg:#FDEBC8;--q-warn-tx:#7A3E00;--q-info-bg:#E3EBFB;--q-info-tx:#1E3A8A;--q-err:#B00020;--q-shadow:0 18px 60px rgba(40,20,15,.28);
  font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;color:var(--q-tx);line-height:1.5;-webkit-text-size-adjust:100%}
@media(prefers-color-scheme:dark){html:not([data-scheme=light]) .rq{--q-bg:#2E2320;--q-bg2:#261C1A;--q-tx:#FBEFE9;--q-tx2:#D2BFB7;--q-line:rgba(255,230,220,.34);--q-acc:#FF8C82;--q-on:#2B1D1A;--q-acc-soft:rgba(255,140,130,.16);--q-gold:#E0B861;
  --q-ok-bg:#16361F;--q-ok-tx:#8EF0A8;--q-warn-bg:#3B2A0C;--q-warn-tx:#FFD38A;--q-info-bg:#1A2A4D;--q-info-tx:#B7CCFF;--q-err:#FF8A8A;--q-shadow:0 18px 60px rgba(0,0,0,.6)}}
html[data-scheme=dark] .rq{--q-bg:#2E2320;--q-bg2:#261C1A;--q-tx:#FBEFE9;--q-tx2:#D2BFB7;--q-line:rgba(255,230,220,.34);--q-acc:#FF8C82;--q-on:#2B1D1A;--q-acc-soft:rgba(255,140,130,.16);--q-gold:#E0B861;
  --q-ok-bg:#16361F;--q-ok-tx:#8EF0A8;--q-warn-bg:#3B2A0C;--q-warn-tx:#FFD38A;--q-info-bg:#1A2A4D;--q-info-tx:#B7CCFF;--q-err:#FF8A8A;--q-shadow:0 18px 60px rgba(0,0,0,.6)}

/* nút chung */
.rq button{font:inherit}
.rq-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 22px;border-radius:999px;border:1.5px solid var(--q-acc);background:var(--q-acc);color:var(--q-on);font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s}
.rq-btn:hover{box-shadow:0 6px 18px var(--q-acc-soft);transform:translateY(-1px)}
.rq-btn.ghost{background:transparent;color:var(--q-acc)}
.rq-btn.sm{min-height:38px;padding:6px 14px;font-size:14px}
.rq-btn.danger{border-color:var(--q-err);background:transparent;color:var(--q-err)}
.rq-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.rq :focus-visible{outline:3px solid var(--q-gold);outline-offset:2px}

/* nổi: pill thiết kế riêng + nút góp ý */
.rq-fab,.rq-pill{position:fixed;z-index:99980;bottom:max(16px,env(safe-area-inset-bottom));border:1.5px solid var(--q-line);background:var(--q-bg);color:var(--q-tx);box-shadow:0 8px 28px rgba(40,20,15,.25);cursor:pointer}
.rq-fab{right:16px;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;color:var(--q-acc)}
.rq-fab svg{width:22px;height:22px}
.rq-pill{left:16px;max-width:calc(100vw - 96px);display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:22px;font-size:13.5px;line-height:1.3;font-weight:600;text-align:left}
.rq-pill b{color:var(--q-acc);font-weight:700}
.rq-fab:hover,.rq-pill:hover{border-color:var(--q-acc)}
html.rq-app .rq-fab{bottom:max(84px,calc(env(safe-area-inset-bottom) + 76px))}
@media(min-width:821px){html.rq-app .rq-fab{bottom:max(16px,env(safe-area-inset-bottom))}.rq-pill{left:auto;right:76px}}
html.rq-lock{overflow:hidden}
@media print{.rq-fab,.rq-pill,.rq-ov,.rq-cta{display:none!important}}

/* khối kêu gọi trong trang (#yeu-cau-thiet-ke) */
.rq-cta{padding:44px 16px}
.rq-cta-in{max-width:760px;margin:0 auto;padding:30px 24px;border:1.5px solid var(--q-line);border-radius:22px;background:var(--q-bg2);text-align:center}
.rq-kick{margin:0 0 6px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--q-gold);font-weight:700}
.rq-cta h2{margin:0 0 10px;font-family:'Fraunces','Cormorant Garamond',Georgia,serif;font-size:clamp(24px,5vw,34px);line-height:1.2;color:var(--q-tx)}
.rq-cta p{margin:0 auto 18px;max-width:560px;color:var(--q-tx2);font-size:15.5px}

/* hộp thoại */
.rq-ov{position:fixed;inset:0;z-index:99990;background:rgba(25,12,9,.62);display:flex;align-items:flex-end;justify-content:center;overscroll-behavior:contain}
.rq-box{width:100%;max-height:94vh;max-height:94dvh;overflow:auto;background:var(--q-bg);color:var(--q-tx);border-radius:22px 22px 0 0;padding:20px 18px calc(22px + env(safe-area-inset-bottom));box-shadow:var(--q-shadow);position:relative;-webkit-overflow-scrolling:touch}
@media(min-width:700px){.rq-ov{align-items:center;padding:24px}.rq-box{max-width:580px;border-radius:22px;padding:28px 30px}
  .rq-ov.pop{align-items:flex-end;justify-content:flex-end;padding:0 16px 76px;background:rgba(25,12,9,.25)}.rq-ov.pop .rq-box{max-width:400px;border:1.5px solid var(--q-line)}}
.rq-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:transparent;color:var(--q-tx2);font-size:28px;line-height:1;cursor:pointer;border-radius:50%}
.rq-x:hover{background:var(--q-acc-soft);color:var(--q-tx)}
.rq-box h3{margin:0 44px 6px 0;font-family:'Fraunces','Cormorant Garamond',Georgia,serif;font-size:24px;line-height:1.2;color:var(--q-tx)}
.rq-lead{margin:0 0 14px;color:var(--q-tx2);font-size:14.5px}
.rq-note{margin:0 0 14px;padding:10px 12px;border-radius:12px;background:var(--q-acc-soft);color:var(--q-tx);font-size:14px}

/* form */
.rq-f{display:flex;flex-direction:column;gap:14px}
.rq-row{display:flex;flex-direction:column;gap:6px;min-width:0}
.rq-g2{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){.rq-g2{grid-template-columns:1fr 1fr}}
.rq-lb{font-size:14px;font-weight:600;color:var(--q-tx)}
.rq-lb small{font-weight:400;color:var(--q-tx2)}
.rq-in,.rq-ta{width:100%;min-height:46px;padding:10px 12px;border:1.5px solid var(--q-line);border-radius:12px;background:var(--q-bg);color:var(--q-tx);font:inherit;font-size:16px}
.rq-ta{min-height:112px;resize:vertical}
.rq-in::placeholder,.rq-ta::placeholder{color:var(--q-tx2);opacity:.8}
.rq-in:focus,.rq-ta:focus{border-color:var(--q-acc);outline:none;box-shadow:0 0 0 3px var(--q-acc-soft)}
.rq-cnt{align-self:flex-end;font-size:12.5px;color:var(--q-tx2)}
.rq-seg{display:flex;flex-wrap:wrap;gap:8px}
.rq-seg label{position:relative;flex:1 1 auto;min-width:0}
.rq-seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.rq-seg span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1.5px solid var(--q-line);border-radius:12px;font-size:14px;font-weight:600;text-align:center;color:var(--q-tx);background:var(--q-bg)}
.rq-seg input:checked+span{border-color:var(--q-acc);background:var(--q-acc-soft);color:var(--q-acc)}
.rq-seg input:focus-visible+span{outline:3px solid var(--q-gold);outline-offset:2px}
.rq-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:999px;background:var(--q-acc-soft);color:var(--q-tx);font-size:13.5px;font-weight:600;align-self:flex-start}
.rq-chip button{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--q-tx);cursor:pointer;font-size:18px;line-height:1}
.rq-thumbs{display:flex;flex-wrap:wrap;gap:10px}
.rq-th{position:relative;width:84px;height:84px;border-radius:12px;overflow:hidden;border:1.5px solid var(--q-line);background:var(--q-bg2)}
.rq-th img{width:100%;height:100%;object-fit:cover;display:block}
.rq-th button{position:absolute;top:3px;right:3px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.rq-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:84px;height:84px;border:1.5px dashed var(--q-line);border-radius:12px;background:transparent;color:var(--q-tx2);font-size:12.5px;cursor:pointer}
.rq-add b{font-size:22px;line-height:1;color:var(--q-acc)}
.rq-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.rq-err{min-height:20px;margin:0;color:var(--q-err);font-size:14px;font-weight:600}
.rq-auto{margin:0;font-size:12.5px;color:var(--q-tx2)}
.rq-ok{text-align:center;padding:14px 4px 4px}
.rq-ok .rq-tick{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:var(--q-ok-bg);color:var(--q-ok-tx);display:flex;align-items:center;justify-content:center;font-size:30px}
.rq-ok p{margin:0 0 10px;color:var(--q-tx2);font-size:15px}
.rq-ok p b{color:var(--q-tx)}

/* quản trị + tài khoản (mod-request.js) */
.rq-page{max-width:980px;margin:0 auto}
.rq-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.rq-tabs button{min-height:42px;padding:8px 16px;border:1.5px solid var(--q-line);border-radius:999px;background:var(--q-bg);color:var(--q-tx);font-weight:600;font-size:14px;cursor:pointer}
.rq-tabs button[aria-pressed=true]{border-color:var(--q-acc);background:var(--q-acc-soft);color:var(--q-acc)}
.rq-list{display:flex;flex-direction:column;gap:12px}
.rq-card{padding:16px;border:1.5px solid var(--q-line);border-radius:16px;background:var(--q-bg);color:var(--q-tx)}
.rq-card h4{margin:0;font-size:16px;color:var(--q-tx)}
.rq-meta{margin:2px 0 8px;font-size:13px;color:var(--q-tx2)}
.rq-body{margin:8px 0;white-space:pre-wrap;word-break:break-word;font-size:15px;color:var(--q-tx)}
.rq-kv{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:8px 0;font-size:13.5px;color:var(--q-tx2)}
.rq-kv b{color:var(--q-tx);font-weight:600}
.rq-kv span{word-break:break-word;min-width:0}
.rq-st{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:700}
.rq-st.s-moi{background:var(--q-warn-bg);color:var(--q-warn-tx)}
.rq-st.s-dang_lam,.rq-st.s-dang_xu_ly{background:var(--q-info-bg);color:var(--q-info-tx)}
.rq-st.s-da_giao,.rq-st.s-xong{background:var(--q-ok-bg);color:var(--q-ok-tx)}
.rq-adm{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid var(--q-line)}
.rq-adm .rq-row{flex:1 1 200px}
.rq-empty{padding:28px 12px;text-align:center;color:var(--q-tx2)}
.rq-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.rq-top h1{margin:0;font-family:'Fraunces','Cormorant Garamond',Georgia,serif;font-size:26px;color:var(--q-tx)}
.rq-top p{margin:2px 0 0;color:var(--q-tx2);font-size:14.5px}
@media(prefers-reduced-motion:reduce){.rq-btn{transition:none}}

/* 25/10: nut gop y khong de len dock di dong */
@media(max-width:1020px){body:has(.dk) .rq-fab{bottom:calc(92px + env(safe-area-inset-bottom))}}

/* 01/11: nút "Thử tên bạn" (hv-try, chèn bởi thiep-src/shared/data.js) không chồng pill "Chưa ưng mẫu này?" + nút tròn: xếp lên hàng trên, chạm >=44px */
html .hv-try{right:16px!important;bottom:max(84px,calc(env(safe-area-inset-bottom) + 84px))!important;min-height:44px;padding:0 16px!important}
@media(max-width:1020px){body:has(.dk) .hv-try{bottom:calc(160px + env(safe-area-inset-bottom))!important}}
/* 01/11: pill không đè dock di động (trang có .dk) và nút "Bỏ qua, xem thiệp" (#skip) của thiệp */
@media(max-width:1020px){body:has(.dk) .rq-pill{bottom:calc(92px + env(safe-area-inset-bottom))}}
html.rq-intro .rq-pill,html.rq-intro .rq-fab,html.rq-intro .hv-try{display:none!important}
#skip{white-space:nowrap}