/* ==========================================================================
   TRẦN MINH — Trang CV cá nhân (Product Manager, Hà Nội)
   Bố cục: một TỜ GIẤY A4 căn giữa (tối đa 900px, nền trắng, bóng mềm) trên
   nền xám; phía trên có THANH CÔNG CỤ nhỏ (4 chấm đổi chủ đề màu, nút
   "In / Lưu PDF" gọi window.print(), Tải JSON, chuyển VI/EN). Tờ CV chia
   2 CỘT như CV giấy: cột trái hẹp (vòng tròn chữ cái TM, tên + chức danh,
   liên hệ có icon, kỹ năng THANH %, ngôn ngữ chấm tròn, công cụ dạng chip,
   sở thích, mã QR vẽ bằng lưới CSS); cột phải rộng (tóm tắt, TIMELINE kinh
   nghiệm dọc có chấm + năm, học vấn, dự án nổi bật có số liệu, chứng chỉ,
   người tham chiếu). Tiêu đề mục chữ hoa nhỏ + gạch dưới màu nhấn.
   in.html: cùng nội dung, không thanh công cụ, @page A4, ngắt trang hợp lý.
   Font: "Instrument Sans" (toàn bộ). Màu mặc định: mực #1A1A1A + giấy trắng
   + nhấn teal #0F766E. 4 chủ đề đổi được: teal / indigo / rust / graphite
   (JS đặt data-theme trên <html>, lưu localStorage).
   ========================================================================== */
