/* Bộ công cụ ảnh giauco.vn — ngôn ngữ thiết kế shadcn/ui dựng bằng CSS thuần.
 *
 * Trang là HTML tĩnh, không React, không bước build, nên ở đây mượn HỆ TOKEN và
 * hình dáng component của shadcn chứ không cài thư viện. Các luật bên dưới lấy
 * từ quy ước giao diện của anh Giang:
 *   · Năm bậc chữ, KHÔNG bậc nào dưới 12px. Dấu thanh chồng dấu mũ của tiếng Việt
 *     cần chiều cao, 10-11px là dưới sàn đọc được.
 *   · Ba chiều cao chuẩn là token thật: control 32, menu 38, hàng 45.
 *   · Một control không được dùng chung màu nền với mặt phẳng nó đứng lên.
 *     Nút phụ trên nền trang thì viền; trên tấm thì nền secondary.
 *   · Hai dạng dấu, tách nhau bằng NỀN chứ không bằng độ đậm.
 *   · font-semibold chỉ dành cho tiêu đề trang và tiêu đề hộp thoại.
 *
 * ⚠️ Mọi khối @media nằm ở CUỐI tệp. Đặt xen giữa là bị luật nền viết sau đè.
 */

/* Inter tự host: trang khoá CSP font-src 'self' nên không gọi Google Fonts được.
   Ba tệp, tải theo dải ký tự, máy khách chỉ lấy phần nó cần. */
@font-face{
  font-family:Inter; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:Inter; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:Inter; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Thang trung tính của shadcn, cộng màu nhận diện giauco làm primary. */
  --background:#ffffff;
  --foreground:#09090b;
  --card:#ffffff;
  --card-foreground:#09090b;
  --primary:#00a49d;
  --primary-hover:#00837e;
  --primary-foreground:#ffffff;
  --secondary:#f4f4f5;
  --secondary-foreground:#18181b;
  --muted:#f4f4f5;
  --muted-foreground:#71717a;
  --accent:#f4f4f5;
  --accent-foreground:#18181b;
  --destructive:#e7000b;
  --destructive-soft:#fef2f2;
  --destructive-border:#fecaca;
  --warning:#a16207;
  --warning-soft:#fefce8;
  --warning-border:#fde68a;
  --border:#e4e4e7;
  --input:#e4e4e7;
  --ring:#00a49d;
  /* Dạng dấu "đủ": nền primary 10%, chữ primary. */
  --primary-soft:rgba(0,164,157,.1);

  --radius:.625rem;
  --radius-sm:calc(var(--radius) - 4px);
  --radius-md:calc(var(--radius) - 2px);
  --radius-lg:var(--radius);
  --radius-xl:calc(var(--radius) + 4px);

  /* Ba chiều cao chuẩn, dùng làm token thật chứ không gõ số rải rác. */
  --h-control:32px;
  --h-menu:38px;
  --h-row:45px;

  /* Năm bậc chữ. Không bậc nào dưới 12px. */
  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-lg:18px;
  --text-xl:24px;

  --rong:min(1080px, 100% - 2.5rem);
  /* Trang công cụ ảnh cần bề ngang, ảnh to thì nhìn mới ra chi tiết. */
  --rong-rong:min(1800px, 100% - 2.5rem);
  --bong-xs:0 1px 2px 0 rgb(0 0 0 / .05);
  --bong-sm:0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);
}

.trang-rong{--rong:var(--rong-rong)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--background); color:var(--foreground);
  font:400 var(--text-base)/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-feature-settings:"cv11","ss01"; font-variation-settings:"opsz" 32;
  -webkit-font-smoothing:antialiased;
}
.bao{width:var(--rong); margin-inline:auto}
:where(a){color:var(--primary)}
:focus-visible{outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 45%, transparent); border-radius:var(--radius-md)}

/* --------------------------------------------------------------- đầu trang */
header{border-bottom:1px solid var(--border); padding:2.25rem 0 1.75rem; background:var(--background)}
header .nhan{
  margin:0 0 .5rem; font-size:var(--text-xs); font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-foreground);
}
header h1{margin:0 0 .5rem; font-size:1.875rem; line-height:1.2; font-weight:600; letter-spacing:-.02em}
header .mota{margin:0; color:var(--muted-foreground); font-size:var(--text-base); max-width:62ch}
.header--gon{padding:1.75rem 0 1.4rem}
.header--gon h1{font-size:1.5rem}
.header--gon .mota{font-size:var(--text-sm)}

