/* Sải Cánh Express — Cụm trang Công cụ (v4.31.0). Nạp SAU page-country.css, chỉ trên trang công cụ
   (inc/tools-sce.php). Chỉ bổ sung phần riêng; hero/thẻ/nút/timeline/dải CTA dùng lại của Trang Quốc gia. */

/* Hero gọn hơn trang quốc gia: icon công cụ + tiêu đề, không có thẻ "Thông tin nhanh". */
.sce-tl-hero{ padding-bottom:clamp(32px,5vw,56px); }
.sce-tl-hero__row{ display:flex; gap:20px; align-items:flex-start; }
.sce-tl-hero__icon{ display:none; }
@media (min-width:768px){
  .sce-tl-hero__icon{ display:inline-grid; place-items:center; flex:none; width:64px; height:64px; margin-top:4px; border-radius:16px; color:#fff;
    background:linear-gradient(135deg,var(--sce-red),var(--sce-red-dark,#A30000)); box-shadow:0 8px 20px -6px rgba(214,0,0,.45); }
  .sce-tl-hero__icon .sce-icon{ width:30px; height:30px; }
}
.sce-tl-hero .sce-cp-lead{ max-width:64ch; }

/* Bố cục chính: công cụ + cột hỗ trợ (dùng lại .sce-cp-article 1fr / 320px từ 1024px). */
.sce-tl-main{ padding-top:clamp(24px,4vw,40px); }
.sce-tl-tool{ min-width:0; display:grid; gap:24px; align-content:start; }
.sce-tl-tool > *{ margin:0!important; }
.sce-tl-note{ display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:12px; background:var(--sce-bg); border:1px solid var(--sce-line);
  color:var(--sce-ink-soft); font-size:14px; line-height:1.55; }
.sce-tl-note .sce-icon{ flex:none; width:20px; height:20px; color:var(--sce-success,#067647); margin-top:1px; }

/* Cột phụ: "Công cụ khác". */
.sce-tl-others{ padding:20px; }
.sce-tl-others__title{ margin:0 0 8px!important; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--sce-ink-soft); }
.sce-tl-others ul{ list-style:none; margin:0!important; padding:0!important; }
.sce-tl-others li{ margin:0!important; border-top:1px solid var(--sce-line); }
.sce-tl-others li:first-child{ border-top:0; }
.sce-tl-others li a{ display:flex; align-items:center; gap:12px; min-height:48px; padding:6px 0; color:var(--sce-ink); font-weight:600; font-size:15px; text-decoration:none; }
.sce-tl-others li a:hover{ color:var(--sce-red); }
.sce-tl-others__ic{ display:inline-grid; place-items:center; flex:none; width:36px; height:36px; border-radius:10px; background:var(--sce-red-soft); color:var(--sce-red); }
.sce-tl-others__ic .sce-icon{ width:18px; height:18px; }
.sce-tl-others__go{ margin-left:auto; width:18px; height:18px; color:var(--sce-ink-soft); }
.sce-tl-others__all{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:14px; font-weight:600; color:var(--sce-red); text-decoration:none; }
.sce-tl-others__all .sce-icon{ width:16px; height:16px; }

/* Trang /cong-cu/: lưới thẻ công cụ (cả thẻ bấm được, giữ 1 link duy nhất cho trình đọc màn hình). */
.sce-tl-grid{ display:grid; gap:16px; list-style:none; margin:0!important; padding:0!important; }
@media (min-width:640px){ .sce-tl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .sce-tl-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sce-tl-card{ display:flex; flex-direction:column; gap:12px; margin:0!important; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.sce-tl-card h3{ margin:4px 0 0!important; font-size:18px!important; line-height:1.35!important; }
.sce-tl-card h3 a{ color:inherit; text-decoration:none; }
.sce-tl-card h3 a::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; }
.sce-tl-card h3 a:focus-visible{ outline:none; }
.sce-tl-card:focus-within{ outline:2px solid var(--sce-red); outline-offset:2px; }
.sce-tl-card p{ margin:0!important; color:var(--sce-ink-soft); font-size:15px; line-height:1.55; }
.sce-tl-card__go{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:4px; font-size:14px; font-weight:600; color:var(--sce-red); }
.sce-tl-card__go .sce-icon{ width:16px; height:16px; transition:transform .2s ease; }
@media (hover:hover){
  .sce-tl-card:hover{ border-color:rgba(214,0,0,.35); box-shadow:0 12px 24px -8px rgba(16,24,40,.14); transform:translateY(-2px); }
  .sce-tl-card:hover .sce-tl-card__go .sce-icon{ transform:translateX(3px); }
}
@media (prefers-reduced-motion:reduce){ .sce-tl-card,.sce-tl-card__go .sce-icon{ transition:none; } .sce-tl-card:hover{ transform:none; } }

/* Ô tra cứu nhanh trong hero /cong-cu/. */
.sce-tl-quick__form{ display:grid; gap:10px; margin-top:16px; }
@media (min-width:480px) and (max-width:1023px){ .sce-tl-quick__form{ grid-template-columns:minmax(0,1fr) auto; } }
.sce-tl-quick__form input{ width:100%; min-height:48px; padding:10px 14px; border:1px solid var(--sce-line); border-radius:10px; background:var(--sce-white);
  color:var(--sce-ink); font-size:16px; font-family:var(--sce-font-mono,'IBM Plex Mono',monospace); box-shadow:0 1px 2px rgba(16,24,40,.05); }
.sce-tl-quick__form input:focus{ outline:none; border-color:var(--sce-red); box-shadow:0 0 0 4px rgba(214,0,0,.12); }
.sce-tl-quick__form .sce-cp-btn{ min-height:48px; justify-content:center; }
.sce-tl-quick{ align-self:center; }
@media (min-width:1024px){ .sce-tl-quick{ max-width:400px; width:100%; justify-self:end; } }
.sce-tl-quick__hint{ margin:10px 0 0!important; font-size:13px; color:var(--sce-ink-soft); }

/* Công cụ Quy đổi trọng lượng. */
.sce-tl-calc__title{ display:flex; align-items:center; gap:10px; margin:0 0 4px!important; font-size:18px!important; line-height:1.35!important; font-weight:600!important; color:var(--sce-ink)!important; }
.sce-tl-calc__title .sce-icon{ width:22px; height:22px; color:var(--sce-red); }
.sce-tl-calc .sce-cp-btn--primary{ margin-top:16px; }
.sce-tl-formula p{ margin:12px 0 0!important; line-height:1.6; }
.sce-tl-divs{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:12px 0 0!important; padding:0!important; }
.sce-tl-divs li{ display:inline-flex; gap:8px; align-items:center; margin:0!important; padding:6px 12px; border-radius:999px; background:var(--sce-bg); border:1px solid var(--sce-line); font-size:14px; }

/* Nội dung soạn thêm trong trình sửa trang. */
.sce-tl-content{ max-width:820px; }

/* ---------- v4.41.0 — Công cụ quy đổi kg⇄lbs, cm⇄inch, Tính CBM, Tra cứu mã HS (Untitled UI, mobile-first) ---------- */
.sce-tl-calc input,.sce-tl-calc select{ box-sizing:border-box; }
.sce-tl-conv__pair{ display:grid; grid-template-columns:1fr; gap:10px; align-items:end; margin-top:16px; }
.sce-tl-conv__pair input{ min-height:52px!important; font-size:20px!important; font-weight:600; font-variant-numeric:tabular-nums; }
.sce-tl-conv__swap{ display:none; }
@media (min-width:560px){
  .sce-tl-conv__pair{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
  .sce-tl-conv__swap{ display:grid; place-items:center; width:40px; height:52px; color:var(--sce-ink-soft); font-size:20px; }
}
.sce-tl-conv__hint{ margin:10px 0 0!important; font-size:13.5px; color:var(--sce-ink-soft); }
.sce-tl-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.sce-tl-chips button,.sce-tl-chips button:hover,.sce-tl-chips button:focus{
  display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px; border-radius:999px; cursor:pointer;
  border:1px solid var(--sce-line)!important; background:var(--sce-white)!important; color:var(--sce-ink)!important;
  font:500 14px/1 var(--sce-font-body)!important; text-transform:none!important; letter-spacing:0!important; box-shadow:0 1px 2px rgba(16,24,40,.05)!important;
}
.sce-tl-chips button:hover{ border-color:color-mix(in srgb,var(--sce-red) 40%,var(--sce-line))!important; color:var(--sce-red)!important; }
.sce-tl-chips button.is-on{ background:var(--sce-red-softer)!important; border-color:color-mix(in srgb,var(--sce-red) 45%,var(--sce-line))!important; color:var(--sce-red)!important; }
.sce-tl-chips button span{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--sce-bg); color:var(--sce-ink-soft); font-size:12px; }
.sce-tl-chips button:focus-visible{ outline:2px solid var(--sce-red)!important; outline-offset:2px; }
.sce-tl-row3{ grid-template-columns:repeat(3,minmax(0,1fr))!important; }

/* Bảng dùng chung (bảng đổi nhanh, bảng mã HS) */
.sce-tl-table{ width:100%; margin:12px 0 0!important; border-collapse:separate; border-spacing:0; border:1px solid var(--sce-line); border-radius:12px; overflow:hidden; font-size:15px; }
.sce-tl-table th,.sce-tl-table td{ padding:10px 14px!important; border:0!important; border-bottom:1px solid var(--sce-line)!important; text-align:left; vertical-align:top; background:transparent; }
.sce-tl-table thead th{ background:var(--sce-bg)!important; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--sce-ink-soft); }
.sce-tl-table tbody tr:last-child > *{ border-bottom:0!important; }
.sce-tl-table tbody tr:hover > *{ background:var(--sce-red-softer); }
.sce-tl-table td{ font-variant-numeric:tabular-nums; }

/* CBM */
.sce-tl-cbm__rows{ display:grid; gap:10px; margin-top:16px; }
.sce-tl-cbm__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px; border:1px solid var(--sce-line); border-radius:12px; background:var(--sce-bg); position:relative; }
@media (min-width:640px){ .sce-tl-cbm__row{ grid-template-columns:repeat(3,minmax(0,1fr)) 92px 40px; align-items:end; padding:10px 12px; } }
.sce-tl-cbm__del,.sce-tl-cbm__del:hover,.sce-tl-cbm__del:focus{ display:grid; place-items:center; width:40px; height:44px; padding:0; border-radius:8px; cursor:pointer;
  border:1px solid var(--sce-line)!important; background:var(--sce-white)!important; color:var(--sce-ink-soft)!important; box-shadow:none!important; }
.sce-tl-cbm__del:hover{ color:var(--sce-red)!important; border-color:var(--sce-red)!important; }
.sce-tl-cbm__del[hidden]{ display:none; }
@media (max-width:639px){ .sce-tl-cbm__del{ position:absolute; top:8px; right:8px; width:32px; height:32px; } .sce-tl-cbm__row{ padding-top:44px; } }
.sce-tl-cbm__add{ margin-top:12px; }
.sce-tl-cbm__out{ display:grid!important; gap:8px; }
.sce-tl-cbm__total strong{ color:var(--sce-red)!important; font-size:22px!important; }
.sce-tl-cbm__divs{ display:flex; flex-wrap:wrap; gap:8px; }
.sce-tl-cbm__divs span{ padding:4px 10px; border-radius:999px; background:var(--sce-white); border:1px solid var(--sce-line); font-size:13.5px; }
.sce-tl-cbm__divs b{ color:var(--sce-ink); }

/* Mã HS */
.sce-tl-hs__search{ position:relative; margin-top:14px; }
.sce-tl-hs__search .sce-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--sce-ink-faint); pointer-events:none; }
.sce-tl-hs__search input{ box-sizing:border-box; width:100%; height:48px; padding:0 14px 0 44px; border:1px solid var(--sce-line); border-radius:12px; background:var(--sce-white); color:var(--sce-ink);
  font:400 16px/1.4 var(--sce-font-body); box-shadow:0 1px 2px rgba(16,24,40,.05); }
.sce-tl-hs__search input:focus{ outline:none; border-color:var(--sce-red); box-shadow:0 0 0 4px rgba(214,0,0,.12); }
.sce-tl-hs__wrap{ max-height:560px; overflow:auto; margin-top:4px; border-radius:12px; }
.sce-tl-hs__table thead th{ position:sticky; top:0; z-index:1; }
.sce-tl-hs__table td strong{ display:block; font-weight:600; color:var(--sce-ink); }
.sce-tl-hs__table td small{ display:block; margin-top:2px; font-size:13px; color:var(--sce-ink-soft); }
.sce-tl-hs__code{ display:inline-block; padding:2px 8px; border-radius:6px; background:var(--sce-red-softer); color:var(--sce-red); font:600 14px/1.5 var(--sce-font-mono,'IBM Plex Mono',monospace); white-space:nowrap; }
.sce-tl-hs__note{ display:inline-block; font-size:13.5px; color:#B54708; }
.sce-tl-hs__empty{ margin:12px 0 0!important; padding:14px; border:1px dashed var(--sce-line); border-radius:12px; text-align:center; color:var(--sce-ink-soft); }
@media (max-width:639px){
  .sce-tl-hs__table thead{ display:none; }
  .sce-tl-hs__table tr{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; padding:12px 14px; border-bottom:1px solid var(--sce-line); }
  .sce-tl-hs__table td{ padding:0!important; border:0!important; }
  .sce-tl-hs__table td:nth-child(3){ grid-column:2; }
  .sce-tl-hs__table td:nth-child(3) .sce-cp-muted{ display:none; }
}
.sce-tl-hs__table tr[hidden]{ display:none!important; }
@media (max-width:639px){
  .sce-tl-hs .sce-tl-chips{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .sce-tl-hs .sce-tl-chips::-webkit-scrollbar{ display:none; }
  .sce-tl-hs .sce-tl-chips button{ flex:none; }
}