/* giacngungon.vn — cong-cu.css: kiểu dáng của 5 công cụ (chỉ nạp ở /cong-cu/*).
   Trích tự động từ css/site.css của site cũ (30/10/2026): chỉ những quy tắc có class
   mà assets/cong-cu.js dùng, đặt trong phạm vi .cong-cu, và đổi biến màu cũ sang biến
   của hệ thiết kế mới để công cụ theo chế độ sáng/tối của site. */
:root{--cc-nhan:#7A5810;--cc-nhan-2:#B08A2E;--cc-tot:#286B3C;--cc-luu-y:#7A5810;--cc-xau:#B03A2E;--cc-bo:6px;--cc-do-rong:68ch}
@media (prefers-color-scheme: dark){:root{--cc-nhan:#E2B55A;--cc-nhan-2:#B08A2E;--cc-tot:#6FBE84;--cc-luu-y:#E2B55A;--cc-xau:#E8857B}}
.cong-cu body.brooklyn .prose p a, .cong-cu body.brooklyn .prose li a, .cong-cu body.brooklyn .prose td a{color: var(--cc-nhan); text-decoration-color: color-mix(in srgb, var(--cc-nhan) 45%, transparent);}
.cong-cu body.brooklyn .prose p a:hover, .cong-cu body.brooklyn .prose li a:hover, .cong-cu body.brooklyn .prose td a:hover{color: var(--cc-nhan-2); text-decoration-color: currentColor;}
.cong-cu :is(p, .cong-cu ul, .cong-cu ol, .cong-cu h1, .cong-cu h2, .cong-cu h3, .cong-cu .tldr, .cong-cu .answer, .cong-cu .note, .cong-cu .disclosure, .cong-cu blockquote, .cong-cu .crumbs, .cong-cu .pubdate){max-width: var(--cc-do-rong);}
.cong-cu :is(table, .cong-cu .table-wrap, .cong-cu .scale-track, .cong-cu .scale-legend){max-width: none;}
.cong-cu :is(.field, .cong-cu .choices){max-width: 720px;}
.cong-cu .dim{color: var(--ink-2);}
.cong-cu .mono{font-family: var(--mono);}
.cong-cu .small{font-size: 14px;}
@media (max-width: 760px){
  .cong-cu .site-header .row{gap: 0; justify-content: space-between; align-items: center;}
}
.cong-cu body.in-shop .pdp-price, .cong-cu body.in-shop .card-price, .cong-cu body.in-shop .crow b, .cong-cu body.in-shop .cl-t, .cong-cu body.in-shop .pdp-bar-p{font-variant-numeric: tabular-nums;}
.cong-cu .steps .now{color: var(--ink); font-weight: 500;}
.cong-cu .steps .now b{background: var(--cc-nhan); border-color: var(--cc-nhan); color: var(--paper);}
.cong-cu .qtybox button{width: 42px; height: 100%; min-height: 50px; border: 0; background: none;
  color: var(--ink); font-size: 20px; cursor: pointer; line-height: 1;}
.cong-cu .qtybox button:hover{background: color-mix(in srgb, var(--cc-nhan) 14%, transparent); color: var(--cc-nhan);}
.cong-cu .qtybox input{width: 46px; border: 0; background: none; color: var(--ink); text-align: center;
  font-family: var(--mono); font-size: 1rem; padding: 0;}
.cong-cu .cline{display: grid; grid-template-columns: 1fr auto auto 30px;
  gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line);}
.cong-cu .cl-n{display: flex; flex-direction: column; gap: 3px;}
.cong-cu .cl-n em{font-style: normal; font-size: 0.85rem; color: var(--ink-2);}
.cong-cu .cl-q{display: flex; align-items: center; gap: 4px;}
.cong-cu .cl-q button{width: 34px; height: 34px; border: 1px solid var(--ink-3); background: var(--paper-2);
  color: var(--ink); border-radius: 7px; font-size: 17px; cursor: pointer; line-height: 1;}
.cong-cu .cl-q button:hover{border-color: var(--cc-nhan); color: var(--cc-nhan);}
.cong-cu .cl-q b{min-width: 30px; text-align: center; font-family: var(--mono);}
.cong-cu .cl-t{font-family: var(--mono); min-width: 96px; text-align: right;}
.cong-cu .cl-x{width: 30px; height: 30px; border: 0; background: none; color: var(--ink-2);
  font-size: 20px; cursor: pointer; line-height: 1; border-radius: 6px;}
.cong-cu .cl-x:hover{color: var(--cc-xau); background: color-mix(in srgb, var(--cc-xau) 12%, transparent);}
.cong-cu .crow{display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 0.94rem;}
.cong-cu .crow b{font-family: var(--mono);}
.cong-cu .crow em{font-style: normal; color: var(--ink-2); font-size: 0.86rem;}
.cong-cu .crow-t{border-top: 1px solid var(--ink-3); margin-top: 4px; padding-top: 12px; font-size: 1.05rem;}
.cong-cu .crow-t b{color: var(--cc-nhan); font-size: 1.24rem;}
.cong-cu .fld input, .cong-cu .fld select, .cong-cu .fld textarea{width: 100%; padding: 11px 13px; font: inherit; font-size: 0.96rem;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--ink-3); border-radius: 8px;}
.cong-cu .fld input:focus, .cong-cu .fld select:focus, .cong-cu .fld textarea:focus{outline: 2px solid var(--cc-nhan); outline-offset: -1px; border-color: var(--cc-nhan);}
.cong-cu .pay input{margin-top: 3px;}
@media (max-width: 560px){
  .cong-cu .cline{grid-template-columns: 1fr auto; gap: 8px 12px;}
  .cong-cu .cl-t{grid-column: 1; text-align: left;}
  .cong-cu .cl-x{grid-column: 2; justify-self: end;}
}
.cong-cu .note{border: 1px solid var(--ink-3);
  border-radius: var(--cc-bo);
  padding: 16px 18px;
  margin: 24px 0;
  font-size: 15px;
  color: var(--ink-2);}
.cong-cu table{width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px;}
.cong-cu th, .cong-cu td{text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top;}
.cong-cu th{color: var(--ink-2); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;}
.cong-cu .field{margin-bottom: 22px;}
.cong-cu .field > label, .cong-cu .field > .label{display: flex; justify-content: space-between; align-items: baseline;
  font-size: 15px; font-weight: 500; margin-bottom: 8px;}
.cong-cu .field .val{font-family: var(--mono); font-size: 16px; color: var(--cc-nhan);}
.cong-cu input[type="range"]{width: 100%; accent-color: var(--cc-nhan);}
.cong-cu input[type="number"], .cong-cu select{width: 100%; padding: 9px 11px; font-size: 15px;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--ink-3); border-radius: var(--cc-bo);
  font-family: var(--mono);}
