/* FontChuDep homepage — công cụ tạo kiểu chữ Unicode (Phase 12). Chỉ tác động khi ui.js chạy (body.fh-on); màu/typography lấy từ tool.css. */
.fh-off{display:none!important}
.fh-scrim{position:fixed;inset:0;z-index:65;background:rgba(36,21,28,.5)}
.fh-scrim[hidden]{display:none}
/* ô nhập lớn */
body.fh-on .fcd-input{min-height:5.5rem;padding:1rem 3rem 1rem 1.125rem;font-size:1.375rem;line-height:1.4}
@media (max-width:47.99rem){body.fh-on .fcd-input{min-height:4.5rem;font-size:1.25rem}}
/* thanh danh mục ngang */
body.fh-on .fcd-side{display:none}
body.fh-on .fcd-layout{display:block;margin-top:0}
body.fh-on .fcd-col{min-width:0}
.fh-nav{position:sticky;top:0;z-index:6;margin:.875rem -1rem 0;padding:.375rem 0;background:var(--bg);border-bottom:1px solid var(--line)}
.fh-rail{position:relative}
body.fh-on .fcd-filters.fh-scroll{display:flex;flex-wrap:nowrap;gap:.125rem;margin:0;padding:.125rem 1rem;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:none;scroll-padding-inline:2.75rem;-webkit-mask-image:none;mask-image:none}
body.fh-on .fcd-filters.fh-scroll::-webkit-scrollbar{display:none}
body.fh-on .fcd-navgroup{display:contents}
body.fh-on .fcd-navgroup-title{display:none}
body.fh-on .fcd-filters .fcd-chip{flex:0 0 auto;display:inline-flex;align-items:center;width:auto;min-height:44px;padding:0 .8125rem;font:inherit;font-size:.9375rem;font-weight:600;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:999px;box-shadow:none;cursor:pointer;white-space:nowrap}
body.fh-on .fcd-filters .fcd-chip[hidden]{display:none}
body.fh-on .fcd-filters .fcd-chip:hover{color:var(--accent);background:var(--accent-soft)}
body.fh-on .fcd-filters .fcd-chip[aria-pressed="true"]{color:#fff;background:var(--accent);box-shadow:0 1px 6px rgba(217,27,96,.35)}
body.fh-on .fcd-chip-count{display:none}
body.fh-on .fcd-chip-label{white-space:nowrap;overflow:visible}
.fh-fade{position:absolute;top:0;bottom:0;z-index:2;width:3rem;display:flex;align-items:center;pointer-events:none;opacity:0;transition:opacity .15s}
.fh-fade--l{left:0;justify-content:flex-start;background:linear-gradient(to right,var(--bg) 45%,rgba(255,249,250,0))}
.fh-fade--r{right:0;justify-content:flex-end;background:linear-gradient(to left,var(--bg) 45%,rgba(255,249,250,0))}
.fh-rail[data-more-l] .fh-fade--l,.fh-rail[data-more-r] .fh-fade--r{opacity:1}
.fh-arrow{display:grid;place-items:center;width:36px;height:36px;margin:0 .375rem;padding:0;color:var(--accent);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:50%;box-shadow:0 1px 6px rgba(36,21,28,.14);cursor:pointer;pointer-events:none}
.fh-arrow:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.fh-rail[data-more-l] .fh-fade--l .fh-arrow,.fh-rail[data-more-r] .fh-fade--r .fh-arrow{pointer-events:auto}.fh-arrow:hover{border-color:var(--accent);background:var(--accent-soft)}}
@media (hover:none),(pointer:coarse){.fh-fade--l .fh-arrow{display:none}.fh-fade--r .fh-arrow{width:28px;height:28px;margin:0 .25rem;border-color:transparent;background:transparent;box-shadow:none}}
@media (min-width:48rem){.fh-nav{margin-left:0;margin-right:0;border-bottom:0;padding:.5rem 0 .25rem}body.fh-on .fcd-filters.fh-scroll{padding-left:.125rem;padding-right:.125rem;scroll-padding-inline:3rem}}
/* hàng số lượng + tìm kiếm */
.fh-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin:.5rem 0 .75rem}
.fh-meta{margin:0;font-size:.875rem;color:var(--muted)}.fh-meta b{color:var(--ink)}
.fh-aids{display:flex;align-items:center;min-width:0}
body.fh-on .fcd-search{margin:0;max-width:none;width:16rem}
body.fh-on .fcd-search-input{min-height:40px;font-size:.875rem;border-radius:999px}
@media (max-width:47.99rem){.fh-bar{flex-direction:column;align-items:stretch}.fh-aids{width:100%}body.fh-on .fcd-search{width:100%}}
/* trạng thái rỗng */
body.fh-on .fcd-status{margin:.25rem 0 .75rem;padding:1.5rem 1rem;font-size:.875rem;color:var(--muted);text-align:center;background:var(--surface);border:1px dashed var(--line-strong);border-radius:14px}
body.fh-on .fcd-catnote{margin:0 0 .75rem}
/* lưới kết quả: 1 cột (điện thoại), 2 cột (desktop) */
body.fh-on .fcd-list{display:grid;grid-template-columns:minmax(0,1fr);gap:.625rem;align-items:stretch}
@media (min-width:48rem){body.fh-on .fcd-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}
body.fh-on .fcd-bad .fcd-list{margin-top:.75rem}
body.fh-on .fcd-group,body.fh-on .fcd-tier{grid-column:1/-1}
body.fh-on .fcd-group-title{margin:.5rem 0 0;font-size:.8125rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
body.fh-on .fcd-tier{margin:.5rem 0 .125rem;padding:.625rem .875rem;font-size:.8125rem;line-height:1.45;color:var(--muted);background:#FFF1F5;border-left:3px solid #b8860b;border-radius:8px;list-style:none}
body.fh-on .fcd-tier b{color:var(--ink)}
/* thẻ copy: tên nhỏ → kết quả chữ là trọng tâm → chân thẻ gọn */
body.fh-on .fcd-card{content-visibility:visible;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:none;grid-template-rows:none;align-items:center;row-gap:0;column-gap:.5rem;min-width:0;padding:.75rem 1rem .75rem;background:var(--surface);border:1px solid var(--line);border-radius:16px}
body.fh-on .fcd-card:hover{border-color:#F3B5C8;box-shadow:0 6px 18px rgba(217,27,96,.12)}
body.fh-on .fcd-card[hidden],body.fh-on .fcd-group[hidden],body.fh-on .fcd-tier[hidden]{display:none}
body.fh-on .fcd-card-head,body.fh-on .fcd-head-text{display:contents}
body.fh-on .fcd-name{grid-area:1/1/2/4;padding-right:2rem;font-size:.8125rem;font-weight:600;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.fh-on .fcd-kind{display:none}
body.fh-on .fcd-card .fcd-fav{position:absolute;top:.125rem;right:.375rem;width:34px;height:34px;margin:0;color:#C98FA4}
body.fh-on .fcd-card .fcd-fav:hover,body.fh-on .fcd-card .fcd-fav[aria-pressed="true"]{color:var(--accent)}
@media (pointer:coarse){body.fh-on .fcd-card .fcd-fav{width:44px;height:44px;top:0;right:0}}
body.fh-on .fcd-out{grid-area:2/1/3/4;align-self:start;min-height:1.6em;max-height:none;margin:.25rem 0 0;font-size:1.5rem;line-height:1.4;overflow:hidden}
@media (max-width:47.99rem){body.fh-on .fcd-out{font-size:1.3125rem}}
body.fh-on .fcd-card[data-clamp] .fcd-out{max-height:4.3em}
body.fh-on .fcd-card:not([data-clamp]) .fcd-out{max-height:14rem;overflow:auto}
body.fh-on .fcd-expand{grid-area:3/1/4/4;margin:.125rem 0 0 -.5rem}
body.fh-on .fcd-note{grid-area:4/1/5/4;margin:.25rem 0 0;font-size:.75rem}
body.fh-on .fcd-ctrl{grid-area:5/1/6/4;display:block;margin-top:.5rem}
body.fh-on .fcd-ctrl>.fcd-base{display:none}
body.fh-on .fcd-badge{grid-area:6/1/7/3;margin-top:.5rem;justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis}
body.fh-on .fcd-badge[data-level="safe"]{display:none}
body.fh-on .fcd-card .fcd-btn{grid-area:6/3/7/4;margin-top:.5rem;justify-self:end;white-space:nowrap;min-height:40px;min-width:0;max-width:none;padding:0 .875rem;font-size:.875rem;font-weight:700;color:var(--accent);background:var(--accent-soft);border:0;border-radius:999px}
body.fh-on .fcd-card .fcd-btn::before{flex:0 0 .875rem;width:.875rem;height:.875rem}
body.fh-on .fcd-card .fcd-btn:hover{background:var(--accent);color:#fff}
body.fh-on .fcd-card .fcd-btn.is-copied{color:#fff;background:var(--accent)}
body.fh-on .fcd-card .fcd-btn.is-failed{grid-area:7/1/8/4;margin-top:.5rem;justify-self:stretch;color:#9b1c1c;background:#fff;border:1px solid #9b1c1c;white-space:normal;text-align:center}
@media (min-width:48rem){body.fh-on .fcd-ctrl{grid-area:6/1/7/3;margin-top:.5rem;align-self:center}}
body.fh-on .fcd-card.is-bad{background:#FFF4F7;border-style:dashed;border-color:#E9B8C6}
/* bảng chọn mẫu: cửa sổ nổi (không kéo giãn thẻ) */
body.fh-on .fcd-deco{background:#FFF9FA;border:1px solid var(--line-strong);border-radius:12px}
body.fh-on .fcd-deco-sum{min-height:40px;padding:0 .625rem;font-size:.8125rem}
body.fh-on .fcd-deco-count{display:none}
body.fh-on .fcd-deco-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.fh-on .fcd-deco-list .fcd-base{display:flex;grid-column:1/-1;margin-bottom:.5rem}
body.fh-on .fcd-deco[open]>.fcd-deco-list{position:fixed;z-index:70;left:50%;top:50%;transform:translate(-50%,-50%);width:min(34rem,calc(100vw - 2rem));max-height:min(32rem,calc(100dvh - 3rem));margin:0;padding:1rem;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px rgba(36,21,28,.35)}
@media (max-width:47.99rem){body.fh-on .fcd-deco[open]>.fcd-deco-list{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:80dvh;border-radius:18px 18px 0 0;grid-template-columns:repeat(2,minmax(0,1fr))}}
body.fh-on .fcd-deco-list .fh-sheet-x{grid-column:1/-1;justify-self:end;position:sticky;top:-1rem;z-index:2;min-height:40px;margin:-.5rem 0 .25rem;padding:0 .875rem;font:inherit;font-size:.875rem;font-weight:700;color:var(--accent);background:var(--accent-soft);border:0;border-radius:999px;cursor:pointer}
/* xem thêm */
body.fh-on .fcd-more-wrap{margin-top:1.25rem}
body.fh-on .fcd-more{min-height:44px;padding:0 1.75rem;border-radius:999px}
/* thông báo sao chép */
.fh-toast{position:fixed;left:50%;bottom:1.25rem;z-index:80;transform:translateX(-50%);max-width:calc(100vw - 2rem);padding:.625rem 1rem;font-size:.875rem;font-weight:600;color:#fff;background:#24151C;border-radius:999px;box-shadow:0 8px 24px rgba(36,21,28,.35);pointer-events:none}
.fh-toast[hidden]{display:none}
@media (prefers-reduced-motion:reduce){body.fh-on *{transition:none!important}}

/* ===== Phase 14: mỗi mẫu một card độc lập, chia khu có tiêu đề, 4 cột desktop / 1 cột mobile ===== */
body.fh-on .fcd-list{display:grid;grid-template-columns:minmax(0,1fr);gap:.625rem;align-items:stretch}
@media (min-width:40rem){body.fh-on .fcd-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}
@media (min-width:56rem){body.fh-on .fcd-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:75rem){body.fh-on .fcd-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
body.fh-on .fcd-group{grid-column:1/-1;margin:1.25rem 0 .125rem;padding:0 0 .375rem;border-bottom:2px solid var(--line)}
body.fh-on .fcd-group:first-child{margin-top:.25rem}
body.fh-on .fcd-group-title{margin:0;font-size:1.1875rem;font-weight:800;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
body.fh-on .fcd-sec-more{grid-column:1/-1;display:flex;justify-content:center;margin-top:.25rem;list-style:none}
body.fh-on .fcd-card{display:flex;flex-direction:column;align-items:stretch;gap:.25rem;padding:.625rem .75rem .75rem;cursor:default}
body.fh-on .fcd-name{padding-right:2rem;margin:0}
body.fh-on .fcd-out{flex:1 1 auto;min-height:1.6em;max-height:4.3em;margin:.125rem 0 .375rem;font-size:1.25rem;line-height:1.4;overflow:hidden;overflow-wrap:anywhere;white-space:pre-wrap}
@media (max-width:39.99rem){body.fh-on .fcd-out{font-size:1.3125rem}}
body.fh-on .fcd-card .fcd-btn{align-self:flex-end;margin:0;min-height:36px}
@media (pointer:coarse){body.fh-on .fcd-card .fcd-btn{min-height:40px}}
body.fh-on .fcd-card .fcd-btn.is-failed{align-self:stretch;margin-top:.125rem}

/* ===== Phase 15: nhận diện HỒNG TÌNH YÊU — nút vuông 6px, card nổi có viền, trái tim đỏ, không dùng màu tím ===== */
body.fcd-front{
  --brand-primary:#FF2D75;--brand-hover:#D91B60;--brand-active:#B9154D;--brand-soft:#FFF1F5;--page-bg:#FFF9FA;--surface:#FFFFFF;
  --heart-red:#FF1744;--heart-hover:#D50032;--card-border:#F3B5C8;--border-strong:#E97A9E;--text-primary:#24151C;--text-secondary:#70525E;--shadow-pink:rgba(217,27,96,.12);
  --bg:var(--page-bg);--ink:var(--text-primary);--muted:var(--text-secondary);--line:#F6D5E0;--line-strong:var(--border-strong);
  --accent:var(--brand-primary);--accent-hover:var(--brand-hover);--accent-soft:var(--brand-soft);
  background:var(--page-bg);color:var(--text-primary)
}
/* header */
body.fcd-front .fcd-header{background:#fff;border-bottom:1px solid #F8D3E0;box-shadow:0 1px 0 rgba(255,45,117,.06)}
body.fcd-front .fcd-header-in{min-height:60px}
body.fcd-front .fcd-brand{gap:.625rem;font-size:1.3125rem;font-weight:800;letter-spacing:-.025em;color:var(--text-primary)}
body.fcd-front .fcd-logo{display:block;flex:0 0 auto;width:36px;height:36px;filter:drop-shadow(0 2px 4px rgba(217,27,96,.28))}
body.fcd-front .fcd-word-hi{color:var(--brand-primary)}
body.fcd-front .fcd-h1{color:var(--text-primary)}
body.fcd-front .fcd-lead{color:var(--text-secondary)}
body.fcd-front .fcd-skip{border-radius:0 0 6px 0;background:var(--brand-hover)}
/* ô nhập */
body.fh-on .fcd-input{background:#fff;border:1.5px solid var(--card-border);border-radius:8px;font-weight:600;color:var(--text-primary);box-shadow:0 1px 3px var(--shadow-pink)}
body.fh-on .fcd-input::placeholder{color:#8F6F7C;font-weight:500}
body.fh-on .fcd-input:focus{border-color:var(--brand-primary);box-shadow:0 0 0 4px rgba(255,45,117,.18)}
body.fcd-front .fcd-clear{border-radius:6px;color:var(--text-secondary)}
body.fcd-front .fcd-clear:hover{color:var(--brand-hover);background:var(--brand-soft)}
/* tìm kiếm */
body.fh-on .fcd-search-input{border:1.5px solid var(--card-border);border-radius:8px;background:#fff;color:var(--text-primary)}
body.fh-on .fcd-search-input:focus{border-color:var(--brand-primary);box-shadow:0 0 0 4px rgba(255,45,117,.18)}
body.fh-on .fcd-search-ico{color:var(--brand-hover)}
/* thanh danh mục: nút vuông 6px */
body.fh-on .fcd-nav,.fh-nav{background:var(--page-bg);border-bottom:1px solid var(--card-border)}
body.fh-on .fcd-filters.fh-scroll{gap:.375rem}
body.fh-on .fcd-filters .fcd-chip{min-height:40px;padding:0 .875rem;font-size:.9375rem;font-weight:700;color:var(--text-primary);background:#fff;border:1px solid var(--border-strong);border-radius:6px;box-shadow:0 1px 2px var(--shadow-pink)}
body.fh-on .fcd-filters .fcd-chip:hover{color:var(--brand-hover);background:var(--brand-soft);border-color:var(--brand-primary)}
body.fh-on .fcd-filters .fcd-chip[aria-pressed="true"]{color:#fff;background:var(--brand-primary);border-color:var(--brand-primary);box-shadow:0 2px 8px rgba(255,45,117,.38)}
body.fh-on .fcd-filters .fcd-chip[aria-pressed="true"]:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
body.fh-on .fcd-filters .fcd-chip:focus-visible,.fh-arrow:focus-visible{outline:3px solid var(--brand-primary);outline-offset:2px}
.fh-fade--l{background:linear-gradient(to right,var(--page-bg) 45%,rgba(255,249,250,0))}.fh-fade--r{background:linear-gradient(to left,var(--page-bg) 45%,rgba(255,249,250,0))}
.fh-arrow{width:34px;height:34px;color:var(--brand-hover);background:#fff;border:1px solid var(--border-strong);border-radius:6px;box-shadow:0 2px 6px var(--shadow-pink)}
@media (hover:hover) and (pointer:fine){.fh-arrow:hover{background:var(--brand-soft);border-color:var(--brand-primary)}}
@media (hover:none),(pointer:coarse){.fh-fade--r .fh-arrow{width:30px;height:30px;border:1px solid var(--border-strong);background:#fff;box-shadow:0 2px 6px var(--shadow-pink)}}
.fh-meta{color:var(--text-secondary)}.fh-meta b{color:var(--text-primary)}
/* tiêu đề khu */
body.fh-on .fcd-group{margin:1.5rem 0 .25rem;padding:0 0 .5rem;border-bottom:1px solid var(--card-border);position:relative}
body.fh-on .fcd-group::after{content:"";position:absolute;left:0;bottom:-1px;width:3.25rem;height:3px;background:var(--brand-primary);border-radius:2px}
body.fh-on .fcd-group-title{display:flex;align-items:baseline;gap:.5rem;font-size:1.25rem;font-weight:800;letter-spacing:-.015em;color:var(--text-primary)}
body.fh-on .fcd-group-title::before{content:"";flex:0 0 auto;align-self:center;width:.5rem;height:1.25rem;background:var(--brand-primary);border-radius:2px}
/* card nổi có viền */
body.fh-on .fcd-card{background:#fff;border:1px solid var(--card-border);border-radius:10px;box-shadow:0 3px 10px rgba(217,27,96,.08);padding:.75rem .875rem .875rem;gap:.375rem;transition:border-color .15s,box-shadow .15s,transform .15s}
body.fh-on .fcd-card:hover{border-color:var(--border-strong);box-shadow:0 8px 20px rgba(217,27,96,.16);transform:translateY(-2px)}
body.fh-on .fcd-card:focus-within{border-color:var(--border-strong);box-shadow:0 0 0 3px rgba(255,45,117,.2),0 3px 10px rgba(217,27,96,.08)}
body.fh-on .fcd-name{font-size:.8125rem;font-weight:700;color:var(--text-secondary);letter-spacing:.005em}
body.fh-on .fcd-out{color:var(--text-primary);font-size:1.3125rem;line-height:1.4;margin:.25rem 0 .5rem}
@media (max-width:39.99rem){body.fh-on .fcd-out{font-size:1.375rem}}
/* nút Sao chép: nền hồng, chữ trắng, bo 6px */
body.fh-on .fcd-card .fcd-btn{min-height:38px;padding:0 1rem;font-size:.875rem;font-weight:700;color:#fff;background:var(--brand-primary);border:0;border-radius:6px;box-shadow:0 1px 2px rgba(185,21,77,.35);letter-spacing:.01em}
body.fh-on .fcd-card .fcd-btn:hover{background:var(--brand-hover);color:#fff}
body.fh-on .fcd-card .fcd-btn:active{background:var(--brand-active);transform:translateY(1px)}
body.fh-on .fcd-card .fcd-btn:focus-visible{outline:3px solid var(--text-primary);outline-offset:2px}
body.fh-on .fcd-card .fcd-btn.is-copied{background:var(--brand-active);color:#fff}
body.fh-on .fcd-card .fcd-btn.is-failed{color:#9b1c1c;background:#fff;border:1px solid #9b1c1c;box-shadow:none}
@media (pointer:coarse){body.fh-on .fcd-card .fcd-btn{min-height:42px}}
/* yêu thích: trái tim đỏ rực */
body.fh-on .fcd-card .fcd-fav{top:.375rem;right:.375rem;width:34px;height:34px;color:var(--heart-red);border-radius:6px;background:transparent}
body.fh-on .fcd-card .fcd-fav::before{width:20px;height:20px}
body.fh-on .fcd-card .fcd-fav:hover{color:var(--heart-hover);background:rgba(255,23,68,.08)}
body.fh-on .fcd-card .fcd-fav[aria-pressed="true"]{color:var(--heart-red)}
body.fh-on .fcd-card .fcd-fav[aria-pressed="true"]:hover{color:var(--heart-hover)}
body.fh-on .fcd-card .fcd-fav[aria-pressed="true"]::before{animation:fcd-heart-pop .28s ease-out}
body.fh-on .fcd-card .fcd-fav:focus-visible{outline:3px solid var(--heart-red);outline-offset:1px}
@keyframes fcd-heart-pop{0%{transform:scale(.7)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (pointer:coarse){body.fh-on .fcd-card .fcd-fav{width:44px;height:44px;top:0;right:0}}
/* Xem thêm: chữ nhật bo 6px, viền hồng rõ */
body.fh-on .fcd-more{min-height:46px;padding:0 1.75rem;font-size:.9375rem;font-weight:700;color:var(--brand-hover);background:#fff;border:1.5px solid var(--brand-primary);border-radius:6px;box-shadow:0 1px 3px var(--shadow-pink)}
body.fh-on .fcd-more:hover{background:var(--brand-soft);border-color:var(--brand-hover)}
body.fh-on .fcd-more:active{background:#FFE0EA}
body.fh-on .fcd-more:focus-visible{outline:3px solid var(--brand-primary);outline-offset:2px}
body.fh-on .fcd-status{background:#fff;border:1px dashed var(--border-strong);border-radius:10px;color:var(--text-secondary)}
body.fh-on .fcd-catnote{background:#fff;border:1px solid var(--card-border);border-radius:8px;color:var(--text-secondary)}
.fh-toast{background:var(--text-primary);border-radius:6px}
body.fcd-front .fcd-footer{border-top:1px solid var(--card-border);color:var(--text-secondary)}
::selection{background:#FFD3E1;color:var(--text-primary)}

/* ===== Phase 16: mọi card cùng kích thước cố định; vùng preview cố định, chữ tự thu nhỏ; nút Sao chép nhỏ gọn nền trắng ===== */
body.fh-on .fcd-list{align-items:start}
body.fh-on .fcd-card{box-sizing:border-box;display:flex;flex-direction:column;gap:.25rem;height:10.75rem;min-height:10.75rem;max-height:10.75rem;padding:.625rem .75rem .625rem;overflow:hidden}
body.fh-on .fcd-name{flex:0 0 auto;display:block;height:1.25rem;margin:0;padding-right:2.25rem;line-height:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.fh-on .fcd-pv{flex:1 1 0;min-height:0;display:flex;align-items:center;padding:0;overflow:hidden}
body.fh-on .fcd-pv .fcd-out{flex:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;width:100%;min-height:0;max-height:100%;margin:0;overflow:hidden;font-size:1.3125rem;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}
body.fh-on .fcd-card .fcd-fav{top:.25rem;right:.25rem;width:34px;height:34px}
@media (pointer:coarse){body.fh-on .fcd-card .fcd-fav{width:36px;height:36px;top:.125rem;right:.125rem}}
/* nút Sao chép: nền trắng, viền hồng nhẹ, chữ/icon hồng thương hiệu; nền hồng đậm chỉ khi hover/bấm */
body.fh-on .fcd-card .fcd-btn{flex:0 0 auto;align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;box-sizing:border-box;height:32px;min-height:32px;min-width:7rem;max-width:100%;margin:0;padding:0 .75rem;font-size:.8125rem;font-weight:700;line-height:1;color:var(--brand-primary);background:#fff;border:1px solid var(--card-border);border-radius:6px;box-shadow:none;letter-spacing:.01em;white-space:nowrap}
body.fh-on .fcd-card .fcd-btn::before{flex:0 0 .875rem;width:.875rem;height:.875rem}
body.fh-on .fcd-card .fcd-btn:hover{color:#fff;background:var(--brand-primary);border-color:var(--brand-primary)}
body.fh-on .fcd-card .fcd-btn:active{color:#fff;background:var(--brand-active);border-color:var(--brand-active);transform:none}
body.fh-on .fcd-card .fcd-btn:focus-visible{outline:3px solid var(--brand-primary);outline-offset:2px}
body.fh-on .fcd-card .fcd-btn.is-copied{color:#fff;background:var(--brand-primary);border-color:var(--brand-primary)}
body.fh-on .fcd-card .fcd-btn.is-failed{color:#9b1c1c;background:#fff;border:1px solid #9b1c1c;align-self:flex-end;margin:0;white-space:nowrap}
@media (pointer:coarse){body.fh-on .fcd-card .fcd-btn{height:36px;min-height:36px}body.fh-on .fcd-card{height:11rem;min-height:11rem;max-height:11rem}}

/* ===== Phase 17: căn giữa khối preview theo chiều dọc trong vùng giữa tên kiểu và nút Sao chép ===== */
body.fh-on .fcd-pv{align-items:center}
body.fh-on .fcd-pv .fcd-out{align-self:center}

/* ===== Phase 18: nội dung bổ trợ dưới công cụ (dùng lại bảng màu, thẻ và typography hiện có) ===== */
.fcd-seo{margin:3rem 0 1.5rem;padding-top:2rem;border-top:1px solid var(--card-border,#F3B5C8)}
.fcd-seo h2{display:flex;align-items:center;gap:.625rem;margin:2.5rem 0 .75rem;font-size:clamp(1.375rem,3.4vw,1.75rem);font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--text-primary,#24151C)}
.fcd-seo h2:first-child{margin-top:0}
.fcd-seo h2::before{content:"";flex:0 0 auto;width:.5rem;height:1.25em;background:var(--brand-primary,#FF2D75);border-radius:2px}
.fcd-seo h3{margin:1.5rem 0 .375rem;font-size:1.125rem;font-weight:700;line-height:1.35;color:var(--text-primary,#24151C)}
.fcd-seo p{max-width:46rem;margin:.5rem 0;font-size:1rem;line-height:1.65;color:var(--text-primary,#24151C)}
.fcd-seo .fcd-seo-note{font-size:.875rem;color:var(--text-secondary,#70525E)}
.fcd-exs{display:flex;flex-wrap:wrap;gap:.625rem;margin:.75rem 0 1rem}
.fcd-ex{flex:1 1 11rem;min-width:0;display:flex;flex-direction:column;gap:.125rem;padding:.625rem .75rem;background:#fff;border:1px solid var(--card-border,#F3B5C8);border-radius:10px;box-shadow:0 3px 10px rgba(217,27,96,.08)}
.fcd-ex--wide{flex-basis:15rem}
.fcd-ex-k{font-size:.8125rem;font-weight:700;color:var(--text-secondary,#70525E)}
.fcd-ex-o{display:block;font-size:1.25rem;line-height:1.45;color:var(--text-primary,#24151C);overflow-wrap:anywhere}
.fcd-ex-i{font-size:.75rem;color:var(--text-secondary,#70525E)}
.fcd-seo-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.875rem;margin:.75rem 0 1rem}
@media (min-width:48rem){.fcd-seo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fcd-seo-card{min-width:0;padding:1rem 1.125rem 1.125rem;background:#fff;border:1px solid var(--card-border,#F3B5C8);border-radius:10px;box-shadow:0 3px 10px rgba(217,27,96,.08)}
.fcd-seo-card h3{margin:0 0 .25rem;font-size:1.0625rem}
.fcd-seo-card p{margin:.375rem 0;font-size:.9375rem;line-height:1.6}
.fcd-seo-card .fcd-exs{margin:.75rem 0 0}
.fcd-seo-card .fcd-ex{background:var(--page-bg,#FFF9FA);box-shadow:none}
.fcd-seo-tips{max-width:46rem;margin:.5rem 0 .75rem;padding-left:1.25rem}
.fcd-seo-tips li{margin:.5rem 0;line-height:1.65}
.fcd-seo-tips li::marker{color:var(--brand-primary,#FF2D75)}
.fcd-faq{max-width:52rem}
.fcd-faq-i{padding:.875rem 0 .75rem;border-bottom:1px solid var(--card-border,#F3B5C8)}
.fcd-faq-i:last-child{border-bottom:0}
.fcd-faq-i h3{margin:0 0 .25rem;font-size:1.0625rem}
.fcd-faq-i p{margin:.25rem 0 0}

/* mục đích sử dụng (hàng thứ hai, độc lập với “Kiểu chữ”) */
.fcd-purposes{margin:.875rem 0 0}
.fcd-plabel{margin:0 0 .25rem;font-size:.75rem;line-height:1rem;font-weight:700;letter-spacing:.02em;color:var(--text-secondary)}
.fcd-plabel--style{margin:.5rem 0 0}
.fcd-prow{display:flex;gap:.375rem;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:1px}
.fcd-prow::-webkit-scrollbar{display:none}
.fcd-pchip{flex:0 0 auto;min-height:38px;padding:0 .8125rem;font:inherit;font-size:.875rem;font-weight:700;color:#B9154D;background:#FFF1F5;border:1px solid #F3B5C8;border-radius:6px;cursor:pointer;white-space:nowrap}
.fcd-pchip:hover{border-color:#E97A9E}
.fcd-pchip[aria-pressed="true"]{color:#fff;background:#D91B60;border-color:#D91B60;box-shadow:0 2px 8px rgba(217,27,96,.3)}
.fcd-pchip:focus-visible,.fcd-psubchip:focus-visible,.fcd-linkbtn:focus-visible{outline:3px solid #FF2D75;outline-offset:2px}
.fcd-psub{display:flex;gap:.375rem;margin-top:.375rem;overflow-x:auto;scrollbar-width:none;padding:1px}
.fcd-psub[hidden]{display:none}
.fcd-psub::-webkit-scrollbar{display:none}
.fcd-psubchip{flex:0 0 auto;min-height:32px;padding:0 .75rem;font:inherit;font-size:.8125rem;font-weight:700;color:var(--text-secondary);background:#fff;border:1px solid #F3B5C8;border-radius:6px;cursor:pointer;white-space:nowrap}
.fcd-psubchip[aria-pressed="true"]{color:#B9154D;background:#FFF1F5;border-color:#D91B60}
@media (max-width:47.99rem){.fcd-prow,.fcd-psub{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}}
.fcd-empty-acts{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.75rem}
.fcd-linkbtn{min-height:38px;padding:0 .875rem;font:inherit;font-size:.875rem;font-weight:700;color:#B9154D;background:#fff;border:1px solid #F3B5C8;border-radius:6px;cursor:pointer}
.fcd-linkbtn:hover{background:#FFF1F5;border-color:#E97A9E}
.fcd-purposes+.fh-nav{padding-top:.125rem}

/* ===== Phase 21: MOBILE (dưới 768px) 1 cột, card compact; desktop giữ nguyên ===== */
@media (max-width:47.99rem){
  /* khu phía trên gọn hơn */
  body.fh-on .fcd-h1{margin-top:0;margin-bottom:.125rem}
  body.fh-on .fcd-lead{margin:0 0 .625rem;font-size:.875rem;line-height:1.45}
  body.fh-on .fcd-input{min-height:3.75rem;padding:.625rem 2.5rem .625rem .875rem;font-size:1.25rem}
  .fcd-purposes{margin-top:.5rem}
  .fcd-plabel--style{margin-top:.375rem}
  .fh-nav{margin-top:.125rem;padding-top:.125rem;padding-bottom:.25rem}
  .fcd-purposes+.fh-nav{padding-top:.125rem}
  .fh-bar{gap:.375rem;margin:.375rem 0 .5rem}
  body.fh-on .fcd-search-input{min-height:38px}
  body.fh-on .fcd-catnote{margin:0 0 .5rem}
  /* danh sách: đúng 1 cột */
  body.fh-on .fcd-list{grid-template-columns:minmax(0,1fr);gap:.4375rem}
  body.fh-on .fcd-group{margin:.625rem 0 .125rem;padding-bottom:.375rem}
  body.fh-on .fcd-group-title{font-size:1.0625rem}
  body.fh-on .fcd-group-title::before{height:1rem}
  /* card: hàng trên = tên + yêu thích; hàng dưới = preview + nút Sao chép */
  body.fh-on .fcd-list .fcd-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1.125rem minmax(0,1fr);column-gap:.5rem;row-gap:.125rem;align-items:stretch;height:6.125rem;min-height:6.125rem;max-height:6.125rem;padding:.4375rem .625rem .5rem}
  body.fh-on .fcd-list .fcd-card:hover{transform:none}
  body.fh-on .fcd-list .fcd-name{grid-area:1/1/2/3;height:1.125rem;line-height:1.125rem;padding-right:2.5rem;font-size:.75rem}
  body.fh-on .fcd-list .fcd-pv{grid-area:2/1/3/2;align-self:stretch;min-width:0}
  body.fh-on .fcd-list .fcd-card .fcd-btn{grid-area:2/2/3/3;align-self:center;justify-self:end;min-width:0;width:auto;height:36px;min-height:36px;padding:0 .625rem;gap:.25rem;font-size:.75rem}
  body.fh-on .fcd-list .fcd-card .fcd-fav{top:.0625rem;right:.125rem;width:36px;height:36px}
  body.fh-on .fcd-list .fcd-card .fcd-fav::before{width:18px;height:18px}
  body.fh-on .fcd-sec-more{margin:.25rem 0 .5rem}
  body.fh-on .fcd-more{min-height:44px;width:100%}
}

/* chân trang: liên kết thông tin website (giới thiệu, liên hệ, chính sách…) */
.fcd-footer-nav{flex:1 1 100%;margin:0 0 .25rem}
.fcd-footer-nav ul{display:flex;flex-wrap:wrap;gap:0 1.25rem;margin:0;padding:0;list-style:none}
.fcd-footer-nav a{display:inline-block;padding:.375rem 0;font-weight:600;color:var(--text-secondary,#70525E);text-decoration:none}
.fcd-footer-nav a:hover{color:var(--brand-hover,#D91B60);text-decoration:underline;text-underline-offset:2px}
.fcd-footer-nav a:focus-visible{outline:3px solid var(--brand-primary,#FF2D75);outline-offset:2px;border-radius:2px}

/* dòng mô tả nổi bật dưới H1 (không phải thẻ tiêu đề) */
.fcd-tagline{margin:.25rem 0 .5rem;max-width:46rem;font-size:clamp(1.0625rem,2.6vw,1.375rem);font-weight:800;line-height:1.3;letter-spacing:-.01em;color:var(--brand-active,#B9154D)}
@media (max-width:47.99rem){.fcd-tagline{margin:.125rem 0 .25rem;font-size:1rem;line-height:1.25}body.fh-on .fcd-lead{line-height:1.4}}