/* "Góp ý" — the floating improvement-request button, its panel and the
 * Góp ý pages. Content only, prefix `gy-`: the header and navigation are
 * ct-shell.css unchanged, and nothing here restyles a .ct-* class. Linked from
 * base.html on every page (the button is chrome), after the page's own sheet. */

/* ---- the floating button ------------------------------------------------
 * The default stays above the whole bottom bar, including optional action bars.
 * A dragged button switches to viewport positioning without taking up space. */
.gy-fab{
  position:absolute; right:14px; bottom:calc(100% + 12px);
  z-index:6; opacity:.38; transition:opacity 240ms ease;
}
.gy-fab.gy-positioned{ position:fixed; }
.gy-fab.gy-awake, .gy-fab[open], .gy-fab:has(> summary:focus-visible),
.gy-fab-link:focus-visible{ opacity:1; }
@media (hover:hover){ .gy-fab:hover{ opacity:1; } }
.gy-fab > summary, .gy-fab-link{
  list-style:none; cursor:pointer; user-select:none; -webkit-user-select:none;
  touch-action:none;
  display:inline-flex; align-items:center; gap:6px; min-height:var(--tap-min-lg);
  padding:0 16px 0 14px; border-radius:var(--radius-pill);
  background:var(--gold-500); color:var(--green-700);
  font-family:inherit; font-size:var(--text-body); font-weight:700; line-height:1;
  box-shadow:var(--shadow-raised);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.gy-fab > summary::-webkit-details-marker{ display:none; }
.gy-fab-link{ touch-action:none; }
.gy-fab > summary:active, .gy-fab-link:active{ transform:scale(var(--press-scale)); }
.gy-fab[open] > summary{ background:var(--green-700); color:#fff; }
.gy-fab > summary:focus-visible, .gy-fab-link:focus-visible{ outline:2px solid var(--green-700); outline-offset:2px; }
.gy-glyph{ font-size:16px; line-height:1; }

/* ---- the panel ---------------------------------------------------------- */
.gy-panel{
  position:absolute; right:0; bottom:calc(100% + 10px);
  width:min(386px, calc(100vw - 28px)); max-height:calc(100svh - 190px); overflow:auto;
  background:var(--surface-card); border-radius:var(--radius-card);
  box-shadow:var(--shadow-popover); padding:var(--pad-card);
  color:var(--ink-900); text-align:left;
}
.gy-dau{ display:flex; flex-direction:column; gap:2px; margin-bottom:6px; }
.gy-dau b{ font-size:var(--text-title); color:var(--green-700); }

/* ---- form fields (panel AND full page) ---------------------------------- */
.gy-nhan{ display:block; font-size:var(--text-body); font-weight:600; margin:10px 0 4px; }
.gy-panel select, .gy-panel textarea, .gy-panel input[type=url],
.gy-form select, .gy-form textarea, .gy-form input[type=url]{
  font:inherit; font-size:16px; width:100%; min-width:0; display:block;
  border:var(--border-field); border-radius:var(--radius-field); padding:10px;
  background:#fff; color:var(--ink-900);
}
.gy-panel textarea, .gy-form textarea{ resize:vertical; font-weight:400; line-height:var(--leading-snug); }
.gy-panel :is(select,textarea,input):focus-visible, .gy-form :is(select,textarea,input):focus-visible{
  outline:2px solid var(--gold-500); outline-offset:2px;
}
.gy-meta{ font-size:var(--text-label); color:var(--ink-500); margin:8px 0 0; line-height:var(--leading-relaxed); }
.gy-meta b{ color:var(--ink-700); font-weight:600; }
.gy-muted{ color:var(--ink-500); font-size:var(--text-label); }
.gy-actions{ display:flex; align-items:center; gap:12px; margin-top:12px; }
.gy-actions .ct-btn{ flex:1; }
.gy-link{ background:none; border:0; padding:0; font:inherit; font-size:var(--text-body); font-weight:600;
  color:var(--text-link); text-decoration:underline; cursor:pointer; white-space:nowrap; }
.gy-loi{ margin:10px 0 0; padding:10px 12px; border-radius:var(--radius-field);
  background:var(--status-bad-fill); border:1px solid var(--danger-soft); color:var(--danger);
  font-size:var(--text-body); font-weight:600; }
.gy-xong{ display:flex; flex-direction:column; gap:6px; font-size:var(--text-body); line-height:var(--leading-snug); }
/* `display:flex` above would beat the UA's [hidden]{display:none} (the Kiểm kho
 * search bug of round 1): say it explicitly for everything the panel toggles. */
.gy-panel [hidden], .gy-xong[hidden], .gy-loi[hidden]{ display:none !important; }
.gy-xong b{ color:var(--ok-ink); font-size:var(--text-title); }
.gy-bao{ margin:0 0 12px; padding:10px 12px; border-radius:var(--radius-field);
  background:rgba(111,214,162,.18); border:1px solid var(--ok); color:var(--ok-ink);
  font-size:var(--text-body); font-weight:600; }

/* ---- the pages ---------------------------------------------------------- */
.gy-body{ padding:16px; overflow-wrap:anywhere; }
.gy-body h1{ font-size:21px; margin:0 0 6px; color:var(--green-700); }
.gy-body h2{ font-size:var(--text-title); margin:18px 0 8px; color:var(--green-700); }
.gy-body p{ font-size:var(--text-body); line-height:var(--leading-relaxed); margin:4px 0 8px; }
.gy-quay-lai{ display:inline-block; font-size:var(--text-body); font-weight:600; margin-bottom:8px; }
.gy-nut-moi{ width:100%; margin:8px 0 14px; }
.gy-form{ margin-top:8px; }
.gy-ds{ display:flex; flex-direction:column; gap:var(--gap-card); }
.gy-the{
  display:block; color:inherit; background:var(--surface-card); border:var(--border-card);
  border-radius:var(--radius-card); padding:var(--pad-card); box-shadow:var(--shadow-card);
}
a.gy-the:active{ background:var(--cream-100); }
.gy-hang{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gy-noi-dung{ white-space:pre-wrap; color:var(--ink-900); font-weight:500; }
.gy-ghi-chu{ padding:8px 10px; border-radius:var(--radius-field); background:var(--surface-inset);
  color:var(--ink-700); white-space:pre-wrap; }
.gy-chan{ margin-bottom:0; }
.gy-trong{ padding:20px 0; color:var(--ink-500); }
.gy-trang{ display:flex; gap:16px; align-items:center; justify-content:center; margin:18px 0; font-size:var(--text-label); }

/* status chips: gold = waiting on Crane Tea, blue = in hand, green = done, grey = declined */
.gy-tt{ display:inline-block; padding:3px 10px; border-radius:var(--radius-pill); font-size:var(--text-label);
  font-weight:700; white-space:nowrap; line-height:1.4; }
.gy-tt-received{ background:var(--notice-gold-fill); color:var(--warn); }
.gy-tt-processing{ background:rgba(44,111,209,.12); color:var(--blue); }
.gy-tt-resolved{ background:var(--status-ok-fill); color:var(--ok-ink); }
.gy-tt-rejected{ background:var(--status-flat-fill); color:var(--ink-600); }
.gy-tt-note{ color:var(--ink-600); margin-top:8px; }
.gy-thong-tin{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:10px 0 0; font-size:var(--text-body); }
.gy-thong-tin dt{ color:var(--ink-500); }
.gy-thong-tin dd{ margin:0; }
.gy-lich{ list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid rgba(10,82,54,.12); display:flex; flex-direction:column; gap:12px; }
.gy-buoc{ position:relative; font-size:var(--text-body); }
.gy-buoc::before{ content:""; position:absolute; left:-20px; top:5px; width:10px; height:10px; border-radius:50%;
  background:var(--green-500); box-shadow:0 0 0 2px var(--surface-column); }
.gy-buoc-hub::before{ background:var(--gold-500); }
.gy-buoc .gy-ghi-chu{ margin:6px 0; }

@media print{ .gy-fab{ display:none !important; } }