/* ===== Menu "Thiết kế web" (/thiet-ke-web, /thiet-ke-web/{mẫu}) =====
   Chỉ dùng token màu chung (colors_and_type.css) nên tự theo dark mode. */

/* ---- Trang tổng: lưới thẻ mẫu theo ngành ---- */
.wd-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.wd-card { background:var(--surface); border:1px solid var(--border-1); border-radius:var(--r-xl); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow 260ms var(--ease-out), transform 260ms var(--ease-out), border-color 260ms; }
.wd-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--brand-300); }
.wd-card--live { grid-column:span 2; flex-direction:row; }
.wd-card--live .wd-card-img { flex:1.4; }
.wd-card--live .wd-card-body { flex:1; justify-content:center; }
.wd-card-img { display:block; background:var(--bg-2); border-right:1px solid var(--border-1); }
.wd-card-img img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.wd-card-emoji { font-size:44px; padding:28px 24px 0; }
.wd-card-body { padding:22px 24px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.wd-card-body h2 { font-size:21px; font-weight:800; margin:0; letter-spacing:-0.01em; }
.wd-card-body p { color:var(--fg-3); font-size:14.5px; line-height:1.55; margin:0 0 8px; flex:1; }
.wd-card-ind { font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--brand-700); }
.wd-card-body .btn { align-self:flex-start; }

/* ---- Trang mẫu: đầu trang có khung trình duyệt + điện thoại ---- */
.wd-hero { padding-bottom:56px; }
.wd-hero-in { display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center; }
.wd-hero p { font-size:17px; line-height:1.6; }
.wd-crumbs { font-size:13.5px; color:var(--fg-3); }
.wd-crumbs a { color:var(--brand-700); font-weight:600; }
.wd-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.wd-devices { position:relative; padding:0 0 32px 0; }
.wd-browser { border-radius:14px; overflow:hidden; border:1px solid var(--border-2); background:var(--surface); box-shadow:var(--shadow-lg); }
.wd-browser-bar { display:flex; gap:6px; padding:10px 12px; background:var(--bg-3); border-bottom:1px solid var(--border-1); }
.wd-browser-bar i { width:10px; height:10px; border-radius:50%; background:var(--ink-300); }
.wd-browser img { display:block; width:100%; height:auto; }
.wd-phone { position:absolute; right:-14px; bottom:0; width:24%; min-width:96px; aspect-ratio:9/18.5; border-radius:22px; border:6px solid var(--ink-900); overflow:hidden; background:var(--ink-900); box-shadow:var(--shadow-lg); }
.wd-phone img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }

/* ---- Thẻ nhóm tính năng ---- */
.wd-tabs-sec { padding-top:56px; }
.wd-tabs { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin:0 auto 36px; padding:6px; background:var(--bg-2); border:1px solid var(--border-1); border-radius:999px; width:fit-content; max-width:100%; position:sticky; top:76px; z-index:5; }
.wd-tabs[hidden] { display:none; }
.wd-tabs button { font:inherit; font-size:14.5px; font-weight:600; color:var(--fg-2); background:transparent; border:0; border-radius:999px; padding:10px 18px; cursor:pointer; transition:background 180ms, color 180ms; }
.wd-tabs button:hover { color:var(--brand-700); }
.wd-tabs button[aria-selected="true"] { background:var(--brand-500); color:#fff; box-shadow:var(--shadow-sm); }
.wd-tabs button:focus-visible { outline:2px solid var(--brand-500); outline-offset:2px; }
.wd-panel + .wd-panel { margin-top:64px; }           /* không JS: các nhóm xếp liền nhau */
.wd-tabs:not([hidden]) ~ .wd-panel { margin-top:0; }
.wd-panel { scroll-margin-top:150px; }
.wd-panel-head { text-align:center; max-width:720px; margin:0 auto 24px; }
.wd-panel-head h2 { font-size:clamp(26px, 3vw, 36px); font-weight:800; letter-spacing:-0.02em; margin:0 0 8px; }
.wd-panel-head p { color:var(--fg-3); font-size:17px; margin:0; }
.wd-feats { list-style:none; padding:0; margin:0 auto 36px; max-width:980px; display:grid; grid-template-columns:repeat(2, 1fr); gap:10px 28px; }
.wd-feats li { position:relative; padding-left:28px; font-size:15px; line-height:1.55; color:var(--fg-2); }
.wd-feats li::before { content:"✓"; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%; background:var(--brand-100); color:var(--brand-700); font-size:12px; font-weight:800; display:grid; place-items:center; }

/* ---- Ảnh chụp màn hình ---- */
.wd-shots { display:grid; grid-template-columns:repeat(2, 1fr); gap:28px; }
.wd-shot { margin:0; background:var(--surface); border:1px solid var(--border-1); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow 260ms var(--ease-out), transform 260ms var(--ease-out); }
.wd-shot:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.wd-shot a { display:block; aspect-ratio:16/10; overflow:hidden; background:var(--bg-2); border-bottom:1px solid var(--border-1); }
.wd-shot img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.wd-shot--tall a { aspect-ratio:auto; height:100%; max-height:420px; display:flex; justify-content:center; }
.wd-shot--tall img { width:auto; max-width:100%; object-fit:contain; }
.wd-shot figcaption { padding:14px 18px 16px; display:flex; flex-direction:column; gap:4px; }
.wd-shot figcaption b { font-size:16px; }
.wd-shot figcaption span { font-size:14px; color:var(--fg-3); line-height:1.5; }

/* ---- Tự động hoá + bộ màu ---- */
.wd-auto { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.wd-auto-item { background:var(--surface); border:1px solid var(--border-1); border-radius:16px; padding:22px; }
.wd-auto-ic { font-size:28px; margin-bottom:10px; }
.wd-auto-item h3 { font-size:16.5px; margin:0 0 6px; }
.wd-auto-item p { font-size:14px; color:var(--fg-3); line-height:1.5; margin:0; }
.wd-presets { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; max-width:880px; margin:0 auto; }
.wd-preset { text-align:center; }
.wd-preset-sw { display:flex; height:84px; border-radius:16px; overflow:hidden; border:1px solid var(--border-1); margin-bottom:10px; box-shadow:var(--shadow-sm); }
.wd-preset-sw i { flex:3; background:var(--c1); }
.wd-preset-sw i:nth-child(2) { flex:2; background:var(--c2); }
.wd-preset-sw i:nth-child(3) { flex:1; background:var(--c3); }
.wd-preset b { font-size:14.5px; }

@media (max-width: 1000px) {
  .wd-grid { grid-template-columns:repeat(2, 1fr); }
  .wd-hero-in { grid-template-columns:1fr; }
  .wd-auto { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .wd-grid, .wd-shots, .wd-feats { grid-template-columns:1fr; }
  .wd-card--live { grid-column:auto; flex-direction:column; }
  .wd-card-img { border-right:0; border-bottom:1px solid var(--border-1); aspect-ratio:16/10; }
  .wd-tabs { border-radius:16px; position:static; }
  .wd-tabs button { padding:9px 14px; font-size:14px; }
  .wd-phone { right:0; width:28%; }
  .wd-presets { grid-template-columns:repeat(2, 1fr); }
}