/* =====================================================================
   TIỆN ÍCH TÍ NỊ TÍ HON — kiểu dùng chung cho các trang công cụ lẻ
   Khối nổi ba chiều, nền trắng pha xanh da trời pastel.
   ===================================================================== */
:root{
  --lam:#3b9ae1; --lam-d:#2a6fae;
  --tim:#8b7ef0; --tim-d:#6354cf;
  --luc:#3fc79a; --luc-d:#2a9b76;
  --cam:#ffa552; --cam-d:#d47a26;
  --hong:#f4718b; --hong-d:#cf4c67;
  --vang:#f0b429; --vang-d:#c08c10;
  --muc:#123a5c; --nhat:#6b8aa6; --vien:#d5e8f8; --trang:#fff;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:'Be Vietnam Pro',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--muc);font-size:15px;line-height:1.6;
  background:
    radial-gradient(1200px 560px at 10% -10%,#ffffff 0%,rgba(255,255,255,0) 60%),
    radial-gradient(900px 480px at 95% 5%,#fdf2ff 0%,rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#f6fbff 0%,#e8f3ff 100%);
  background-attachment:fixed;min-height:100vh;
}
a{color:var(--lam-d)}
.bao{max-width:940px;margin:0 auto;padding:18px 16px 56px}
.rong{max-width:1120px}

/* ---------- đỉnh trang ---------- */
.dinh{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.dinh .bieu{width:54px;height:54px;flex:none;border-radius:17px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(145deg,#ffffff,#dcefff);
  box-shadow:0 4px 0 #a9cdea,0 10px 20px rgba(80,140,200,.2),inset 0 2px 0 #fff}
.dinh h1{margin:0;font-size:24px;font-weight:900;letter-spacing:-.4px}
.dinh .sub{font-size:13.5px;color:var(--nhat)}
.day{flex:1}

/* ---------- nút ---------- */
.nut{border:none;border-radius:13px;padding:11px 20px;font:inherit;font-weight:800;cursor:pointer;color:#fff;
  background:linear-gradient(145deg,#8fd0ff,#3f93d8 60%,#2f7fc4);text-shadow:0 1px 2px rgba(16,55,90,.3);
  box-shadow:0 4px 0 var(--lam-d),0 10px 18px rgba(47,127,196,.26),inset 0 2px 0 rgba(255,255,255,.5);
  transition:.14s;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.nut:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--lam-d),0 14px 22px rgba(47,127,196,.3),inset 0 2px 0 rgba(255,255,255,.5)}
.nut:active{transform:translateY(3px);box-shadow:0 1px 0 var(--lam-d),inset 0 2px 0 rgba(255,255,255,.45)}
.nut.phu{background:linear-gradient(145deg,#ffffff,#eaf4fe);color:#2a6aa0;text-shadow:none;
  box-shadow:0 3px 0 #cfe2f3,0 8px 16px rgba(80,140,200,.15),inset 0 2px 0 #fff}
.nut.luc{background:linear-gradient(145deg,#8ee3c2,#1f9f74 65%,#178a63);box-shadow:0 4px 0 #137453,0 10px 18px rgba(31,159,116,.26),inset 0 2px 0 rgba(255,255,255,.45)}
.nut.luc:active{box-shadow:0 1px 0 #137453,inset 0 2px 0 rgba(255,255,255,.4)}
.nut.cam{background:linear-gradient(145deg,#ffd0a0,#e8902f 65%,#d47a26);box-shadow:0 4px 0 var(--cam-d),0 10px 18px rgba(255,165,82,.26),inset 0 2px 0 rgba(255,255,255,.45)}
.nut.nho{padding:7px 14px;font-size:13px;border-radius:11px}

/* ---------- thẻ ---------- */
.the{border-radius:22px;padding:20px;background:var(--trang);border:2px solid var(--vien);
  box-shadow:0 6px 0 rgba(173,206,233,.5),0 18px 34px rgba(70,135,200,.16);margin-bottom:18px}
.the h2{margin:0 0 4px;font-size:18px;font-weight:900}
.the .ghi{font-size:12.5px;color:var(--nhat);margin:0 0 14px}

/* ---------- ô nhập ---------- */
.hang{display:flex;gap:13px;flex-wrap:wrap;align-items:flex-end}
.o{display:flex;flex-direction:column;gap:5px;flex:1;min-width:150px}
.o.hep{flex:0 0 auto;min-width:120px}
.o label{font-size:12.5px;font-weight:800;color:#2a6aa0}
.o input,.o select,.o textarea{border:2px solid #cfe4f7;border-radius:12px;padding:10px 13px;font:inherit;font-size:15px;
  background:#fbfdff;box-shadow:inset 0 2px 4px rgba(120,160,200,.1);transition:.14s;width:100%}
.o input:focus,.o select:focus,.o textarea:focus{outline:none;border-color:#6fb0e6;box-shadow:0 0 0 3px rgba(111,176,230,.22)}
.o textarea{min-height:140px;resize:vertical;font-family:inherit;font-size:14px;line-height:1.7}
.o .nho{font-size:11.5px;color:var(--nhat);font-weight:600}
.o input.so{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}

.chon-hang{display:flex;gap:8px;flex-wrap:wrap}
.chon-hang button{border:none;border-radius:11px;padding:8px 15px;font:inherit;font-size:13.5px;font-weight:800;
  cursor:pointer;background:linear-gradient(145deg,#ffffff,#eaf4fe);color:#2a6aa0;
  box-shadow:0 3px 0 #cfe2f3,inset 0 2px 0 #fff;transition:.14s}
.chon-hang button:hover{transform:translateY(-2px)}
.chon-hang button.chon{background:linear-gradient(145deg,#9ed2f7,#3f93d8);color:#fff;
  box-shadow:0 3px 0 var(--lam-d),inset 0 2px 0 rgba(255,255,255,.5);text-shadow:0 1px 2px rgba(16,55,90,.3)}

/* ---------- kết quả ---------- */
.kq{border-radius:20px;padding:20px;margin-bottom:18px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(140deg,#9fd8ff,#6fa8e8 42%,#8b7ef0 100%);
  box-shadow:0 7px 0 rgba(90,130,190,.45),0 20px 38px rgba(90,130,200,.3),inset 0 2px 0 rgba(255,255,255,.4)}
.kq::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 180px at 85% -10%,rgba(255,255,255,.45),transparent 65%)}
.kq>*{position:relative;z-index:1}
.kq.luc{background:linear-gradient(140deg,#a8edcf,#4fc79d 45%,#2a9b76);box-shadow:0 7px 0 rgba(42,155,118,.45),0 20px 38px rgba(63,199,154,.3),inset 0 2px 0 rgba(255,255,255,.4)}
.kq.cam{background:linear-gradient(140deg,#ffd9ad,#f0a152 45%,#d47a26);box-shadow:0 7px 0 rgba(212,122,38,.45),0 20px 38px rgba(255,165,82,.3),inset 0 2px 0 rgba(255,255,255,.4)}
.kq .nhan{font-size:13px;font-weight:800;opacity:.95;text-shadow:0 1px 2px rgba(16,55,90,.3)}
.kq .so-lon{font-size:36px;font-weight:900;line-height:1.15;margin:2px 0 4px;text-shadow:0 2px 5px rgba(16,55,90,.32);
  font-variant-numeric:tabular-nums}
.kq .phu{font-size:13.5px;opacity:.97;line-height:1.6}
.kq-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kq-o{background:rgba(255,255,255,.2);border-radius:15px;padding:12px 15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.kq-o .nhan{font-size:12px}
.kq-o .so{font-size:21px;font-weight:900;font-variant-numeric:tabular-nums;text-shadow:0 2px 4px rgba(16,55,90,.3)}

/* ---------- bảng ---------- */
.bang{width:100%;border-collapse:collapse;font-size:13.5px}
.bang th{background:linear-gradient(180deg,#eaf5ff,#dcecfb);color:#23597f;font-weight:900;
  padding:9px 11px;text-align:left;border-bottom:2px solid #c9e0f5}
.bang td{padding:8px 11px;border-bottom:1px solid #e9f2fa}
.bang tr:last-child td{border-bottom:none}
.bang td.so,.bang th.so{text-align:right;font-variant-numeric:tabular-nums}
.bang tr.tong td{font-weight:900;background:#f2f9ff;border-top:2px solid #c9e0f5}
.bang-cuon{overflow-x:auto;border-radius:14px;border:1px solid #e3f0fb}

/* ---------- ghi chú ---------- */
.luu-y{border-radius:14px;padding:12px 16px;font-size:12.5px;line-height:1.65;margin-bottom:18px;
  background:linear-gradient(160deg,#fffdf3,#fff6dd);border:1px solid #f3e2b4;color:#7a5e18}
.luu-y b{color:#5d4710}
.luu-y a{color:#8a6a15}

/* ---------- dẫn sang công cụ khác ---------- */
.khac{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.khac a{border-radius:16px;padding:14px;text-decoration:none;color:#fff;display:block;position:relative;overflow:hidden;
  transition:transform .16s,box-shadow .16s}
.khac a::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(160px 90px at 82% -8%,rgba(255,255,255,.4),transparent 62%)}
.khac a>*{position:relative;z-index:1}
.khac a:hover{transform:translateY(-4px)}
.khac .bi{font-size:24px;display:block;margin-bottom:5px}
.khac b{display:block;font-size:14px;font-weight:900;text-shadow:0 2px 3px rgba(16,55,90,.3)}
.khac small{display:block;font-size:11.5px;opacity:.95;margin-top:2px;line-height:1.45}
.m-lam{background:linear-gradient(145deg,#9ad6ff,var(--lam));box-shadow:0 5px 0 var(--lam-d),0 12px 24px rgba(59,154,225,.32)}
.m-tim{background:linear-gradient(145deg,#c3b8ff,var(--tim));box-shadow:0 5px 0 var(--tim-d),0 12px 24px rgba(139,126,240,.32)}
.m-luc{background:linear-gradient(145deg,#8fe8c6,var(--luc));box-shadow:0 5px 0 var(--luc-d),0 12px 24px rgba(63,199,154,.32)}
.m-cam{background:linear-gradient(145deg,#ffd0a0,var(--cam));box-shadow:0 5px 0 var(--cam-d),0 12px 24px rgba(255,165,82,.32)}
.m-hong{background:linear-gradient(145deg,#ffb3c4,var(--hong));box-shadow:0 5px 0 var(--hong-d),0 12px 24px rgba(244,113,139,.32)}
.m-vang{background:linear-gradient(145deg,#ffe08a,var(--vang));box-shadow:0 5px 0 var(--vang-d),0 12px 24px rgba(240,180,41,.32)}

footer.chan{text-align:center;color:var(--nhat);font-size:12.5px;padding:22px 10px;line-height:1.8}
.an{display:none !important}

@media(max-width:600px){
  .bao{padding:14px 12px 40px}
  .dinh h1{font-size:20px}
  .the{padding:15px;border-radius:18px}
  .kq .so-lon{font-size:29px}
  .o{min-width:130px}
  .khac{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}
}