:root{
  --ink:#1A1A1A; --ink-2:#4B4B4B; --muted:#7A7A7A; --line:#E6E6E3;
  --paper:#FFFFFF; --backdrop:#EDEDEA; --side-bg:#F6F6F4;
  --accent:#0F766E; --accent-soft:#E0F2EF; --accent-ink:#0B5A54;
  --ff:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --r:6px; --sheet-w:900px; --side-w:290px;
}
html[data-theme="indigo"]{--accent:#4338CA;--accent-soft:#E4E2FA;--accent-ink:#3730A3}
html[data-theme="rust"]{--accent:#B7410E;--accent-soft:#F8E4DA;--accent-ink:#93330B}
html[data-theme="graphite"]{--accent:#374151;--accent-soft:#E5E7EB;--accent-ink:#1F2937}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{font-family:var(--ff);color:var(--ink);background:var(--backdrop);line-height:1.55;font-size:14px;padding:26px 16px 60px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4{line-height:1.15;font-weight:600}
.ph{background:var(--img,#DDD) center/cover no-repeat}
svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Thanh công cụ trên tờ CV ---------- */
.toolbar{max-width:var(--sheet-w);margin:0 auto 14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.toolbar__brand{font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.themes{display:flex;gap:8px;align-items:center;padding:6px 10px;background:var(--paper);border:1px solid var(--line);border-radius:999px}
.themes span{font-size:11px;color:var(--muted);margin-right:2px}
.dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0;transition:transform .15s}
.dot:hover{transform:scale(1.12)}
.dot.is-active{box-shadow:0 0 0 2px var(--ink)}
.dot--teal{background:#0F766E}.dot--indigo{background:#4338CA}.dot--rust{background:#B7410E}.dot--graphite{background:#374151}
.toolbar__sp{flex:1}
.tbtn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.tbtn:hover{border-color:var(--ink)}
.tbtn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.tbtn--primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--paper)}
.lang a{padding:7px 12px;font-size:12px;font-weight:600;color:var(--muted)}
.lang a.is-active{background:var(--ink);color:#fff}

/* ---------- Tờ giấy A4 ---------- */
.sheet{max-width:var(--sheet-w);margin:0 auto;background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.06),0 18px 50px -20px rgba(0,0,0,.28);display:grid;grid-template-columns:var(--side-w) 1fr;border-top:6px solid var(--accent)}
.side{background:var(--side-bg);padding:38px 28px 34px;border-right:1px solid var(--line)}
.main{padding:38px 40px 40px;min-width:0}

/* Tiêu đề mục */
.sec{margin-bottom:26px}
.sec:last-child{margin-bottom:0}
.sec__t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sec__t::after{content:"";height:2px;width:34px;background:var(--accent);border-radius:2px}
.main .sec__t::after{flex:1;max-width:none;height:1px;background:linear-gradient(90deg,var(--accent) 0 34px,var(--line) 34px)}

/* ---------- Cột trái ---------- */
.avatar{width:120px;height:120px;border-radius:50%;margin:0 auto 18px;position:relative}
.avatar__ini{width:100%;height:100%;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:700;letter-spacing:.02em;box-shadow:0 0 0 4px var(--paper),0 0 0 6px var(--accent-soft)}
.avatar__img{width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 4px var(--paper),0 0 0 6px var(--accent-soft)}
.avatar__badge{position:absolute;right:-2px;bottom:6px;background:var(--paper);border:1px solid var(--line);border-radius:999px;font-size:10px;font-weight:700;padding:3px 8px;color:var(--accent-ink);white-space:nowrap}
.who{text-align:center;margin-bottom:26px}
.who h1{font-size:26px;letter-spacing:-.02em;font-weight:700}
.who p{color:var(--accent-ink);font-weight:600;font-size:13px;margin-top:4px}
.who small{display:block;color:var(--muted);font-size:12px;margin-top:4px}

.contact li{display:flex;gap:10px;align-items:flex-start;font-size:13px;padding:5px 0;color:var(--ink-2)}
.contact li svg{margin-top:3px;color:var(--accent)}
.contact li b{font-weight:500;color:var(--ink)}
.contact a:hover{text-decoration:underline}

/* Kỹ năng thanh % */
.skills li{margin-bottom:9px}
.skills .row{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px}
.skills .row b{font-weight:500}
.skills .row span{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;width:var(--p,50%);background:var(--accent);border-radius:3px}

/* Ngôn ngữ chấm */
.langs li{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding:4px 0}
.langs small{color:var(--muted);font-size:11px;margin-left:6px}
.dots{display:flex;gap:4px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--accent)}

/* Chip công cụ */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:11.5px;padding:4px 9px;border:1px solid var(--line);background:var(--paper);border-radius:999px;color:var(--ink-2)}
.chips li.hi{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}

.hobbies{display:grid;gap:6px}
.hobbies li{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-2)}
.hobbies svg{color:var(--accent)}

/* Mã QR CSS */
.qrbox{display:flex;gap:14px;align-items:center}
.qr{display:grid;grid-template-columns:repeat(21,1fr);width:92px;height:92px;padding:4px;background:#fff;border:1px solid var(--line);flex:none}
.qr i{background:#fff}
.qr i.k{background:var(--ink)}
.qrbox p{font-size:11.5px;color:var(--muted);line-height:1.45}
.qrbox p a{color:var(--accent-ink);font-weight:600;word-break:break-all}

/* ---------- Cột phải ---------- */
.summary{font-size:14px;color:var(--ink-2);line-height:1.65}
.summary b{color:var(--ink);font-weight:600}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.facts li{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.facts b{display:block;font-size:20px;font-weight:700;color:var(--accent-ink);letter-spacing:-.02em;line-height:1.1}
.facts span{font-size:11px;color:var(--muted)}

/* Timeline kinh nghiệm */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.job{position:relative;padding-bottom:22px}
.job:last-child{padding-bottom:0}
.job::before{content:"";position:absolute;left:-26px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--accent)}
.job.is-now::before{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.job__head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.job__head h3{font-size:15px;font-weight:700}
.job__head h3 span{font-weight:500;color:var(--ink-2)}
.job__time{font-size:12px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);padding:2px 9px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.job__meta{font-size:12px;color:var(--muted);margin-top:2px}
.job ul{margin-top:8px;display:grid;gap:4px}
.job ul li{position:relative;padding-left:14px;font-size:13px;color:var(--ink-2)}
.job ul li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.job ul li b{font-weight:600;color:var(--ink)}

/* Học vấn */
.edu{display:grid;gap:12px}
.edu li{display:grid;grid-template-columns:86px 1fr;gap:12px}
.edu .y{font-size:12px;font-weight:600;color:var(--accent-ink);font-variant-numeric:tabular-nums;padding-top:2px}
.edu h3{font-size:14px;font-weight:700}
.edu p{font-size:12.5px;color:var(--ink-2)}

/* Dự án nổi bật */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.proj{border:1px solid var(--line);border-radius:var(--r);padding:14px;position:relative;overflow:hidden}
.proj::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.proj h3{font-size:13.5px;font-weight:700;margin-bottom:4px}
.proj p{font-size:12px;color:var(--ink-2);line-height:1.5}
.proj .m{margin-top:10px;display:flex;gap:10px}
.proj .m b{display:block;font-size:18px;font-weight:700;color:var(--accent-ink);letter-spacing:-.02em;line-height:1.1}
.proj .m span{font-size:10.5px;color:var(--muted)}
.proj .tag{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:4px}

/* Chứng chỉ */
.certs{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.certs li{display:flex;gap:10px;align-items:flex-start;font-size:13px}
.certs svg{color:var(--accent);margin-top:3px}
.certs b{font-weight:600;display:block}
.certs span{font-size:12px;color:var(--muted)}

/* Người tham chiếu */
.refs{font-size:13px;color:var(--ink-2);border:1px dashed var(--line);border-radius:var(--r);padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
.refs svg{color:var(--accent);margin-top:2px}

/* ---------- Liên hệ nhanh (ẩn tới khi bấm) ---------- */
.quick{max-width:var(--sheet-w);margin:22px auto 0;text-align:center}
.quick__form{display:none;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:22px;margin-top:14px}
.quick__form.is-open{display:block}
.quick__form h2{font-size:16px;margin-bottom:4px}
.quick__form>p{font-size:13px;color:var(--muted);margin-bottom:14px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fgrid .full{grid-column:1/-1}
.field label{display:block;font-size:12px;font-weight:600;margin-bottom:5px}
.field input,.field textarea{width:100%;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{min-height:110px;resize:vertical}
.quick__note{font-size:12px;color:var(--muted);margin-top:10px}
.foot{max-width:var(--sheet-w);margin:24px auto 0;text-align:center;font-size:12px;color:var(--muted)}

/* ---------- Trang in.html (xem trên màn hình) ---------- */
body.is-print{background:#fff;padding:0}
body.is-print .sheet{box-shadow:none;max-width:210mm;min-height:297mm;border-top-width:5px}
.print-hint{background:#FFF7DB;border-bottom:1px solid #F1E2A6;padding:10px 16px;font-size:13px;text-align:center;color:#6B5600}
.print-hint a{text-decoration:underline;font-weight:600}
.print-hint button{font:inherit;font-weight:700;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:5px 12px;margin-left:8px;cursor:pointer}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  :root{--side-w:250px}
  .main{padding:30px 26px 32px}
  .side{padding:30px 22px}
  .projects{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{padding:14px 12px 40px}
  .sheet{grid-template-columns:1fr}
  .side{border-right:0;border-bottom:1px solid var(--line);padding:28px 20px}
  .main{padding:26px 20px 30px}
  .projects,.certs,.fgrid{grid-template-columns:1fr}
  .toolbar{gap:8px}
  .toolbar__brand{width:100%}
  .job__head{flex-direction:column;gap:4px}
  .edu li{grid-template-columns:1fr;gap:2px}
}

/* ---------- In ấn ---------- */
@page{size:A4;margin:12mm 10mm}
@media print{
  html,body{background:#fff;padding:0;margin:0;font-size:10.5px;line-height:1.45}
  .toolbar,.quick,.foot,.print-hint{display:none!important}
  .sheet{max-width:none;box-shadow:none;grid-template-columns:58mm 1fr;border-top-width:3px;min-height:auto}
  .side{padding:6mm 5mm;background:var(--side-bg)}
  .main{padding:6mm 7mm}
  .sec{margin-bottom:4.5mm}
  .sec__t{margin-bottom:2.5mm}
  .avatar{width:26mm;height:26mm;margin-bottom:4mm}
  .avatar__ini{font-size:28px}
  .who{margin-bottom:5mm}
  .who h1{font-size:20px}
  .contact li{padding:2px 0;font-size:10.5px}
  .skills li{margin-bottom:5px}
  .skills .row{font-size:10px}
  .bar{height:4px}
  .facts{gap:2mm;margin-top:3mm}
  .facts li{padding:2mm 3mm}
  .facts b{font-size:16px}
  .job ul li,.summary,.edu p,.proj p,.certs li,.refs{font-size:10.5px}
  .job__head h3{font-size:12.5px}
  .job ul{gap:1px;margin-top:1.5mm}
  .job ul li::before{top:7px}
  .proj h3{font-size:11.5px}
  .proj .m b{font-size:14px}
  .chips li{font-size:9.5px;padding:2px 7px}
  .qr{width:22mm;height:22mm}
  .facts li,.proj,.job,.edu li,.certs li,.refs,.sec__t{break-inside:avoid;page-break-inside:avoid}
  .sec__t{break-after:avoid;page-break-after:avoid}
  .projects{grid-template-columns:repeat(3,1fr);gap:3mm}
  .proj{padding:3mm}
  .job{padding-bottom:3.5mm}
  a[href^="http"]::after{content:""}
}