/*
Theme Name: LegalProTech
Theme URI: https://legalprotech.vn
Description: Theme tin tuc/blog dong bo giao dien landing LegalProTech.
Author: LGL TEAM
Version: 1.0.0
*/

    :root {
      --navy: #071735;
      --navy-2: #0d2754;
      --blue: #1d4ed8;
      --blue-soft: #eaf1ff;
      --gold: #d7aa54;
      --shine-black: #07090d;
      --ivory: #f8fafc;
      --mist: #e5e7eb;
      --ink: #0f172a;
      --muted: #5b6472;
      --line: rgba(15, 23, 42, .1);
      --white-line: rgba(255,255,255,.16);
      --shadow: 0 18px 50px rgba(15, 23, 42, .1);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    body {
      margin: 0;
      font-family: 'Be Vietnam Pro', sans-serif;
      color: var(--ink);
      background: #fff;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    button, input, textarea, select { font-family: inherit; }
    .container { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
    .section { padding: 88px 0; }
    .section-soft { background: #f6f8fc; }
    .section-dark { background: linear-gradient(180deg, var(--shine-black), var(--navy)); color: #fff; }
    .section-dark .section-text { color: rgba(255,255,255,.72); }
    .divider { border-top: 1px solid rgba(15,23,42,.08); }
    .topline {
      letter-spacing: .18em;
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 700;
      color: var(--blue);
    }
    .section-title {
      font-family: 'Lexend', sans-serif;
      font-size: clamp(34px, 4.6vw, 58px);
      line-height: 1.08;
      letter-spacing: -.035em;
      margin: 14px 0 18px;
    }
    .section-text {
      font-size: 17px;
      line-height: 1.9;
      color: var(--muted);
      margin: 0;
    }
    .center-head { text-align:center; max-width: 880px; margin: 0 auto 44px; }

    .btn-primary,
    .btn-secondary,
    .dark-btn,
    .blue-btn,
    .ghost-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 13px 22px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
      transition: .28s ease;
      cursor: pointer;
      white-space: nowrap;
    }
    .btn-primary { background: #fff; color: var(--navy); border: 1px solid #fff; }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
    .btn-secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.34); }
    .btn-secondary:hover { transform: translateY(-2px); border-color: #fff; background: rgba(255,255,255,.08); }
    .dark-btn { background: var(--shine-black); color: white; border: none; }
    .dark-btn:hover, .blue-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
    .blue-btn { background: var(--blue); color: #fff; border: 1px solid var(--blue); }
    .ghost-btn { background: rgba(255,255,255,.08); color:#fff; border: 1px solid rgba(255,255,255,.18); }

    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      overflow: hidden;
      color: #fff;
      background:
        linear-gradient(90deg, rgba(7,9,13,.9) 0%, rgba(7,23,53,.76) 42%, rgba(7,23,53,.35) 100%),
        url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&w=1800&q=80') center/cover;
    }
    .hero:before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, transparent 0, rgba(255,255,255,.06) 1px, transparent 1px),
        radial-gradient(circle at 86% 45%, rgba(215,170,84,.18), transparent 32%);
      background-size: 25% 100%, auto;
      opacity: .34;
      pointer-events: none;
    }

    .nav-shell {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 20;
      border-bottom: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(to bottom, rgba(7,9,13,.72), rgba(7,9,13,.16));
      backdrop-filter: blur(10px);
    }
    .nav-row {
      display: grid;
      grid-template-columns: 190px minmax(0, 1fr) auto;
      align-items: center;
      gap: 22px;
      min-height: 92px;
      color:#fff;
    }
    .brand {
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:800;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .brand-logo {
      width:54px;
      height:54px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.32);
      object-fit:contain;
      background:#fff;
      padding:3px;
      box-shadow: 0 12px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.7);
    }
    .brand-text { line-height: 1.05; }
    .brand-text span { display:block; }
    .brand-text small {
      display:block;
      margin-top: 5px;
      font-size: 10px;
      opacity:.62;
      letter-spacing:.18em;
    }
    .nav-main {
      display:flex;
      align-items:center;
      justify-content: flex-start;
      gap: clamp(10px, 1.25vw, 20px);
      font-size:12.5px;
      font-weight: 600;
    }
    .nav-main a { color: rgba(255,255,255,.86); }
    .nav-main a:hover { color:#fff; }
    .nav-menu { display: contents; }
    .nav-actions { display:flex; align-items:center; gap:10px; }
    .menu-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.08);
      color: #fff;
      cursor: pointer;
      transition: .25s ease;
    }
    .menu-toggle:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
    .menu-toggle span {
      position: relative;
      width: 22px;
      height: 2px;
      border-radius: 99px;
      background: currentColor;
      display: block;
      transition: .25s ease;
    }
    .menu-toggle span::before,
    .menu-toggle span::after {
      content: '';
      position: absolute;
      left: 0;
      width: 22px;
      height: 2px;
      border-radius: 99px;
      background: currentColor;
      transition: .25s ease;
    }
    .menu-toggle span::before { top: -7px; }
    .menu-toggle span::after { top: 7px; }
    .nav-shell.menu-open .menu-toggle span { background: transparent; }
    .nav-shell.menu-open .menu-toggle span::before { top: 0; transform: rotate(45deg); }
    .nav-shell.menu-open .menu-toggle span::after { top: 0; transform: rotate(-45deg); }
    .auth-link {
      color: rgba(255,255,255,.88);
      font-size: 13px;
      font-weight: 700;
      padding: 10px 0;
    }
    .register-link {
      color: #071735;
      background: #fff;
      border-radius: 999px;
      padding: 11px 15px;
      font-size: 13px;
      font-weight: 800;
    }

    .hero-grid {
      position:relative;
      z-index:5;
      display:grid;
      grid-template-columns: 1fr;
      gap: 50px;
      align-items:center;
      padding-top:120px;
      padding-bottom: 54px;
    }
    .hero-copy { max-width: 820px; }
    .hero-kicker { color: rgba(255,255,255,.75); margin-bottom: 18px; }
    .hero-title {
      font-family:'Lexend', sans-serif;
      font-size: clamp(42px, 6vw, 76px);
      line-height: 1.08;
      font-weight:700;
      letter-spacing:-.035em;
      margin: 0 0 24px;
      max-width: 720px;
    }
    .hero-sub {
      color: rgba(255,255,255,.86);
      font-size: clamp(18px, 1.8vw, 21px);
      line-height: 1.85;
      max-width: 660px;
      margin: 0 0 30px;
    }
    .hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 38px; }
    .hero-stats {
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:16px;
      max-width: 720px;
    }
    .stat-box {
      border:1px solid rgba(255,255,255,.16);
      border-radius: 22px;
      padding:18px;
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(6px);
    }
    .stat-num {
      font-family:'Lexend', sans-serif;
      font-size: 36px;
      line-height:1;
      margin-bottom:8px;
      font-weight: 800;
    }
    .stat-label { color: rgba(255,255,255,.74); font-size:13px; line-height: 1.55; }
    .hero-sidecard {
      justify-self:end;
      width:min(440px, 100%);
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.16);
      backdrop-filter: blur(12px);
      border-radius: 30px;
      padding: 24px;
      box-shadow: 0 18px 60px rgba(0,0,0,.28);
    }
    .sidecard-image { width:100%; height:420px; object-fit:cover; border-radius:24px; }
    .sidecard-copy { padding:20px 4px 2px; display:grid; gap:8px; }
    .sidecard-copy small { color: rgba(255,255,255,.68); text-transform:uppercase; letter-spacing:.15em; font-size:11px; }
    .sidecard-copy h3 { font-family:'Lexend', sans-serif; font-size: 28px; color:white; margin:0; line-height: 1.2; }
    .sidecard-copy p { color: rgba(255,255,255,.78); margin:0; line-height:1.8; }

    .finder-strip {
      position: relative;
      z-index: 10;
      margin-top: -46px;
    }
    .finder-panel {
      background: #fff;
      border: 1px solid rgba(15,23,42,.08);
      border-radius: 28px;
      box-shadow: var(--shadow);
      padding: 22px;
      display: grid;
      gap: 18px;
    }
    .finder-title {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 18px;
      flex-wrap: wrap;
    }
    .finder-title h2 {
      font-family: 'Lexend', sans-serif;
      font-size: 24px;
      line-height: 1.2;
      margin: 0;
    }
    .finder-title p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }
    .search-grid {
      display:grid;
      grid-template-columns: 1.35fr 1fr 1fr .9fr auto;
      gap: 12px;
      align-items:end;
    }
    .field { display:grid; gap:8px; min-width: 0; }
    .field label {
      font-size: 12px;
      color: #64748b;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .input, .textarea, .select, .newsletter-input {
      width:100%;
      border:1px solid rgba(15,23,42,.12);
      border-radius: 16px;
      padding: 14px 15px;
      outline:none;
      font-size:15px;
      background:#fff;
      color: var(--ink);
      transition: .25s ease;
    }
    .input:focus, .textarea:focus, .select:focus, .newsletter-input:focus {
      border-color: rgba(29,78,216,.45);
      box-shadow: 0 0 0 4px rgba(29,78,216,.08);
    }
    .textarea { min-height: 128px; resize: vertical; }

    .platform-stats {
      display:grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 14px;
      margin-top: 34px;
    }
    .platform-stat {
      background:#fff;
      border:1px solid rgba(15,23,42,.08);
      border-radius:22px;
      padding:18px;
      box-shadow: 0 12px 36px rgba(15,23,42,.06);
    }
    .platform-stat strong {
      display:block;
      font-family:'Lexend', sans-serif;
      font-size: 30px;
      line-height: 1;
      color: var(--navy);
      margin-bottom: 8px;
    }
    .platform-stat span {
      display:block;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }

    .legal-field-grid {
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-top: 28px;
    }
    .legal-field-card {
      background: #fff;
      border:1px solid rgba(15,23,42,.08);
      border-radius: 24px;
      padding: 24px;
      min-height: 225px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      box-shadow: 0 12px 36px rgba(15,23,42,.06);
      transition: .28s ease;
    }
    .legal-field-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow);
      border-color: rgba(29,78,216,.2);
    }
    .card-head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
      margin-bottom: 16px;
    }
    .card-num {
      min-width: 46px;
      height: 46px;
      border-radius: 15px;
      display:grid;
      place-items:center;
      background: var(--blue-soft);
      color: var(--blue);
      font-weight: 800;
      font-family: 'Lexend', sans-serif;
    }
    .card-icon {
      width: 46px;
      height: 46px;
      border-radius: 15px;
      display:grid;
      place-items:center;
      background: #f8fbff;
      color: var(--blue);
      border: 1px solid rgba(29,78,216,.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    }
    .card-icon svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .legal-field-card h3 {
      font-family: 'Lexend', sans-serif;
      font-size: 22px;
      line-height: 1.25;
      margin: 0 0 10px;
      color: var(--navy);
    }
    .legal-field-card p {
      color: var(--muted);
      line-height: 1.75;
      font-size: 14px;
      margin: 0 0 18px;
    }
    .card-link {
      display:inline-flex;
      align-items:center;
      gap:8px;
      color: var(--blue);
      font-weight: 800;
      font-size: 14px;
    }

    .intro-grid { display:grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items:center; }
    .intro-grid > * { min-width: 0; }
    .wide-image-slot {
      position: relative;
      width: calc(100% + 96px);
      max-width: none;
      min-width: 0;
      min-height: 480px;
      aspect-ratio: 16 / 10;
      margin-left: -72px;
      border-radius: 34px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.18);
      background:
        radial-gradient(circle at top left, rgba(215,170,84,.24), transparent 34%),
        linear-gradient(135deg, rgba(13,39,84,.9), rgba(7,9,13,.9));
      box-shadow: 0 26px 90px rgba(0,0,0,.28);
    }
    .wide-image-slot img {
      position:absolute;
      inset:0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .wide-image-slot:before {
      content: '';
      position:absolute;
      inset: 18px;
      border-radius: 24px;
      border:1px solid rgba(255,255,255,.12);
      pointer-events:none;
    }
    .slot-content {
      position:relative;
      z-index:2;
      max-width: 520px;
    }
    .slot-content span {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 64px;
      height: 64px;
      border-radius: 20px;
      background:rgba(255,255,255,.12);
      margin-bottom: 18px;
      font-size: 28px;
    }
    .slot-content h3 {
      font-family:'Lexend', sans-serif;
      margin:0 0 10px;
      font-size: 28px;
      line-height:1.2;
    }
    .slot-content p {
      color:rgba(255,255,255,.72);
      line-height:1.75;
      margin: 0;
    }
    .feature-list {
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 16px;
      margin-top: 28px;
    }
    .feature-item {
      display:flex;
      gap:14px;
      align-items:flex-start;
      padding: 18px;
      border:1px solid rgba(255,255,255,.12);
      border-radius: 20px;
      background: rgba(255,255,255,.04);
    }
    .feature-dot {
      width:10px;
      height:10px;
      border-radius:999px;
      background:white;
      margin-top:8px;
      flex: 0 0 auto;
      box-shadow: 0 0 0 6px rgba(255,255,255,.08);
    }
    .feature-item h4 { margin:0 0 6px; font-size:15px; }
    .feature-item p { margin:0; font-size:13px; line-height:1.7; color:rgba(255,255,255,.7); }

    .practice-grid {
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 20px;
    }
    .practice-card {
      padding: 30px;
      border-radius:26px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      transition: transform .28s ease, background .28s ease, border-color .28s ease;
    }
    .practice-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
    .practice-icon {
      width:54px;
      height:54px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.14);
      display:grid;
      place-items:center;
      font-family:'Lexend', sans-serif;
      font-size:22px;
      margin-bottom:18px;
      color: var(--gold);
    }
    .practice-card h3 { font-family:'Lexend', sans-serif; font-size:26px; margin:0 0 12px; }
    .practice-card p { margin:0; color: rgba(255,255,255,.72); line-height:1.85; }

    .audience-grid {
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap:20px;
    }
    .audience-card {
      background:#fff;
      border:1px solid rgba(15,23,42,.08);
      border-radius: 28px;
      padding: 28px;
      box-shadow: 0 12px 36px rgba(15,23,42,.06);
    }
    .audience-card h3 {
      font-family:'Lexend', sans-serif;
      font-size: 24px;
      line-height: 1.25;
      margin: 0 0 12px;
      color: var(--navy);
    }
    .audience-card p {
      color: var(--muted);
      line-height: 1.8;
      margin: 0 0 18px;
      font-size: 14px;
    }
    .mini-list {
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:10px;
      color: var(--ink);
      font-size:14px;
      line-height:1.55;
    }
    .mini-list li {
      position:relative;
      padding-left:20px;
    }
    .mini-list li:before {
      content:'';
      position:absolute;
      left:0;
      top:.55em;
      width:7px;
      height:7px;
      border-radius:999px;
      background: var(--blue);
    }

    .contact-band {
      background: linear-gradient(135deg, var(--navy), #163465);
      color:white;
      border-radius:36px;
      overflow:hidden;
      display:grid;
      grid-template-columns: .92fr 1.08fr;
      box-shadow: var(--shadow);
    }
    .contact-copy, .contact-form { padding: 46px; }
    .contact-form { background:white; color:var(--ink); }
    .contact-meta {
      display:grid;
      grid-template-columns: 1fr;
      gap:14px;
      margin-top:26px;
    }
    .contact-meta div {
      padding:16px 18px;
      border:1px solid rgba(255,255,255,.12);
      border-radius: 18px;
      background: rgba(255,255,255,.05);
    }
    .contact-meta strong { display:block; margin-bottom:5px; }
    .contact-meta p { margin:0; color: rgba(255,255,255,.72); line-height: 1.7; }
    .contact-form-grid {
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 14px;
      margin-top: 18px;
    }
    .form-full { grid-column: 1 / -1; }
    .required { color:#dc2626; }
    .checkline {
      display:flex;
      align-items:flex-start;
      gap:10px;
      color: var(--muted);
      font-size:13px;
      line-height:1.7;
      margin: 16px 0 24px;
    }

    .testimonial-grid,
    .blog-grid {
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 20px;
    }
    .quote-card,
    .post-card {
      background:white;
      border-radius:28px;
      overflow:hidden;
      box-shadow: 0 12px 36px rgba(15,23,42,.07);
      border:1px solid rgba(15,23,42,.06);
    }
    .quote-card { padding:28px; }
    .quote-mark { font-family:'Lexend', sans-serif; font-size:48px; color:var(--blue); line-height:.7; margin-bottom:16px; }
    .quote-card p { margin:0 0 18px; line-height:1.85; color:var(--muted); }
    .quote-card strong { font-size:14px; color:var(--ink); }
    .post-card img { width:100%; height:240px; object-fit:cover; }
    .post-copy { padding: 22px; }
    .post-meta {
      display:flex;
      justify-content:space-between;
      gap:12px;
      color:var(--muted);
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-bottom:14px;
    }
    .post-title {
      font-family:'Lexend', sans-serif;
      font-size:23px;
      line-height:1.25;
      margin:0;
    }

    .newsletter {
      background: linear-gradient(135deg, var(--shine-black), var(--navy));
      color:white;
      border-radius:34px;
      padding: 40px 44px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }
    .newsletter h3 { font-family:'Lexend', sans-serif; font-size:34px; line-height:1.18; margin:0 0 8px; }
    .newsletter p { margin:0; color: rgba(255,255,255,.72); }
    .newsletter-form { display:flex; gap:12px; min-width:min(480px,100%); }
    .newsletter-input {
      flex:1;
      min-width:0;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.06);
      color:white;
      padding: 0 20px;
      height:56px;
    }

    .footer { background: var(--shine-black); color:white; padding: 78px 0 32px; }
    .footer-grid {
      display:grid;
      grid-template-columns: 1.1fr .7fr .7fr .9fr;
      gap:24px;
      padding-bottom:36px;
    }
    .footer h4 { font-family:'Lexend', sans-serif; font-size:24px; margin:0 0 16px; }
    .footer p, .footer a { color: rgba(255,255,255,.68); line-height:1.85; }
    .footer-links { display:grid; gap:8px; }
    .footer-bottom {
      border-top:1px solid rgba(255,255,255,.08);
      padding-top:20px;
      display:flex;
      justify-content:space-between;
      gap:16px;
      color:rgba(255,255,255,.52);
      font-size:13px;
    }

    .reveal { opacity: 0; transform: translateY(24px); transition: .75s ease; }
    .reveal.show { opacity: 1; transform: translateY(0); }

    @media (max-width: 1180px) {
      .nav-shell { position: absolute; }
      .nav-row {
        grid-template-columns: 1fr auto;
        gap: 12px;
        min-height: 78px;
        padding: 10px 0;
      }
      .brand-logo { width: 48px; height: 48px; border-radius: 14px; }
      .brand-text small { display:none; }
      .menu-toggle { display:inline-flex; }
      .nav-menu {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transition: max-height .32s ease, opacity .24s ease, padding .24s ease;
      }
      .nav-shell.menu-open .nav-menu {
        max-height: 640px;
        opacity: 1;
        pointer-events: auto;
        padding: 6px 0 12px;
      }
      .nav-main,
      .nav-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        justify-content: stretch;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 22px;
        background: rgba(7,9,13,.92);
        overflow: hidden;
        box-shadow: 0 18px 44px rgba(0,0,0,.22);
      }
      .nav-main a,
      .nav-actions a {
        display:flex;
        align-items:center;
        justify-content:space-between;
        min-height: 46px;
        padding: 13px 16px;
        border-bottom: 1px solid rgba(255,255,255,.08);
      }
      .nav-main a::after,
      .nav-actions a::after { content: '›'; opacity:.42; font-size:20px; line-height:1; }
      .nav-main a:last-child,
      .nav-actions a:last-child { border-bottom: 0; }
      .nav-actions .ghost-btn,
      .nav-actions .register-link,
      .nav-actions .auth-link {
        border-radius: 0;
        width: 100%;
        padding: 13px 16px;
        min-height: 46px;
        background: transparent;
        color: rgba(255,255,255,.9);
        border-left: 0;
        border-right: 0;
        border-top: 0;
      }
      .nav-actions .register-link { color: #fff; font-weight: 800; }
      .hero-grid, .intro-grid, .contact-band, .footer-grid { grid-template-columns: 1fr; }
      .hero-sidecard { justify-self:start; }
      .wide-image-slot {
        width: 100%;
        max-width: 100%;
        min-height: 360px;
        margin-left: 0;
      }
      .search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .search-grid .blue-btn { width: 100%; }
      .platform-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 860px) {
      .container { width: min(1200px, calc(100% - 30px)); }
      .section { padding: 68px 0; }
      .hero { min-height: auto; }
      .hero-grid { grid-template-columns: 1fr; padding-top: 132px; }
      .hero-title { font-size: 42px; }
      .hero-stats, .legal-field-grid, .practice-grid, .feature-list, .audience-grid, .contact-form-grid, .testimonial-grid, .blog-grid, .platform-stats { grid-template-columns: 1fr; }
      .sidecard-image { height: 320px; }
      .contact-copy, .contact-form, .newsletter { padding: 28px 22px; }
      .newsletter { flex-direction:column; align-items:flex-start; }
      .newsletter-form { flex-direction:column; min-width:100%; }
      .wide-image-slot {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 9;
        min-height: 280px;
        border-radius: 22px;
      }
      .wide-image-slot:before {
        inset: 10px;
        border-radius: 16px;
      }
      .slot-content {
        max-width: 92%;
      }
      .slot-content span {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        margin-bottom: 10px;
        font-size: 20px;
      }
      .slot-content h3 {
        font-size: 19px;
        margin-bottom: 6px;
      }
      .slot-content p {
        font-size: 12px;
        line-height: 1.5;
      }
      .search-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction:column; }
    }
    @media (max-width: 620px) {
      .nav-row { min-height: 72px; }
      .nav-actions { flex-wrap: wrap; }
      .hero-grid { padding-top: 116px; }
      .hero-sidecard { display:none; }
      .finder-strip { margin-top: 0; padding-top: 20px; }
      .platform-stat strong { font-size: 26px; }
    }