.cong-cu .choices{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;}
.cong-cu .choice{text-align: left; padding: 10px 12px; font-size: 15px; cursor: pointer;
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink-3); border-radius: var(--cc-bo);
  font-family: inherit;}
.cong-cu .choice:hover{border-color: var(--cc-nhan-2);}
.cong-cu .choice[aria-pressed="true"]{background: var(--cc-nhan); border-color: var(--cc-nhan); color: #1a1206; font-weight: 500;}
.cong-cu .choice.multi[aria-pressed="true"]{background: var(--paper-2); border-color: var(--cc-nhan); color: var(--ink);}
.cong-cu .result{border-top: 1px solid var(--line); margin-top: 36px; padding-top: 28px;}
.cong-cu .result .big{font-family: var(--mono); font-size: 34px; font-weight: 500; color: var(--cc-nhan);}
.cong-cu .scale-track{position: relative; height: 34px; margin: 20px 0 4px;}
.cong-cu .scale-track .base{position: absolute; inset-inline: 0; top: 12px; height: 8px; border-radius: 4px; background: var(--ink-3);}
.cong-cu .scale-track .band{position: absolute; top: 12px; height: 8px; border-radius: 4px; background: var(--cc-nhan);}
.cong-cu .scale-track .band.alt{top: 24px; height: 5px; background: var(--ink-3);}
.cong-cu .scale-legend{display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2);}
.cong-cu textarea{width: 100%; padding: 10px 12px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink-3); border-radius: var(--cc-bo);
  font: inherit; resize: vertical;}
.cong-cu .link-btn{background: none; border: none; padding: 0; color: var(--ink); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;}
.cong-cu .link-btn:hover{color: var(--cc-nhan);}
@media (max-width: 560px){
  .cong-cu .choices{grid-template-columns: minmax(0, 1fr);}
  .cong-cu .table-wrap{overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0;}
  .cong-cu .table-wrap table{margin: 0; min-width: 480px;}
  .cong-cu .table-wrap + .table-hint{font-size: 13px; color: var(--ink-2); margin: -12px 0 18px;}
  .cong-cu th, .cong-cu td{padding: 8px 9px;}
  .cong-cu .scale-legend{font-size: 12px;}
  .cong-cu .result .big{font-size: 28px;}
}
.cong-cu .gauge{--gauge-c: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-left: 3px solid var(--gauge-c);
  border-radius: var(--cc-bo);
  padding: 16px 18px 14px;
  margin: 18px 0;}
