/* ==========================================================================
   TạoCV — Kiểu dáng cho 10 mẫu CV (trang A4 794 × 1123 px)
   --fs: hệ số cỡ chữ · --sp: hệ số khoảng cách (được tính tự động)
   ========================================================================== */

.cv {
  --fs: 1; --sp: 1; --xl: 1; --accent: #2563eb;
  box-sizing: border-box; position: relative; width: 794px; height: 1123px; overflow: hidden;
  background: #fff; color: #1f2329; text-align: left;
  font-size: calc(13px * var(--fs)); line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-kerning: normal; overflow-wrap: break-word;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
:where(.cv) *, :where(.cv) *::before, :where(.cv) *::after { box-sizing: border-box; margin: 0; padding: 0; }
:where(.cv) h1, :where(.cv) h2, :where(.cv) h3 { font-size: inherit; font-weight: inherit; line-height: 1.25; }
:where(.cv) ul { list-style: none; }
:where(.cv) mark { color: inherit; }
.cv.measuring { height: auto !important; }
:where(.cv) [data-off] { display: none !important; }
.cv.measuring [data-col] { align-self: start !important; }
.cv .g2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: calc(5px * var(--sp) + 5px); align-items: start; }
.cv .g2 > * { margin-top: 0 !important; }

:where(.cv) .ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.14em; }
:where(.cv) .ph { position: relative; overflow: hidden; isolation: isolate; flex: none; background: color-mix(in srgb, var(--accent) 8%, #eef0f3); color: var(--accent); }
:where(.cv) .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
:where(.cv) .ph-sil { display: block; width: 100%; height: 100%; }
:where(.cv) .cv-ph { opacity: .3; }

:where(.cv) .rich { margin-top: .3em; }
:where(.cv) .rich p + p, :where(.cv) .rich p + ul, :where(.cv) .rich ul + p { margin-top: .25em; }
:where(.cv) .rich li { position: relative; padding-left: 1.05em; }
:where(.cv) .rich li + li { margin-top: .12em; }
:where(.cv) .rich li::before { content: ""; position: absolute; left: .2em; top: .62em; width: .32em; height: .32em; border-radius: 50%; background: currentColor; opacity: .5; }
:where(.cv) .rich strong { font-weight: 700; color: inherit; }

:where(.cv) .lv-bar { display: block; height: 4px; border-radius: 9px; background: rgba(0,0,0,.08); overflow: hidden; }
:where(.cv) .lv-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
:where(.cv) .lv-dots { display: inline-flex; gap: 3px; flex: none; }
:where(.cv) .lv-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,.12); }
:where(.cv) .lv-dots i.on { background: var(--accent); }

/* ==========================================================================
   Thành phần dùng chung — mọi mẫu dùng cùng một bộ khối nội dung
   ========================================================================== */