/* Thanh chuyển công cụ: khuôn Tabs của shadcn, nền muted, con trượt là tấm trắng. */
.thanh-cong-cu{border-bottom:1px solid var(--border); background:var(--background)}
.thanh-cong-cu .bao{display:flex; padding:.75rem 0}
.thanh-cong-cu .bao > *{flex:0 0 auto}
.thanh-cong-cu a{
  display:inline-flex; align-items:center; height:var(--h-control); padding:0 .9rem;
  border-radius:var(--radius-md); text-decoration:none; color:var(--muted-foreground);
  font-size:var(--text-sm); font-weight:500; white-space:nowrap; transition:.15s;
}
.thanh-cong-cu a:hover{color:var(--primary)}
.thanh-cong-cu a[aria-current=page]{background:var(--primary-soft); color:var(--primary)}

main{padding:1.75rem 0 3.5rem}

/* ------------------------------------------------------------------ nút bấm */
.nut{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:var(--h-control); padding:0 .85rem; border-radius:var(--radius-md);
  border:1px solid var(--border); background:var(--background); color:var(--foreground);
  font:500 var(--text-sm)/1 Inter,system-ui,sans-serif; cursor:pointer;
  box-shadow:var(--bong-xs); transition:.15s; text-decoration:none; white-space:nowrap;
}
.nut:hover{background:var(--accent); color:var(--accent-foreground)}
.nut--chinh{background:var(--primary); border-color:var(--primary); color:var(--primary-foreground)}
.nut--chinh:hover{background:var(--primary-hover); border-color:var(--primary-hover); color:var(--primary-foreground)}
/* Nút phụ đứng trên TẤM thì dùng nền secondary, không dùng viền: cùng màu nền
   với mặt phẳng bên dưới là control biến mất. */
.nut--nhat{background:var(--secondary); border-color:transparent; color:var(--secondary-foreground); box-shadow:none}
.nut--nhat:hover{background:var(--border)}
.nut--to{height:var(--h-menu); width:100%; font-size:var(--text-sm)}
.nut[disabled],.nut:disabled{opacity:.5; cursor:not-allowed; pointer-events:none}
.lienket{background:none; border:none; padding:0; font:inherit; color:var(--primary); text-decoration:underline; text-underline-offset:3px; cursor:pointer}

/* ------------------------------------------------------- vùng thả ảnh (card) */
.tha{
  border:1px dashed var(--border); border-radius:var(--radius-xl); background:var(--card);
  padding:3rem 1.5rem; text-align:center; cursor:pointer; transition:.15s;
}
.tha:hover,.tha:focus-visible{border-color:var(--primary); background:color-mix(in srgb, var(--primary) 3%, var(--card))}
.tha.dang-keo{border-color:var(--primary); border-style:solid; background:var(--primary-soft)}
.tha svg{color:var(--primary)}
.tha__chinh{margin:.9rem 0 .35rem; font-size:var(--text-base); font-weight:500}
.tha__phu{margin:0; color:var(--muted-foreground); font-size:var(--text-sm)}

/* ------------------------------------------------------------------- tấm */
.tuy-chon,.bang{
  background:var(--card); color:var(--card-foreground);
  border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--bong-sm);
}
.tuy-chon{margin-top:1rem; padding:1.25rem}
.tuy-chon__hang{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.o{display:flex; flex-direction:column; gap:.45rem; min-width:0}
.o__ten{font-size:var(--text-sm); font-weight:500; color:var(--foreground)}
.o__ten b{color:var(--primary); font-variant-numeric:tabular-nums}
.o select{
  height:var(--h-control); width:100%; padding:0 .65rem; border:1px solid var(--input);
  border-radius:var(--radius-md); background:var(--background); color:var(--foreground);
  font:400 var(--text-sm)/1 Inter,system-ui,sans-serif; box-shadow:var(--bong-xs); cursor:pointer;
}
.o select:hover{border-color:var(--primary)}
.o.mo-di{opacity:.5; pointer-events:none}

/* Thanh trượt kiểu shadcn Slider */
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:16px;
  background:transparent; cursor:pointer; margin:.5rem 0 0;
}
input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:999px; background:var(--secondary)}
input[type=range]::-moz-range-track{height:6px; border-radius:999px; background:var(--secondary)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; margin-top:-5px; border-radius:50%;
  background:var(--background); border:2px solid var(--primary); box-shadow:var(--bong-xs);
}
input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--background);
  border:2px solid var(--primary); box-shadow:var(--bong-xs);
}

