/*
Theme Name: TINTUCGOC vaytien.vn Theme
Theme URI: https://vaytien.vn/
Author: dot vn Studio
Description: TINTUCGOC vaytien.vn finance consulting homepage theme. Width normalized to 1250px, default WordPress Posts, stable single/page templates.
Version: 1.0.0
Text Domain: tintucgoc-vaytien-vn-theme
*/

    :root{
      --green:#0b9346;
      --green2:#12aa5b;
      --dark:#071d2c;
      --navy:#102044;
      --text:#102044;
      --muted:#637086;
      --line:#e5edf4;
      --paper:#fbfcff;
      --white:#fff;
      --blue:#0f73e8;
      --orange:#ff9a26;
      --purple:#7c58e8;
      --shadow:0 16px 36px rgba(20,48,98,.08);
      --container:1250px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:var(--paper);
      color:var(--text);
      font-size:14px;
      line-height:1.5;
      font-weight:400;
    }
    a{text-decoration:none;color:inherit}
    img{display:block;max-width:100%}
    input,button{font-family:Inter,sans-serif}
    .container{width:min(var(--container),calc(100% - 52px));margin:0 auto}

    .header{
      position:sticky;
      top:0;
      z-index:50;
      background:#fff;
      border-bottom:1px solid var(--line);
      box-shadow:0 8px 22px rgba(20,48,98,.035);
    }
    .header-inner{
      min-height:82px;
      display:grid;
      grid-template-columns:245px 1fr 125px;
      align-items:center;
      gap:22px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .brand-mark{
      width:48px;
      height:42px;
      position:relative;
      flex:0 0 48px;
    }
    .brand-mark:before,
    .brand-mark:after{
      content:"";
      position:absolute;
      border-radius:999px;
      background:linear-gradient(135deg,#18b868,#0b9346);
      transform:rotate(-42deg);
    }
    .brand-mark:before{
      left:2px;
      top:8px;
      width:18px;
      height:36px;
    }
    .brand-mark:after{
      left:22px;
      top:2px;
      width:18px;
      height:43px;
    }
    .brand strong{
      display:block;
      color:#0f1f3d;
      font-size:26px;
      line-height:1;
      letter-spacing:-.7px;
      font-weight:600;
    }
    .brand strong span{font-weight:400;color:#1c2635}
    .brand small{
      display:block;
      margin-top:6px;
      color:#546075;
      font-size:11px;
      font-weight:500;
    }
    .nav{
      height:82px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:34px;
      white-space:nowrap;
      overflow:auto;
    }
    .nav a{
      height:82px;
      display:flex;
      align-items:center;
      position:relative;
      font-size:13px;
      font-weight:600;
      color:#0e1d37;
    }
    .nav a.active{
      color:var(--green);
    }
    .nav a.active:after{
      content:"";
      position:absolute;
      left:50%;
      bottom:0;
      width:42px;
      height:3px;
      border-radius:5px;
      background:var(--green);
      transform:translateX(-50%);
    }
    .nav a.active:before{
      content:"";
      position:absolute;
      left:50%;
      bottom:-6px;
      width:26px;
      height:10px;
      border-radius:0 0 40px 40px;
      border:2px solid var(--green);
      border-top:0;
      transform:translateX(-50%);
      background:#fff;
    }
    .header-cta{
      height:42px;
      border-radius:7px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      background:linear-gradient(135deg,#0ea451,#07853d);
      color:#fff;
      font-size:12px;
      font-weight:600;
      box-shadow:0 10px 20px rgba(11,147,70,.18);
    }

    .hero{
      min-height:540px;
      background:
        linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.9) 43%,rgba(255,255,255,.18) 70%,rgba(255,255,255,.02)),
        url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1600&q=90");
      background-size:cover;
      background-position:center right;
      position:relative;
      overflow:hidden;
      border-bottom:1px solid var(--line);
    }
    .hero:after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg,rgba(235,249,241,.28),rgba(7,105,59,.22));
      pointer-events:none;
    }
    .hero .container{
      min-height:540px;
      position:relative;
      z-index:3;
      display:flex;
      align-items:center;
    }
    .hero-copy{
      width:52%;
      padding:40px 0;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      height:28px;
      padding:0 12px;
      border-radius:999px;
      background:#eef6f2;
      color:#526178;
      font-size:11px;
      font-weight:600;
      text-transform:uppercase;
      margin-bottom:22px;
    }
    h1{
      margin:0 0 22px;
      color:#0d1c36;
      font-size:45px;
      line-height:1.18;
      letter-spacing:-1.2px;
      font-weight:600;
    }
    h1 span{color:var(--green)}
    .hero-copy p{
      margin:0 0 34px;
      max-width:650px;
      color:#2b3b54;
      font-size:15px;
      line-height:1.75;
    }
    .hero-benefits{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:26px;
      margin-bottom:32px;
      max-width:680px;
    }
    .h-benefit{
      text-align:center;
    }
    .h-benefit i{
      width:44px;
      height:44px;
      border-radius:14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:#eaf8ef;
      color:var(--green);
      font-size:19px;
      margin-bottom:9px;
    }
    .h-benefit strong{
      display:block;
      font-size:12px;
      font-weight:600;
      color:#233452;
    }
    .h-benefit span{
      display:block;
      margin-top:3px;
      color:#6a7485;
      font-size:10px;
    }
    .hero-btn{
      height:50px;
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:0 28px;
      border-radius:8px;
      background:linear-gradient(135deg,#12aa5b,#0b9346);
      color:#fff;
      font-size:14px;
      font-weight:600;
      box-shadow:0 14px 24px rgba(11,147,70,.22);
    }
    .hero-person{
      position:absolute;
      right:52px;
      bottom:0;
      height:520px;
      width:390px;
      object-fit:cover;
      object-position:center top;
      border-radius:170px 170px 0 0;
      z-index:3;
      filter:saturate(1.04);
    }
    .finance-card{
      position:absolute;
      right:345px;
      top:76px;
      z-index:4;
      width:270px;
      border-radius:14px;
      background:rgba(255,255,255,.88);
      border:1px solid rgba(255,255,255,.92);
      box-shadow:0 18px 42px rgba(16,32,68,.14);
      padding:18px;
      backdrop-filter:blur(6px);
    }
    .finance-card .top{
      display:flex;
      justify-content:space-between;
      align-items:center;
      color:#607086;
      font-size:11px;
      margin-bottom:8px;
    }
    .finance-card h3{
      margin:0 0 12px;
      font-size:21px;
      font-weight:600;
      color:#102044;
    }
    .finance-card svg{
      width:100%;
      height:88px;
      margin-bottom:12px;
    }
    .finance-row{
      display:grid;
      grid-template-columns:28px 1fr auto;
      gap:9px;
      align-items:center;
      padding:8px 0;
      border-top:1px solid rgba(230,236,244,.8);
      font-size:10px;
      color:#647086;
    }
    .finance-row i{
      width:24px;
      height:24px;
      border-radius:8px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:#eaf8ef;
      color:var(--green);
    }
    .finance-row:nth-child(2) i{background:#f0edff;color:var(--purple)}
    .finance-row:nth-child(3) i{background:#fff4e8;color:var(--orange)}
    .finance-row strong{display:block;color:#102044;font-size:11px;font-weight:600}
    .finance-row b{font-size:10px;color:var(--green);font-weight:600}

    .section{
      padding:34px 0;
    }
    .section-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:22px;
      gap:18px;
    }
    .section-title{
      margin:0;
      color:#14264a;
      font-size:26px;
      font-weight:600;
      letter-spacing:-.5px;
    }
    .view-more{
      height:38px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:0 16px;
      border-radius:8px;
      background:#fff;
      border:1px solid var(--line);
      color:var(--green);
      font-size:12px;
      font-weight:600;
      box-shadow:0 8px 18px rgba(20,48,98,.035);
    }

    .service-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:24px;
    }
    .service-card{
      min-height:260px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:14px;
      box-shadow:0 10px 24px rgba(20,48,98,.045);
      padding:28px;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      transition:.2s;
    }
    .service-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(20,48,98,.08)}
    .iconbox{
      width:58px;
      height:58px;
      border-radius:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom:24px;
      font-size:24px;
      background:#eaf8ef;
      color:var(--green);
    }
    .service-card:nth-child(2) .iconbox{background:#fff2e7;color:var(--orange)}
    .service-card:nth-child(3) .iconbox{background:#edf5ff;color:var(--blue)}
    .service-card:nth-child(4) .iconbox{background:#f0edff;color:var(--purple)}
    .service-card h3{
      margin:0 0 14px;
      color:#14264a;
      font-size:18px;
      line-height:1.35;
      font-weight:600;
    }
    .service-card p{
      margin:0 0 24px;
      color:#5f6b80;
      font-size:13px;
      line-height:1.75;
    }
    .service-card a{
      margin-top:auto;
      color:var(--green);
      font-size:12px;
      font-weight:600;
    }

    .why-wrap{
      text-align:center;
      padding-top:14px;
    }
    .why-wrap .section-title{
      position:relative;
      display:inline-block;
      padding-bottom:16px;
      margin-bottom:28px;
    }
    .why-wrap .section-title:after{
      content:"";
      position:absolute;
      bottom:0;
      left:50%;
      width:44px;
      height:3px;
      border-radius:6px;
      background:var(--green);
      transform:translateX(-50%);
    }
    .why-grid{
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:16px;
    }
    .why{
      background:#fff;
      border:1px solid var(--line);
      border-radius:10px;
      box-shadow:0 8px 18px rgba(20,48,98,.035);
      min-height:112px;
      padding:20px 14px;
      text-align:center;
    }
    .why i{
      width:42px;
      height:42px;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:#eaf8ef;
      color:var(--green);
      font-size:18px;
      margin-bottom:11px;
    }
    .why:nth-child(2) i{background:#edf5ff;color:var(--blue)}
    .why:nth-child(3) i{background:#edf8ef;color:var(--green)}
    .why:nth-child(4) i{background:#eff6ff;color:var(--green)}
    .why:nth-child(5) i{background:#eefaf1;color:var(--green)}
    .why:nth-child(6) i{background:#ecfbf3;color:var(--green)}
    .why h3{
      margin:0 0 6px;
      font-size:12px;
      font-weight:600;
      color:#1e2f4c;
    }
    .why p{
      margin:0;
      color:#657287;
      font-size:10px;
      line-height:1.45;
    }

    .article-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:24px;
    }
    .article{
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      overflow:hidden;
      box-shadow:0 10px 24px rgba(20,48,98,.04);
      position:relative;
    }
    .article img{
      width:100%;
      height:150px;
      object-fit:cover;
    }
    .article .tag{
      display:inline-flex;
      height:22px;
      align-items:center;
      padding:0 9px;
      border-radius:6px;
      background:#eaf8ef;
      color:var(--green);
      font-size:10px;
      font-weight:600;
      margin-bottom:10px;
    }
    .article-body{
      padding:15px 16px 18px;
    }
    .article h3{
      margin:0 0 12px;
      color:#14264a;
      font-size:13px;
      line-height:1.45;
      font-weight:600;
    }
    .article .date{
      color:#7a8494;
      font-size:11px;
    }

    .app-grid{
      display:grid;
      grid-template-columns:repeat(8,1fr);
      gap:18px;
    }
    .app-card{
      min-height:140px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      box-shadow:0 10px 24px rgba(20,48,98,.04);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:10px;
      text-align:center;
      padding:18px 10px;
    }
    .app-logo{
      width:58px;
      height:58px;
      border-radius:15px;
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:17px;
      font-weight:600;
      box-shadow:inset 0 0 0 1px var(--line);
    }
    .app-card:nth-child(1) .app-logo{color:#ed1c24}
    .app-card:nth-child(2) .app-logo{color:#e3282e}
    .app-card:nth-child(3) .app-logo{color:#138446}
    .app-card:nth-child(4) .app-logo{color:#e51f2f}
    .app-card:nth-child(5) .app-logo{color:#cf168c}
    .app-card:nth-child(6) .app-logo{color:#0a8f4a}
    .app-card:nth-child(7) .app-logo{color:#119a78}
    .app-card:nth-child(8) .app-logo{color:#1d4ca0}
    .app-card h3{
      margin:0;
      font-size:12px;
      font-weight:600;
      color:#132642;
    }
    .star{
      color:#ffb323;
      font-size:12px;
      font-weight:600;
    }

    .expert-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:24px;
    }
    .expert-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      box-shadow:0 10px 24px rgba(20,48,98,.04);
      min-height:142px;
      display:grid;
      grid-template-columns:110px 1fr;
      gap:14px;
      padding:16px;
      align-items:end;
    }
    .expert-card img{
      width:96px;
      height:110px;
      object-fit:cover;
      border-radius:10px;
      object-position:center top;
    }
    .expert-card h3{
      margin:0 0 5px;
      font-size:13px;
      font-weight:600;
    }
    .expert-card p{
      margin:0 0 7px;
      color:#657287;
      font-size:11px;
      line-height:1.45;
    }
    .expert-card small{
      display:block;
      color:#657287;
      font-size:11px;
      margin-bottom:13px;
    }
    .linkedin{
      width:24px;
      height:24px;
      border-radius:50%;
      background:#0b7fa9;
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
    }

    .newsletter{
      background:linear-gradient(90deg,#005331,#0b7b43);
      color:#fff;
      min-height:120px;
      display:flex;
      align-items:center;
      margin-top:36px;
    }
    .newsletter-inner{
      display:grid;
      grid-template-columns:1fr 460px;
      gap:50px;
      align-items:center;
    }
    .newsletter-left{
      display:grid;
      grid-template-columns:70px 1fr;
      align-items:center;
      gap:18px;
    }
    .mail-icon{
      width:66px;
      height:66px;
      border-radius:14px;
      background:rgba(255,255,255,.14);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#b6f1ce;
      font-size:34px;
    }
    .newsletter h2{
      margin:0 0 5px;
      font-size:24px;
      font-weight:600;
    }
    .newsletter p{
      margin:0;
      color:#d6f6e2;
      font-size:13px;
    }
    .news-form{
      height:46px;
      display:grid;
      grid-template-columns:1fr 110px;
      background:#fff;
      border-radius:7px;
      overflow:hidden;
    }
    .news-form input{
      border:0;
      outline:0;
      padding:0 16px;
      color:#657287;
      font-size:13px;
    }
    .news-form button{
      border:0;
      background:var(--green);
      color:#fff;
      font-size:13px;
      font-weight:600;
    }

    footer{
      background:linear-gradient(180deg,#061f2e,#03131f);
      color:#dce8ff;
      padding:50px 0 22px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.7fr 1fr 1fr 1.15fr 1.2fr;
      gap:50px;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:16px;
    }
    .footer-brand .brand-mark{width:40px;height:36px;flex-basis:40px}
    .footer-brand strong{
      display:block;
      color:#fff;
      font-size:22px;
      line-height:1;
      font-weight:600;
    }
    .footer-brand strong span{font-weight:400}
    .footer-brand small{
      display:block;
      margin-top:6px;
      color:#cfdaea;
      font-size:10px;
    }
    .footer-about{
      margin:0 0 20px;
      color:#d6e2f4;
      font-size:12px;
      line-height:1.75;
      max-width:300px;
    }
    .social{
      display:flex;
      gap:12px;
    }
    .social a{
      width:32px;
      height:32px;
      border-radius:50%;
      background:rgba(255,255,255,.12);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:13px;
    }
    footer h4{
      margin:0 0 15px;
      color:#fff;
      font-size:13px;
      font-weight:600;
    }
    footer ul{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      flex-direction:column;
      gap:9px;
      color:#dce8ff;
      font-size:12px;
    }
    footer li i{width:18px}
    .app-btn{
      width:135px;
      height:42px;
      border-radius:6px;
      background:#050a14;
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      font-size:11px;
      font-weight:600;
      margin-bottom:10px;
      border:1px solid rgba(255,255,255,.2);
    }
    .copyright{
      margin-top:44px;
      text-align:center;
      color:#c8d6ea;
      font-size:11px;
    }
    .back-top{
      position:fixed;
      right:24px;
      bottom:24px;
      width:40px;
      height:40px;
      border-radius:50%;
      background:#fff;
      color:var(--green);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 12px 24px rgba(8,30,48,.22);
      z-index:30;
    }

    @media(max-width:1120px){
      .header-inner{grid-template-columns:1fr;gap:14px;padding:16px 0}
      .nav{height:auto;justify-content:flex-start;padding-bottom:6px}
      .nav a{height:42px}
      .hero-copy{width:65%}
      .hero-person,.finance-card,.hero-chart{opacity:.42}
      .service-grid,.article-grid,.expert-grid{grid-template-columns:repeat(2,1fr)}
      .why-grid,.app-grid{grid-template-columns:repeat(3,1fr)}
      .newsletter-inner,.footer-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:760px){
      .container{width:calc(100% - 28px)}
      .hero,.hero .container{min-height:auto}
      .hero-copy{width:100%;padding:55px 0}
      .hero h1{font-size:34px}
      .hero-person,.finance-card,.hero-chart{display:none}
      .hero-benefits,.service-grid,.why-grid,.article-grid,.app-grid,.expert-grid,.newsletter-inner,.footer-grid{grid-template-columns:1fr}
      .newsletter{padding:26px 0}
      .article img{height:190px}
    }
  
/* WordPress normalization */
body,button,input,select,textarea{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-weight:400}.container{width:min(var(--container),calc(100% - 52px));margin:0 auto}.nav{overflow:visible!important;white-space:normal!important;flex-wrap:wrap}.nav ul,.nav li{list-style:none;margin:0;padding:0;display:contents}.nav a,.nav li a{white-space:nowrap}.tgc-custom-logo-img{display:block;object-fit:contain}.hero h1{font-size:24px!important;line-height:1.28!important;font-weight:600!important;letter-spacing:-.25px!important}.section-title{font-size:22px!important;line-height:1.25!important;font-weight:600!important}.hero-copy p,.article p,.service-card p{font-size:15px}.article h3,.expert-card h3,.service-card h3{font-weight:600!important}.entry-title a,.article h3 a,.service-card a{color:inherit}.article h3 a:hover,.service-card a:hover{color:var(--green)}
@media(max-width:760px){.hero h1{font-size:24px!important}.section-title{font-size:22px!important}}