/* ===== Bo sung cho trang Tin tuc / bai viet (khop landing) ===== */
.nav-shell.nav-solid{position:relative;background:linear-gradient(180deg,var(--shine-black),var(--navy));backdrop-filter:none;}
body.wp-blog{background:#f6f8fc;}
.page-hero{background:linear-gradient(180deg,var(--shine-black),var(--navy));color:#fff;padding:54px 0 64px;}
.page-hero .topline{color:var(--gold);}
.page-hero h1{font-family:'Lexend',sans-serif;font-size:clamp(30px,4vw,48px);line-height:1.1;margin:.35em 0 0;}
.page-hero .article-meta{color:rgba(255,255,255,.7);margin-top:10px;}

/* ===== Bo loc Tin tuc ===== */
.lp-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin-top:26px;}
.lp-filter-field{display:flex;flex-direction:column;gap:6px;min-width:170px;}
.lp-filter-field.lp-filter-grow{flex:1 1 240px;}
.lp-filter-field label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);}
.lp-filter-field input,.lp-filter-field select{
  height:46px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:15px;outline:none;width:100%;
}
.lp-filter-field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:38px;}
.lp-filter-field select option{color:#0f172a;}
.lp-filter-field input::placeholder{color:rgba(255,255,255,.45);}
.lp-filter-field input:focus,.lp-filter-field select:focus{border-color:var(--gold);background:rgba(255,255,255,.1);}
.lp-filter-actions{display:flex;align-items:center;gap:14px;}
.lp-filter-btn{
  height:46px;padding:0 22px;border:none;border-radius:12px;cursor:pointer;
  background:var(--gold);color:var(--shine-black);font-weight:700;font-size:15px;
  display:inline-flex;align-items:center;gap:8px;transition:transform .15s,box-shadow .15s;
}
.lp-filter-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.lp-filter-clear{color:rgba(255,255,255,.7);font-weight:600;font-size:14px;text-decoration:underline;}
.lp-filter-clear:hover{color:#fff;}
@media(max-width:760px){.lp-filter-field{min-width:100%;}.lp-filter-actions{width:100%;}.lp-filter-btn{flex:1;}}
.blog-wrap{padding:56px 0 84px;}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;}
.single-article{background:#fff;border-radius:22px;box-shadow:var(--shadow);overflow:hidden;max-width:880px;margin:-44px auto 0;}
.single-article .article-cover img{width:100%;height:auto;max-height:440px;object-fit:cover;}
.article-body{padding:34px clamp(20px,4vw,52px) 52px;font-size:17px;line-height:1.85;color:#243043;}
.article-body h1,.article-body h2,.article-body h3{font-family:'Lexend',sans-serif;color:var(--ink);line-height:1.25;}
.article-body img{border-radius:14px;margin:18px 0;}
.article-body a{color:var(--blue);text-decoration:underline;}
.post-pagination{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:44px;}
.post-pagination a,.post-pagination span{padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;font-weight:600;color:var(--ink);}
.post-pagination .current{background:var(--blue);color:#fff;border-color:var(--blue);}
.back-link{display:inline-block;margin:26px 0 0;color:var(--blue);font-weight:700;}
@media(max-width:980px){.blog-grid{grid-template-columns:1fr;}}

/* ===== Tac gia + card nang cao ===== */
.hero-desc{color:rgba(255,255,255,.72);margin-top:10px;max-width:660px;font-size:15px;}
.author-byline{display:flex;align-items:center;gap:12px;margin-top:20px;}
.author-byline .author-ava{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.3);}
.author-byline .author-meta{display:flex;flex-direction:column;line-height:1.3;}
.author-byline .author-name{font-weight:700;color:#fff;}
.author-byline .author-role{font-size:13px;color:var(--gold);}
.author-byline .byline-date{margin-left:auto;color:rgba(255,255,255,.6);font-size:13px;}
.post-author-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.post-author-row .mini-ava{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;}
.post-author-row .mini-author{font-size:12.5px;line-height:1.3;color:var(--muted);}
.post-author-row .mini-author strong{color:var(--ink);}
.read-more{display:inline-block;margin-top:12px;color:var(--blue);font-weight:700;font-size:14px;}
.author-card{display:flex;gap:18px;align-items:flex-start;margin:8px clamp(20px,4vw,52px) 40px;padding:22px;border:1px solid var(--line);border-radius:16px;background:#f8fafc;}
.author-card img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;}
.author-card .author-name{font-weight:800;font-size:17px;display:block;}
.author-card .author-role{color:var(--blue);font-size:14px;display:block;margin:2px 0 8px;}
.author-card .author-bio{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6;}
.rel-title{font-family:'Lexend',sans-serif;font-size:24px;margin:48px 0 18px;color:var(--ink);}

/* ===== Form "Viết bài mới" (frontend) — sua loi vo font + canh layout =====
   Scope vao .blog-wrap (vung noi dung Trang/Bai) de bat duoc form du no
   khong nam trong .article-body. Khong dung den form bo loc o .page-hero. */
.blog-wrap form{
  display:block;
  max-width:760px;
  margin:8px auto 0;
  text-align:left;
}
.blog-wrap form h1,
.blog-wrap form h2,
.blog-wrap form h3{
  font-family:'Lexend',sans-serif;
  color:var(--ink);
  margin:0 0 20px;
}
/* Moi nhan (label) tren mot dong rieng */
.blog-wrap form label{
  display:block;
  font-family:'Be Vietnam Pro',sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
  margin:18px 0 7px;
}
/* Cac o nhap lieu: dong font + bo cuc gon gang */
.blog-wrap form input[type="text"],
.blog-wrap form input[type="search"],
.blog-wrap form input[type="url"],
.blog-wrap form input[type="email"],
.blog-wrap form input[type="number"],
.blog-wrap form input[type="date"],
.blog-wrap form input:not([type]),
.blog-wrap form select,
.blog-wrap form textarea{
  display:block;
  width:100%;
  font-family:'Be Vietnam Pro',sans-serif;
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(15,23,42,.14);
  border-radius:14px;
  padding:12px 14px;
  margin:0;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.blog-wrap form textarea{
  min-height:320px;
  resize:vertical;
}
.blog-wrap form input:focus,
.blog-wrap form select:focus,
.blog-wrap form textarea:focus{
  border-color:rgba(29,78,216,.45);
  box-shadow:0 0 0 4px rgba(29,78,216,.1);
}
.blog-wrap form select{
  appearance:none;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px;
  padding-right:40px;
}
/* O chon tep / anh bia */
.blog-wrap form input[type="file"]{
  display:block;
  width:100%;
  font-family:'Be Vietnam Pro',sans-serif;
  font-size:14px;
  color:var(--muted);
  margin:6px 0;
}
.blog-wrap form input[type="file"]::file-selector-button{
  font-family:'Be Vietnam Pro',sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  background:#f1f5f9;
  border:1px solid rgba(15,23,42,.14);
  border-radius:10px;
  padding:9px 14px;
  margin-right:12px;
  cursor:pointer;
  transition:background .2s;
}
.blog-wrap form input[type="file"]::file-selector-button:hover{
  background:#e2e8f0;
}
/* Nut Dang bai */
.blog-wrap form button,
.blog-wrap form input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  font-family:'Be Vietnam Pro',sans-serif;
  font-size:15px;
  font-weight:700;
  color:#fff;
  background:var(--blue);
  border:1px solid var(--blue);
  border-radius:999px;
  padding:13px 30px;
  margin-top:24px;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
.blog-wrap form button:hover,
.blog-wrap form input[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

/* ===== Bo cuc bai viet 2 cot (share trai + bai giua + sidebar phai) ===== */
.article-shell{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 340px;
  gap:30px;
  align-items:start;
  margin-top:-44px;
}
/* Trong layout moi: bo gioi han 880px + canh giua cua .single-article */
.article-shell .single-article{ max-width:none; margin:0; }
.article-main{ min-width:0; }
.article-main .back-link{ margin:24px 0 0; }

/* Thanh chia se doc ben trai */
.share-rail{
  position:sticky; top:96px;
  display:flex; flex-direction:column; gap:12px;
  list-style:none; margin:0; padding:0;
}
.share-rail a,
.share-rail button{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); color:var(--navy);
  font-size:15px; cursor:pointer; text-decoration:none;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  transition:.2s ease;
}
.share-rail a, .share-rail button{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
@media (hover:hover){
  .share-rail a:hover,
  .share-rail button:hover{ background:var(--blue); color:#fff; border-color:var(--blue); transform:translateY(-2px); }
}
.share-copy.copied{ background:#16a34a; color:#fff; border-color:#16a34a; }

/* Cot sidebar phai */
.post-sidebar{ position:sticky; top:96px; display:grid; gap:20px; min-width:0; }
.side-card{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:22px; box-shadow:0 12px 36px rgba(15,23,42,.06);
}
.side-card h4{ font-family:'Lexend',sans-serif; font-size:17px; margin:0 0 10px; color:var(--navy); }
.side-card p{ margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.7; }
.side-purpose{ background:var(--blue-soft); border-color:rgba(29,78,216,.12); }
.side-purpose p{ margin-bottom:0; color:#334155; }

.side-news-form{ display:grid; gap:10px; }
.side-news-form input{
  width:100%; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; font:inherit; font-size:14px; outline:none;
}
.side-news-form input:focus{ border-color:rgba(29,78,216,.45); box-shadow:0 0 0 4px rgba(29,78,216,.08); }
.side-news-form .blue-btn{ width:100%; min-height:44px; }

.side-lotus-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.side-lotus-actions a{ flex:1 1 120px; min-height:42px; font-size:13px; padding:10px 14px; }
.side-lotus-actions .ghost-btn.dark{ background:#0f172a; color:#fff; border-color:#0f172a; }
.side-lotus-actions .ghost-btn.dark:hover{ background:#1e293b; }

.topreads-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.topreads-list a{ display:flex; gap:12px; align-items:center; color:var(--ink); text-decoration:none; }
.topreads-list img{ width:66px; height:50px; border-radius:10px; object-fit:cover; flex:none; }
.topreads-list span{ font-size:13.5px; line-height:1.4; font-weight:600; }
.topreads-list a:hover span{ color:var(--blue); }

.more-from{ margin-top:50px; }

@media(max-width:1100px){
  .article-shell{ grid-template-columns:1fr; gap:22px; }
  .share-rail{ position:static; flex-direction:row; flex-wrap:wrap; margin-bottom:4px; }
  .post-sidebar{ position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .side-topreads{ grid-column:1 / -1; }
}
@media(max-width:680px){
  .post-sidebar{ grid-template-columns:1fr; }
}

/* ===== Nut "Viet bai" + form viet bai ===== */
.lp-write-btn{
  display:inline-flex; align-items:center; gap:8px;
  margin:18px 0 4px; padding:11px 20px; border-radius:999px;
  background:var(--gold); color:var(--shine-black); font-weight:700; font-size:14px;
  transition:transform .15s, box-shadow .15s;
}
.lp-write-btn{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
@media (hover:hover){
  .lp-write-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); color:var(--shine-black); }
}

.lp-write-gate{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:22px; color:var(--ink); font-size:15px;
}
.lp-write-gate a{ color:var(--blue); font-weight:700; text-decoration:underline; }

.lp-wp-msg{ border-radius:12px; padding:12px 16px; margin-bottom:18px; font-size:14px; font-weight:600; }
.lp-wp-msg.ok{ background:#dcfce7; color:#166534; border:1px solid #86efac; }
.lp-wp-msg.err{ background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }

.lp-write-form .lp-wp-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.lp-write-form .req{ color:#dc2626; }
.lp-write-form .lp-wp-seo{
  border:1px dashed var(--line); border-radius:16px; padding:14px 20px 20px; margin:24px 0 0;
}
.lp-write-form .lp-wp-seo legend{ font-weight:700; font-size:13px; color:var(--muted); padding:0 8px; }
.lp-write-form .lp-wp-seo textarea{ min-height:92px; }
@media(max-width:640px){ .lp-write-form .lp-wp-row{ grid-template-columns:1fr; } }

/* ===== Cham (touch): khong cho nut nhuc nhich / sticky-hover khi bam ===== */
@media (hover:none){
  .btn-primary:hover, .btn-secondary:hover, .dark-btn:hover, .blue-btn:hover, .ghost-btn:hover,
  .lp-write-btn:hover, .lp-filter-btn:hover,
  .blog-wrap form button:hover, .blog-wrap form input[type="submit"]:hover,
  .share-rail a:hover, .share-rail button:hover,
  .side-lotus-actions a:hover, .read-more:hover, .post-card:hover{
    transform:none !important;
    box-shadow:inherit;
  }
}
/* Bam giu (active): khong scale/dich chuyen tren moi thiet bi */
.btn-primary:active, .btn-secondary:active, .dark-btn:active, .blue-btn:active, .ghost-btn:active,
.lp-write-btn:active, .lp-filter-btn:active,
.blog-wrap form button:active, .blog-wrap form input[type="submit"]:active,
.share-rail a:active, .share-rail button:active{
  transform:none !important;
}
button, input[type="submit"], .lp-write-btn, .blue-btn, .btn-primary, .btn-secondary, .ghost-btn{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ===== Fix cung: nut "Viet bai" + "Dang bai" KHONG bao gio bien dang khi bam ===== */
.lp-write-btn,
.lp-write-form button,
.lp-write-form input[type="submit"]{
  transition:background-color .15s ease, color .15s ease !important;
  will-change:auto;
}
.lp-write-btn,        .lp-write-btn:hover,        .lp-write-btn:active,        .lp-write-btn:focus,
.lp-write-form button, .lp-write-form button:hover, .lp-write-form button:active, .lp-write-form button:focus,
.lp-write-form input[type="submit"]:hover,
.lp-write-form input[type="submit"]:active{
  transform:none !important;
  zoom:1 !important;
  scale:none !important;
}

/* ===== Bang kiem SEO trong form viet bai ===== */
.lp-seo-check{ margin-top:22px; border:1px solid var(--line); border-radius:16px; padding:18px 20px; background:#fbfcfe; }
.lp-seo-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.lp-seo-score{
  width:54px; height:54px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-weight:800; font-size:18px;
  color:#fff; background:#94a3b8;
}
.lp-seo-score.g{ background:#16a34a; }
.lp-seo-score.y{ background:#d97706; }
.lp-seo-score.r{ background:#dc2626; }
.lp-seo-head strong{ display:block; font-family:'Lexend',sans-serif; color:var(--ink); font-size:15px; }
.lp-seo-head small{ color:var(--muted); font-size:13px; }
.lp-seo-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.lp-seo-list li{ font-size:13.5px; line-height:1.5; display:flex; align-items:center; gap:9px; color:#334155; }
.lp-seo-list li i{ font-size:14px; flex:none; }
.lp-seo-list li.ok i{ color:#16a34a; }
.lp-seo-list li.warn i{ color:#d97706; }
.lp-seo-list li.err i{ color:#dc2626; }

/* ===== Bo cuc form viet bai: form (7) | bang SEO (3) nam canh nhau ===== */
.lp-write-shell{ display:grid; grid-template-columns:7fr 3fr; gap:28px; align-items:start; }
.lp-write-shell .lp-write-form{ max-width:none; margin:0; min-width:0; }
.lp-seo-side{ position:sticky; top:96px; min-width:0; }
.lp-write-shell .lp-seo-check{ margin-top:0; }
@media(max-width:900px){
  .lp-write-shell{ grid-template-columns:1fr; }
  .lp-seo-side{ position:static; }
}

/* Panel SEO dang nhom */
.lp-seo-body{ display:grid; gap:16px; }
.lp-seo-cat h5{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:0 0 8px; font-family:'Lexend',sans-serif; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--navy);
}
.lp-seo-cat h5 em{
  font-style:normal; font-size:11px; font-weight:700; color:var(--muted);
  background:#eef2f7; border-radius:999px; padding:2px 9px;
}