.chon-nho{display:flex; gap:.6rem; align-items:flex-start; margin-top:1.1rem; font-size:var(--text-sm); line-height:1.55; color:var(--muted-foreground)}
.chon-nho input[type=checkbox]{
  appearance:none; -webkit-appearance:none; flex:0 0 auto; width:16px; height:16px; margin:.18rem 0 0;
  border:1px solid var(--input); border-radius:var(--radius-sm); background:var(--background);
  box-shadow:var(--bong-xs); cursor:pointer; position:relative;
}
.chon-nho input[type=checkbox]:checked{background:var(--primary); border-color:var(--primary)}
.chon-nho input[type=checkbox]:checked::after{
  content:''; position:absolute; left:4.5px; top:1px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.chon-nho code,code{
  background:var(--muted); border-radius:var(--radius-sm); padding:.1rem .35rem;
  font-size:var(--text-xs); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.ghi-chu{
  margin:1.1rem 0 0; padding:.7rem .9rem; border-radius:var(--radius-md);
  background:var(--primary-soft); color:var(--primary-hover); font-size:var(--text-sm); line-height:1.55;
}
.ghi-chu.canh{background:var(--warning-soft); color:var(--warning); border:1px solid var(--warning-border)}

/* ------------------------------------------------------------- kết quả */
.ket-qua{margin-top:2rem}
.ket-qua__dau{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.9rem}
.ket-qua__dau h2{margin:0; font-size:var(--text-lg); font-weight:600; letter-spacing:-.01em}
.ket-qua__nut{display:flex; gap:.75rem}
.danh-sach{display:flex; flex-direction:column; gap:.75rem}
.the-anh{
  display:grid; grid-template-columns:88px minmax(0,1fr) auto; gap:1rem; align-items:center;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:.85rem; box-shadow:var(--bong-xs);
}
.the-anh__hinh{width:88px; height:88px; border-radius:var(--radius-md); object-fit:cover; background:var(--muted); border:1px solid var(--border)}
.the-anh__than{min-width:0}
.the-anh__ten{margin:0 0 .2rem; font-weight:500; font-size:var(--text-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.the-anh__so{margin:0 0 .5rem; font-size:var(--text-xs); color:var(--muted-foreground)}
.the-anh__so .mui{color:var(--primary); font-weight:500}
/* Các nút trên thẻ đứng trên TẤM nên mang nền secondary, không viền. */
.the-anh__nut{display:flex; flex-direction:column; gap:.5rem}
.the-anh__nut .nut:not(.nut--chinh){background:var(--secondary); border-color:transparent; box-shadow:none}
.the-anh__nut .nut:not(.nut--chinh):hover{background:var(--border)}
.the-anh.dang-chay{opacity:.6}
.chips{display:flex; flex-wrap:wrap; gap:.35rem}
.chip{
  display:inline-flex; align-items:center; font-size:var(--text-xs); line-height:1.45;
  padding:.1rem .5rem; border-radius:var(--radius-sm); font-weight:500;
  background:var(--destructive-soft); color:var(--destructive); border:1px solid var(--destructive-border);
}
.chip--sach{background:var(--primary-soft); color:var(--primary-hover); border-color:color-mix(in srgb, var(--primary) 25%, transparent)}
.chip--vang{background:var(--warning-soft); color:var(--warning); border-color:var(--warning-border)}
.chip--giu{background:var(--muted); color:var(--muted-foreground); border-color:var(--border)}
.the-anh__loi{margin:.35rem 0 0; font-size:var(--text-xs); color:var(--destructive)}
.the-anh__canh{margin:.35rem 0 0; font-size:var(--text-xs); color:var(--warning)}

/* ----------------------------------------- hai trang công cụ: bố cục hai cột */
.lam-viec{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.25rem; margin-top:1.25rem; align-items:start}
.khung-anh{
  background:var(--muted); border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:1rem; min-height:340px; display:grid; place-items:center;
}
.xem-mot{line-height:0; max-width:100%}
.xem-mot img{max-width:100%; max-height:76vh; border-radius:var(--radius-md); display:block}
.dang-cho{display:grid; place-items:center; gap:.9rem; min-height:300px; padding:2rem}
.vong-quay{width:40px; height:40px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--primary); animation:quay .8s linear infinite}
@keyframes quay{to{transform:rotate(360deg)}}
.dang-cho .loi{color:var(--destructive); text-align:center; margin:0; font-size:var(--text-sm)}

.bang{padding:1.25rem; position:sticky; top:1rem}
.bang__ten{margin:0 0 .35rem; font-size:var(--text-base); font-weight:600; letter-spacing:-.01em}
.bang__mo{margin:0 0 1.1rem; font-size:var(--text-xs); color:var(--muted-foreground); line-height:1.6}
.muc-hang{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem}
.muc-hang--4{grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem}
.muc-hang--4 .muc{padding:0 .2rem; min-height:var(--h-control)}
.muc-hang--4 .muc b{font-size:var(--text-sm); font-weight:500}
.bang__nhan{margin:1rem 0 .4rem; font-size:var(--text-xs); font-weight:600; color:var(--muted-foreground); text-transform:uppercase; letter-spacing:.06em}
.bang__nhan:first-of-type{margin-top:.5rem}
.muc{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem;
  min-height:var(--h-row); padding:.45rem .3rem; cursor:pointer;
  border:1px solid var(--input); border-radius:var(--radius-md); background:var(--background);
  color:var(--foreground); font:400 var(--text-sm)/1.2 Inter,system-ui,sans-serif;
  box-shadow:var(--bong-xs); transition:.15s;
}
.muc b{font-size:var(--text-sm); font-weight:600}
.muc span{font-size:var(--text-xs); color:var(--muted-foreground); line-height:1.3; text-align:center}
.muc:hover{border-color:var(--primary)}
.muc[aria-pressed=true]{background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); box-shadow:var(--bong-sm)}
.muc[aria-pressed=true] span{color:color-mix(in srgb,#fff 80%,transparent)}

.co-anh{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:1.1rem; font-size:var(--text-xs); font-variant-numeric:tabular-nums}
.co-anh__cu{background:var(--muted); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.2rem .45rem; color:var(--muted-foreground)}
.co-anh__moi{background:var(--primary-soft); border:1px solid color-mix(in srgb,var(--primary) 25%,transparent); border-radius:var(--radius-sm); padding:.2rem .45rem; color:var(--primary-hover); font-weight:600}
.co-anh__mui{color:var(--muted-foreground)}
.loi-nhac{margin:.6rem 0 0; font-size:var(--text-xs); color:var(--warning); line-height:1.5}
.loi-nhac:empty{display:none}
.xong{margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--border)}
.xong__co{margin:0 0 .75rem; font-size:var(--text-sm); font-weight:600; color:var(--primary-hover); font-variant-numeric:tabular-nums}
.xong__meo:empty{display:none}
.xong__meo{margin:.6rem 0 0; font-size:var(--text-xs); color:var(--muted-foreground); line-height:1.5}
#nut-chay{margin-top:1.1rem}
#nut-tai-het{margin-top:.5rem}
#doi-anh{margin-top:.5rem}

/* ------------------------------------------------- thanh trượt so sánh */
.ss{position:relative; overflow:hidden; border-radius:var(--radius-md); line-height:0; touch-action:none; user-select:none; max-width:100%; cursor:ew-resize}
/* Ở cỡ thật, ngón tay dành cho việc cuộn ảnh chứ không kéo vạch. */
.ss--that{touch-action:auto; cursor:default}
.ss img{display:block; max-width:100%; max-height:76vh; height:auto; user-select:none; -webkit-user-drag:none}
.ss__truoc-boc{position:absolute; top:0; left:0; bottom:0; width:50%; overflow:hidden}
.ss__truoc-boc img{max-width:none; max-height:none; height:100%; object-fit:cover; object-position:left top}
.ss__vach{position:absolute; top:0; bottom:0; width:2px; background:#fff; box-shadow:0 0 0 1px rgb(0 0 0/.2); pointer-events:none}
.ss__num{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--background); color:var(--foreground); border-radius:999px; padding:.3rem .55rem;
  font-size:var(--text-xs); line-height:1; letter-spacing:.08em; white-space:nowrap; box-shadow:var(--bong-sm);
}
.ss__nhan{
  position:absolute; bottom:.65rem; font-size:var(--text-xs); line-height:1; padding:.3rem .55rem;
  border-radius:var(--radius-sm); background:rgb(9 9 11/.75); color:#fff; pointer-events:none; font-weight:500;
}
.ss__nhan--trai{left:.65rem}
.ss__nhan--phai{right:.65rem}
.duoi-anh{display:flex; justify-content:center; margin-top:.6rem}
.duoi-anh:empty{display:none}

/* ------------------------------------------------------------ bộ phóng xem */
.zoom{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; justify-content:center}
.zoom__nut{height:var(--h-control); min-width:var(--h-control); padding:0 .5rem; font-size:var(--text-sm)}
.zoom__nut--chu{padding:0 .75rem; font-size:var(--text-xs)}
.zoom__nut[aria-pressed=true]{background:var(--primary); border-color:var(--primary); color:var(--primary-foreground)}
.zoom__so{
  min-width:86px; text-align:center; font-size:var(--text-xs); font-weight:500;
  color:var(--muted-foreground); font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------- dải ảnh đã chọn */
.dai-anh{display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.5rem; margin-bottom:.75rem; scrollbar-width:thin}
.dai-anh__o{
  position:relative; flex:0 0 auto; width:76px; height:76px; padding:0; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--muted);
  overflow:hidden; line-height:0;
}
.dai-anh__o img{width:100%; height:100%; object-fit:cover}
.dai-anh__o[aria-pressed=true]{border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-soft)}
.dai-anh__o--loi{border-color:var(--destructive)}
.dai-anh__trong{display:block; width:100%; height:100%}
.dai-anh__nhan{
  position:absolute; left:0; right:0; bottom:0; padding:.1rem 0; text-align:center;
  font-size:var(--text-xs); line-height:1.4; background:rgb(9 9 11/.7); color:#fff;
}
.dai-anh__o--loi .dai-anh__nhan{background:var(--destructive)}
.dai-anh__bo{
  position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%;
  background:rgb(9 9 11/.65); color:#fff; font-size:var(--text-xs); line-height:18px;
  text-align:center; opacity:0; transition:.15s;
}
.dai-anh__o:hover .dai-anh__bo,.dai-anh__o:focus-within .dai-anh__bo{opacity:1}
.dai-anh__bo:hover{background:var(--destructive)}
/* Xem tỉ lệ thật: bỏ mọi giới hạn kích thước, khung cha lo phần cuộn.
   Làm nét chỉ nhìn ra được ở cỡ này, ảnh thu nhỏ thì kéo vạch gần như vô nghĩa.
   ⚠️ Phải gỡ CẢ `max-width:100%` LẪN `overflow:hidden` của .ss, không thì ảnh to
   hơn khung bị chính .ss cắt mất mép và khung cha chẳng có gì để cuộn. */
.ss--that{max-width:none; width:max-content; overflow:visible}
.ss--that img{max-width:none; max-height:none}
.khung-anh--cuon{overflow:auto; place-items:start; justify-items:start; max-height:78vh}
.ss__dieu-khien{position:absolute; left:8%; right:8%; bottom:-2px; width:84%; opacity:0; height:24px; cursor:ew-resize}
.ss__dieu-khien:focus-visible{opacity:1}

/* ------------------------------------------------------------- chân trang */
footer{border-top:1px solid var(--border); padding:1.75rem 0; margin-top:2.5rem; background:var(--muted)}
footer p{margin:0 0 .4rem; font-size:var(--text-sm); color:var(--muted-foreground)}
.footer__thuong-hieu{color:var(--foreground)}
.footer__thuong-hieu b{font-weight:600}
.footer__phap-ly{display:flex; flex-wrap:wrap; gap:.3rem 1rem; margin-top:.9rem}
.footer__phap-ly a{font-size:var(--text-xs); color:var(--muted-foreground); text-decoration:none}
.footer__phap-ly a:hover{color:var(--primary); text-decoration:underline; text-underline-offset:3px}

/* =========================== màn hình hẹp: để CUỐI tệp =========================== */
@media (max-width:820px){
  .lam-viec{grid-template-columns:1fr}
  .bang{position:static}
}
@media (max-width:640px){
  header h1{font-size:1.5rem}
  .header--gon h1{font-size:1.35rem}
  .tuy-chon__hang{grid-template-columns:1fr}
  .the-anh{grid-template-columns:60px minmax(0,1fr); gap:.8rem; align-items:start}
  .the-anh__hinh{width:60px; height:60px}
  .the-anh__nut{grid-column:1 / -1; flex-direction:row}
  .the-anh__nut .nut{flex:1}
  .ket-qua__dau{flex-direction:column; align-items:stretch}
  .ket-qua__nut .nut{flex:1}
    .xem-mot img,.ss img{max-height:52vh}
  .thanh-cong-cu .bao{overflow-x:auto; scrollbar-width:none}
  .thanh-cong-cu .bao::-webkit-scrollbar{display:none}
}