.cong-cu .gauge[data-state="ok"]{--gauge-c: var(--cc-tot);}
.cong-cu .gauge[data-state="warn"]{--gauge-c: var(--cc-luu-y);}
.cong-cu .gauge[data-state="bad"]{--gauge-c: var(--cc-xau);}
.cong-cu .gauge-head{display: flex; justify-content: space-between; align-items: baseline; gap: 12px;}
.cong-cu .gauge-name{font-size: 15px; font-weight: 500; margin: 0; color: var(--ink);}
.cong-cu .gauge-state{font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gauge-c); white-space: nowrap;}
.cong-cu .gauge-read{margin: 6px 0 2px; font-family: var(--mono); line-height: 1.1;}
.cong-cu .gauge-num{font-size: 32px; font-weight: 500; color: var(--gauge-c);}
.cong-cu .gauge-unit{font-size: 16px; color: var(--ink-2); margin-left: 6px;}
.cong-cu .gauge-ref{margin: 0; font-size: 14px; color: var(--ink-2);}
.cong-cu .gauge-scale{position: relative; height: 22px; margin: 12px 0 2px;}
.cong-cu .gauge-base, .cong-cu .gauge-good, .cong-cu .gauge-ok{position: absolute; top: 8px; height: 6px; border-radius: 3px;}
.cong-cu .gauge-base{inset-inline: 0; background: var(--line);}
.cong-cu .gauge-ok{background: var(--ink-3);}
.cong-cu .gauge-good{background: var(--cc-tot);}
.cong-cu .gauge-mark{position: absolute; top: 1px; width: 2px; height: 20px;
  background: var(--gauge-c); border-radius: 1px;
  box-shadow: 0 0 0 2px var(--paper);}
.cong-cu .gauge-ticks{display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);}
.cong-cu .gauge-conf{display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px;}
.cong-cu .gauge-dots{display: inline-flex; gap: 3px;}
.cong-cu .gauge-dots i{width: 14px; height: 4px; border-radius: 2px;
  background: var(--ink-3); display: block;}
.cong-cu .gauge-dots i.on{background: var(--cc-nhan);}
.cong-cu .gauge-conf-t{color: var(--ink-2);}
.cong-cu .gauge-src{margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2);}
@media (max-width: 560px){
  .cong-cu .gauge{padding: 14px 14px 12px;}
  .cong-cu .gauge-num{font-size: 27px;}
  .cong-cu .gauge-head{flex-direction: column; align-items: flex-start; gap: 2px;}
}
.cong-cu .gauge-rank{font-size: 15px; font-weight: 500; margin: 26px 0 0; color: var(--ink-2);}
.cong-cu .gauge-rank + .gauge{margin-top: 8px;}
/* ── Lab (31/10/2026) ── */
.cong-cu input[type="text"]{width:100%;max-width:320px;padding:9px 11px;font-size:16px;font-family:var(--mono);background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--cc-bo)}
.cong-cu input[type="text"]:focus,.cong-cu select:focus{outline:2px solid var(--cc-nhan);outline-offset:-1px}
.cong-cu .lab-form fieldset{border:0;border-top:1px solid var(--line);margin:0 0 8px;padding:18px 0 0;max-width:720px}
.cong-cu .lab-form legend{font-weight:600;padding:0 8px 0 0}
.cong-cu .field .dv{font-family:var(--mono);font-size:14px;color:var(--ink-2)}
.cong-cu .lab-kq{margin:28px 0}
.cong-cu .lab-the{border:1px solid var(--line);border-radius:var(--cc-bo);padding:14px 16px;margin:0 0 14px;max-width:720px}
.cong-cu .lab-the-dau{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0;font-weight:600}
.cong-cu .lab-the-dau .mono{color:var(--cc-nhan);font-size:18px}
.cong-cu .lab-moc{margin:4px 0 0;padding-left:18px}
.cong-cu .lab-moc li{margin:0 0 8px}
.cong-cu .lab-the details summary{cursor:pointer;margin-top:6px}
.cong-cu .lab-moc li,.cong-cu .lab-the p{line-height:1.5}