.cv { --ink: #111827; --body: #374151; --muted: #6b7280; --rule: #e5e7eb; --tint: color-mix(in srgb, var(--accent) 8%, #fff); }

:where(.cv) .col { display: flex; flex-direction: column; gap: calc(14px * var(--sp) + 8px); min-width: 0; }
:where(.cv) .sh { font-size: .92em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.3; color: var(--accent); margin-bottom: calc(6px * var(--sp) + 5px); }
:where(.cv) .sum { color: var(--body); line-height: 1.6; }

:where(.cv) .its { display: flex; flex-direction: column; gap: calc(8px * var(--sp) + 5px); }
:where(.cv) .it-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
:where(.cv) .it-t { font-size: 1.03em; font-weight: 700; line-height: 1.3; color: var(--ink); }
:where(.cv) .it-d { flex: none; font-size: .86em; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(.cv) .it-s { margin-top: .08em; font-size: .95em; font-weight: 500; color: var(--accent); }
:where(.cv) .it .rich, :where(.cv) .tln-c .rich { font-size: .95em; color: var(--body); }
:where(.cv) .rich li::before { background: var(--accent); opacity: .75; }

:where(.cv) .sk, :where(.cv) .skd, :where(.cv) .lg, :where(.cv) .aw, :where(.cv) .ctl { display: flex; flex-direction: column; gap: calc(4px * var(--sp) + 5px); }
:where(.cv) .sk-i span { display: block; margin-bottom: .35em; font-size: .95em; color: var(--ink); }
:where(.cv) .sk-i .lv-bar { height: 5px; background: color-mix(in srgb, var(--accent) 14%, #fff); }
:where(.cv) .skd-i { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .95em; color: var(--ink); }
:where(.cv) .skd-i .lv-dots i:not(.on) { background: color-mix(in srgb, var(--accent) 16%, #fff); }
:where(.cv) .lg-i { display: flex; justify-content: space-between; gap: 12px; font-size: .95em; }
:where(.cv) .lg-i b { font-weight: 600; color: var(--ink); }
:where(.cv) .lg-i span { text-align: right; color: var(--muted); }
:where(.cv) .aw-i { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: .95em; color: var(--ink); }
:where(.cv) .aw-i em { flex: none; font-style: normal; font-size: .92em; color: var(--muted); }
:where(.cv) .tg { display: flex; flex-wrap: wrap; gap: 6px; }
:where(.cv) .tg span { padding: .22em .75em; border-radius: 4px; font-size: .88em; color: var(--ink); background: var(--tint); }
:where(.cv) .il { font-size: .95em; color: var(--body); }

:where(.cv) .ctl li { display: flex; align-items: center; gap: .65em; font-size: .92em; line-height: 1.4; color: var(--body); word-break: break-word; }
:where(.cv) .ctg { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 22px; font-size: .9em; color: var(--body); }
:where(.cv) .cti { display: flex; flex-wrap: wrap; gap: 5px 18px; font-size: .9em; color: var(--body); }
:where(.cv) .ctg span, :where(.cv) .cti span { display: inline-flex; align-items: center; gap: .5em; min-width: 0; word-break: break-word; }
:where(.cv) .ctl .ico, :where(.cv) .ctg .ico, :where(.cv) .cti .ico { color: var(--accent); }

:where(.cv) .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
:where(.cv) .pair .sk { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }

:where(.cv) .tln-i { display: grid; grid-template-columns: 92px 1fr; }
:where(.cv) .tln-d { padding: .1em 16px 0 0; font-size: .86em; line-height: 1.4; color: var(--muted); }
:where(.cv) .tln-d b { display: block; font-weight: 600; color: var(--ink); }
:where(.cv) .tln-d span { display: block; }
:where(.cv) .tln-c { position: relative; min-width: 0; padding: 0 0 calc(8px * var(--sp) + 8px) 20px; border-left: 2px solid var(--rule); }
:where(.cv) .tln-i:last-child .tln-c { padding-bottom: 2px; }
:where(.cv) .tln-c::before { content: ""; position: absolute; left: -6px; top: .35em; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); }

/* ==========================================================================
   01 · MỘT CỘT — ảnh bên trái
   ========================================================================== */
.cv-classic { font-family: 'Be Vietnam Pro', sans-serif; color: var(--body); padding: calc(40px + 10px * var(--sp)) 54px 44px; }
.t1-head { display: flex; align-items: center; gap: 26px; padding-bottom: calc(12px * var(--sp) + 8px); margin-bottom: calc(14px * var(--sp) + 8px); border-bottom: 2px solid var(--accent); }
.t1-photo { width: calc(106px * var(--fs) * var(--xl)); height: calc(132px * var(--fs) * var(--xl)); border-radius: 8px; }
.t1-id { flex: 1; min-width: 0; }
.t1-name { font-size: calc(2.4em * var(--xl)); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.t1-title { margin-top: .3em; font-size: 1.08em; font-weight: 500; color: var(--accent); }
.t1-ct { margin-top: calc(6px * var(--sp) + 8px); }
.cv-classic .sh { padding-bottom: .4em; border-bottom: 1px solid var(--rule); }

/* ==========================================================================
   02 · BẢNG THÔNG TIN — ảnh bên phải
   ========================================================================== */
.cv-info { font-family: 'Roboto', sans-serif; color: var(--body); padding: calc(40px + 10px * var(--sp)) 54px 44px; }
.t2-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; padding-bottom: calc(12px * var(--sp) + 8px); margin-bottom: calc(14px * var(--sp) + 8px); border-bottom: 1px solid var(--rule); }
.t2-id { flex: 1; min-width: 0; }
.t2-name { font-size: calc(2.3em * var(--xl)); font-weight: 700; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); }
.t2-title { margin-top: .3em; font-size: 1.06em; font-weight: 500; color: var(--body); }
.t2-tbl { display: grid; gap: 4px; margin-top: calc(8px * var(--sp) + 8px); font-size: .92em; }
.t2-tbl div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
.t2-tbl span { color: var(--muted); }
.t2-tbl b { font-weight: 500; color: var(--ink); word-break: break-word; }
.t2-photo { width: calc(116px * var(--fs) * var(--xl)); height: calc(146px * var(--fs) * var(--xl)); padding: 4px; border: 1px solid var(--rule); background: #fff; }
.cv-info .sh { display: flex; align-items: center; gap: 12px; padding-left: 10px; border-left: 4px solid var(--accent); color: var(--ink); }
.cv-info .sh::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* ==========================================================================
   03 · CĂN GIỮA — tiêu đề giữa trang
   ========================================================================== */
.cv-centered { font-family: 'Inter', sans-serif; color: var(--body); padding: calc(38px + 10px * var(--sp)) 60px 44px; }
.t3-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: calc(12px * var(--sp) + 8px); margin-bottom: calc(14px * var(--sp) + 8px); border-bottom: 1px solid var(--ink); }
.t3-photo { width: calc(100px * var(--fs) * var(--xl)); height: calc(100px * var(--fs) * var(--xl)); border-radius: 50%; margin-bottom: calc(8px * var(--sp) + 6px); }
.t3-name { font-family: 'Source Serif 4', serif; font-size: calc(2.5em * var(--xl)); font-weight: 700; line-height: 1.12; color: var(--ink); }
.t3-title { margin-top: .3em; font-size: 1.05em; font-weight: 500; color: var(--accent); }
.t3-ct { justify-content: center; margin-top: calc(6px * var(--sp) + 6px); }
.cv-centered .sh { font-family: 'Source Serif 4', serif; font-size: 1.05em; letter-spacing: .06em; color: var(--ink); padding-bottom: .3em; border-bottom: 1px solid var(--rule); }

/* ==========================================================================
   04 · CỘT TRÁI — nền xám nhạt
   ========================================================================== */
.cv-sidelight { display: grid; grid-template-columns: 250px 1fr; font-family: 'Open Sans', sans-serif; color: var(--body); }
.t4-side { background: color-mix(in srgb, var(--accent) 6%, #f3f4f6); padding: calc(36px + 10px * var(--sp)) 26px 40px; }
.t4-ph { display: flex; justify-content: center; }
.t4-photo { width: min(190px, calc(148px * var(--fs) * var(--xl))); height: min(190px, calc(148px * var(--fs) * var(--xl))); border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 1px var(--rule); }
.t4-main { padding: calc(40px + 10px * var(--sp)) 42px 40px 36px; }
.t4-head { padding-bottom: calc(8px * var(--sp) + 8px); border-bottom: 2px solid var(--accent); }
.t4-name { font-size: calc(2.45em * var(--xl)); font-weight: 700; line-height: 1.15; color: var(--ink); }
.t4-title { margin-top: .3em; font-size: 1.06em; font-weight: 600; color: var(--accent); }
.cv-sidelight .sh { padding-bottom: .35em; border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, #fff); }
.t4-side .tg span { background: #fff; }

/* ==========================================================================
   05 · CỘT TRÁI ĐẬM — nền màu
   ========================================================================== */
.cv-sidedark { display: grid; grid-template-columns: 256px 1fr; font-family: 'Be Vietnam Pro', sans-serif; color: var(--body); }
.t5-side { background: var(--accent); color: rgba(255,255,255,.88); padding: calc(36px + 10px * var(--sp)) 26px 40px; }
.t5-ph { display: flex; justify-content: center; }
.t5-photo { width: min(190px, calc(148px * var(--fs) * var(--xl))); height: min(190px, calc(148px * var(--fs) * var(--xl))); border-radius: 50%; border: 4px solid rgba(255,255,255,.9); }
.t5-side .sh { color: #fff; padding-bottom: .4em; border-bottom: 1px solid rgba(255,255,255,.28); }
.t5-side .ctl li { color: rgba(255,255,255,.9); }
.t5-side .ctl .ico { color: #fff; opacity: .85; }
.t5-side .sk-i span { color: #fff; }
.t5-side .sk-i .lv-bar { background: rgba(255,255,255,.2); }
.t5-side .sk-i .lv-bar i { background: #fff; }
.t5-side .lg-i b { color: #fff; }
.t5-side .lg-i span { color: rgba(255,255,255,.75); }
.t5-side .tg span { background: rgba(255,255,255,.14); color: #fff; }
.t5-main { padding: calc(40px + 10px * var(--sp)) 42px 40px 36px; }
.t5-name { font-size: calc(2.5em * var(--xl)); font-weight: 700; line-height: 1.15; color: var(--ink); }
.t5-title { margin-top: .4em; font-size: .9em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.t5-head::after { content: ""; display: block; width: 48px; height: 3px; margin-top: calc(10px * var(--sp) + 6px); background: var(--accent); }
.t5-main .sh { padding-bottom: .35em; border-bottom: 1px solid var(--rule); }

/* ==========================================================================
   06 · CỘT PHẢI — hai cột
   ========================================================================== */
.cv-sideright { display: flex; flex-direction: column; font-family: 'Inter', sans-serif; color: var(--body); padding: calc(40px + 10px * var(--sp)) 50px 42px; }
.t6-head { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding-bottom: calc(12px * var(--sp) + 8px); margin-bottom: calc(14px * var(--sp) + 8px); border-bottom: 2px solid var(--ink); }
.t6-id { flex: 1; min-width: 0; }
.t6-name { font-size: calc(2.5em * var(--xl)); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); }
.t6-title { margin-top: .3em; font-size: 1.06em; font-weight: 500; color: var(--accent); }
.t6-ct { margin-top: calc(6px * var(--sp) + 8px); }
.t6-photo { width: calc(112px * var(--fs) * var(--xl)); height: calc(112px * var(--fs) * var(--xl)); border-radius: 50%; }
.t6-body { flex: 1; display: grid; grid-template-columns: 1fr 210px; gap: 30px; }
.t6-body.solo { grid-template-columns: 1fr; }
.t6-side { padding-left: 24px; border-left: 1px solid var(--rule); }
.cv-sideright .sh { padding-bottom: .35em; border-bottom: 1px solid var(--rule); }

/* ==========================================================================
   07 · DẢI TIÊU ĐỀ — đầu trang màu
   ========================================================================== */
.cv-band { display: flex; flex-direction: column; font-family: 'Roboto', sans-serif; color: var(--body); }
.t7-head { display: flex; align-items: center; gap: 28px; padding: calc(30px + 8px * var(--sp)) 48px calc(28px + 6px * var(--sp)); background: var(--accent); color: #fff; }
.t7-photo { width: calc(118px * var(--fs) * var(--xl)); height: calc(118px * var(--fs) * var(--xl)); border-radius: 50%; border: 3px solid rgba(255,255,255,.9); }
.t7-id { flex: 1; min-width: 0; }
.t7-name { font-size: calc(2.45em * var(--xl)); font-weight: 700; line-height: 1.15; color: #fff; }
.t7-title { margin-top: .3em; font-size: 1.05em; color: rgba(255,255,255,.85); }
.t7-ct { margin-top: calc(6px * var(--sp) + 8px); color: rgba(255,255,255,.92); }
.t7-ct .ico { color: #fff; opacity: .85; }
.t7-body { flex: 1; display: grid; grid-template-columns: 1fr 220px; gap: 34px; padding: calc(22px * var(--sp) + 8px) 48px 40px; }
.t7-body.solo { grid-template-columns: 1fr; }
.cv-band .sh { padding-bottom: .35em; border-bottom: 2px solid color-mix(in srgb, var(--accent) 22%, #fff); }

/* ==========================================================================
   08 · NHÃN LỀ TRÁI — dạng bảng
   ========================================================================== */
.cv-labels { font-family: 'Inter', sans-serif; color: var(--body); padding: calc(40px + 10px * var(--sp)) 54px 44px; }
.t8-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; padding-bottom: calc(12px * var(--sp) + 8px); border-bottom: 2px solid var(--ink); }
.t8-id { flex: 1; min-width: 0; }
.t8-name { font-size: calc(2.5em * var(--xl)); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); }
.t8-title { margin-top: .3em; font-size: 1.05em; font-weight: 500; color: var(--accent); }
.t8-ct { margin-top: calc(6px * var(--sp) + 8px); }
.t8-photo { width: calc(104px * var(--fs) * var(--xl)); height: calc(128px * var(--fs) * var(--xl)); border-radius: 6px; }
.t8-row { display: grid; grid-template-columns: 136px 1fr; gap: 24px; padding: calc(10px * var(--sp) + 7px) 0; border-bottom: 1px solid var(--rule); }
.t8-row:last-child { border-bottom: 0; }
.t8-c { min-width: 0; }
.cv-labels .sh { margin: .15em 0 0; font-size: .8em; line-height: 1.45; }

/* ==========================================================================
   09 · THANH TIÊU ĐỀ — tiêu đề mục dạng thanh
   ========================================================================== */
.cv-bars { font-family: 'Be Vietnam Pro', sans-serif; color: var(--body); padding: calc(38px + 10px * var(--sp)) 50px 42px; }
.t9-head { display: flex; align-items: center; gap: 26px; margin-bottom: calc(16px * var(--sp) + 8px); }
.t9-photo { width: calc(108px * var(--fs) * var(--xl)); height: calc(136px * var(--fs) * var(--xl)); border-radius: 8px; }
.t9-id { flex: 1; min-width: 0; }
.t9-name { font-size: calc(2.4em * var(--xl)); font-weight: 700; line-height: 1.15; color: var(--accent); }
.t9-title { margin-top: .3em; font-size: 1.06em; font-weight: 500; color: var(--ink); }
.t9-ct { margin-top: calc(6px * var(--sp) + 8px); }
.cv-bars .sh { padding: .42em .85em; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); color: var(--accent); }
.cv-bars .sec > :not(.sh) { margin-left: .85em; }

/* ==========================================================================
   10 · MỐC THỜI GIAN — theo trình tự thời gian
   ========================================================================== */
.cv-chrono { font-family: 'Open Sans', sans-serif; color: var(--body); padding: calc(40px + 10px * var(--sp)) 54px 44px; }
.t10-head { display: flex; align-items: center; gap: 26px; padding-bottom: calc(12px * var(--sp) + 8px); margin-bottom: calc(14px * var(--sp) + 8px); border-bottom: 1px solid var(--rule); }
.t10-photo { width: calc(110px * var(--fs) * var(--xl)); height: calc(110px * var(--fs) * var(--xl)); border-radius: 50%; }
.t10-id { flex: 1; min-width: 0; }
.t10-name { font-size: calc(2.45em * var(--xl)); font-weight: 700; line-height: 1.15; color: var(--ink); }
.t10-title { margin-top: .3em; font-size: 1.06em; font-weight: 600; color: var(--accent); }
.t10-ct { margin-top: calc(6px * var(--sp) + 8px); }
.cv-chrono .sh { display: flex; align-items: center; gap: 12px; }
.cv-chrono .sh::after { content: ""; flex: 1; height: 1px; background: var(--rule); }