/*
Theme Name: TINTUCGOC Giáo Dục Việt Nam Theme
Theme URI: https://tintucgoc.local/
Author: dot vn Studio
Description: TINTUCGOC Giáo Dục Việt Nam content rich portal theme. Width normalized to 1250px, stable single/page templates, default WordPress Posts.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: tintucgoc-giaoduc-vietnam-theme
*/

    :root{
      --blue:#083bbb;
      --blue-2:#004bd6;
      --blue-dark:#062a84;
      --navy:#062a63;
      --navy-2:#07366e;
      --purple:#7946ff;
      --pink:#ec4b9a;
      --orange:#f59a23;
      --green:#16b486;
      --cyan:#15a5e5;
      --text:#162033;
      --muted:#6f7684;
      --line:#e5eaf4;
      --paper:#f7faff;
      --white:#fff;
      --shadow:0 12px 28px rgba(10,39,100,.08);
      --radius:8px;
      --container:1250px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      font-size:14px;
      line-height:1.5;
      color:var(--text);
      background:var(--paper);
      font-weight:400;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    .container{width:min(var(--container),calc(100% - 56px));margin:0 auto}

    .topbar{
      height:34px;
      border-bottom:1px solid var(--line);
      background:#fff;
      color:#24334d;
      font-size:12px;
    }
    .topbar .inner{
      height:34px;
      display:flex;
      justify-content:space-between;
      align-items:center;
    }
    .portal-label{font-weight:500;color:#344268}
    .top-links{display:flex;align-items:center;gap:22px}
    .top-links .icons{display:flex;gap:14px;color:#061f56}
    .sun{color:#ff9d25}
    .moon{color:#112e7c}

    .header{
      background:#fff;
      border-bottom:1px solid var(--line);
    }
    .header-main{
      min-height:88px;
      display:grid;
      grid-template-columns:275px 1fr 345px;
      gap:28px;
      align-items:center;
    }
    .logo{
      display:flex;
      align-items:center;
      gap:13px;
      color:var(--blue);
    }
    .logo-mark{
      width:54px;
      height:54px;
      position:relative;
      display:grid;
      place-items:center;
    }
    .logo-mark:before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,#0758e8,#062d9f);
      clip-path:polygon(50% 0,96% 22%,96% 72%,50% 100%,4% 72%,4% 22%);
      border-radius:7px;
    }
    .logo-mark i{
      position:relative;
      z-index:2;
      color:#fff;
      font-size:24px;
    }
    .logo-text strong{
      display:block;
      font-size:30px;
      line-height:1.05;
      letter-spacing:-.8px;
      text-transform:uppercase;
      font-weight:600;
      color:var(--blue);
    }
    .logo-text small{
      display:block;
      margin-top:4px;
      color:#15418a;
      font-size:11px;
      font-weight:600;
    }
    .search{
      height:46px;
      border:1px solid #cbd5ea;
      border-radius:28px;
      overflow:hidden;
      display:flex;
      background:#fff;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
    }
    .search input{
      flex:1;
      border:0;
      outline:0;
      padding:0 22px;
      font-family:Inter,sans-serif;
      color:#606b7d;
      background:transparent;
    }
    .search button{
      width:58px;
      border:0;
      background:var(--blue);
      color:#fff;
      font-size:16px;
      cursor:pointer;
    }
    .quick-actions{
      display:flex;
      justify-content:flex-end;
      gap:28px;
      color:#0b3582;
    }
    .quick-actions a{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:6px;
      font-size:12px;
      font-weight:600;
      min-width:55px;
    }
    .quick-actions i{font-size:22px}

    .nav{
      background:var(--blue);
      color:#fff;
      box-shadow:0 8px 18px rgba(8,59,187,.16);
    }
    .nav .inner{
      height:42px;
      display:flex;
      align-items:center;
      gap:34px;
      overflow:auto;
      white-space:nowrap;
    }
    .nav a{
      height:42px;
      display:flex;
      align-items:center;
      font-size:13px;
      font-weight:600;
      opacity:.96;
    }
    .nav .hamb{
      width:54px;
      justify-content:center;
      background:#062f96;
      margin-left:-1px;
      font-size:18px;
    }
    .nav .more-dots{margin-left:auto}

    main{padding:16px 0 0}
    .top-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) 300px;
      gap:18px;
      align-items:start;
    }
    .hero-block{
      display:grid;
      grid-template-columns:1.58fr .82fr;
      gap:12px;
    }
    .hero{
      min-height:370px;
      position:relative;
      overflow:hidden;
      border-radius:8px;
      background:#111;
      box-shadow:var(--shadow);
    }
    .hero img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .hero:after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.35) 58%,rgba(0,0,0,.08));
    }
    .hero-copy{
      position:absolute;
      z-index:2;
      left:28px;
      right:28px;
      bottom:28px;
      color:#fff;
    }
    .pill{
      display:inline-flex;
      padding:6px 10px;
      border-radius:4px;
      color:#fff;
      background:var(--purple);
      text-transform:uppercase;
      font-size:10px;
      font-weight:600;
      margin-bottom:16px;
    }
    .hero h1{
      margin:0 0 15px;
      max-width:560px;
      font-size:30px;
      line-height:1.18;
      letter-spacing:-.7px;
      font-weight:600;
    }
    .hero p{
      margin:0 0 22px;
      max-width:610px;
      color:rgba(255,255,255,.86);
      font-size:13px;
      line-height:1.65;
    }
    .hero-meta{
      display:flex;
      align-items:center;
      gap:20px;
      color:rgba(255,255,255,.84);
      font-size:12px;
    }
    .hero-meta img{
      position:static;
      width:28px;
      height:28px;
      object-fit:cover;
      border-radius:50%;
    }
    .hero-btn{
      position:absolute;
      z-index:3;
      right:22px;
      bottom:22px;
      display:flex;
      align-items:center;
      gap:14px;
      padding:10px 16px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.7);
      color:#fff;
      font-size:12px;
      font-weight:600;
    }
    .hero-dots{
      position:absolute;
      z-index:3;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      display:flex;
      gap:7px;
    }
    .hero-dots span{
      width:22px;
      height:3px;
      border-radius:99px;
      background:#fff;
      opacity:.9;
    }
    .hero-dots span:not(:first-child){opacity:.38}

    .side-hero-list{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .side-hero{
      position:relative;
      min-height:115px;
      border-radius:8px;
      overflow:hidden;
      background:#111;
      box-shadow:var(--shadow);
    }
    .side-hero img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .side-hero:after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.28));
    }
    .side-copy{
      position:absolute;
      left:18px;
      right:15px;
      bottom:15px;
      z-index:2;
      color:#fff;
    }
    .tag{
      display:inline-flex;
      padding:4px 8px;
      border-radius:4px;
      color:#fff;
      font-size:10px;
      text-transform:uppercase;
      font-weight:600;
      margin-bottom:8px;
    }
    .tag.blue{background:#0f78d6}
    .tag.purple{background:#7252e8}
    .tag.pink{background:#e8489a}
    .tag.green{background:#16a26e}
    .tag.orange{background:#ee862e}
    .side-hero h3{
      margin:0 0 6px;
      max-width:270px;
      font-size:14px;
      line-height:1.35;
      font-weight:600;
    }
    .mini-meta{
      color:rgba(255,255,255,.82);
      font-size:11px;
    }

    .right-col{display:flex;flex-direction:column;gap:16px}
    .side-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:9px;
      padding:18px;
      box-shadow:0 8px 24px rgba(10,39,100,.045);
    }
    .side-title{
      margin:0 0 14px;
      color:#0b2d75;
      font-size:17px;
      line-height:1;
      font-weight:600;
      text-transform:uppercase;
    }
    .rank-ad{
      min-height:176px;
      border-radius:7px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:#fff;
      background:linear-gradient(135deg,#0652d8,#003493);
      padding:24px;
    }
    .rank-ad h3{
      margin:0 0 10px;
      font-size:21px;
      line-height:1.25;
      font-weight:600;
      text-transform:uppercase;
    }
    .rank-ad p{
      margin:0 0 15px;
      color:rgba(255,255,255,.9);
      font-size:14px;
    }
    .rank-ad a{
      display:inline-flex;
      padding:9px 16px;
      border-radius:5px;
      background:#fff;
      color:#0b3ca6;
      font-size:12px;
      font-weight:600;
    }
    .edu-ad{
      position:relative;
      min-height:205px;
      overflow:hidden;
      border-radius:8px;
      background:
        linear-gradient(110deg,rgba(116,61,232,.96),rgba(96,56,213,.68)),
        url("https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=540&q=85");
      background-size:cover;
      color:#fff;
      padding:24px;
    }
    .edu-ad h3{
      margin:0 0 14px;
      max-width:205px;
      font-size:20px;
      line-height:1.3;
      font-weight:600;
    }
    .edu-ad ul{
      margin:0 0 18px;
      padding:0;
      list-style:none;
      color:rgba(255,255,255,.9);
      font-size:12px;
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .edu-ad li i{margin-right:7px}
    .edu-ad a{
      display:inline-flex;
      padding:9px 14px;
      border-radius:5px;
      background:#fff;
      color:#5635c9;
      font-size:12px;
      font-weight:600;
    }

    .category-section{margin-top:16px}
    .section-title{
      margin:0 0 13px;
      display:flex;
      align-items:center;
      gap:9px;
      color:#17336d;
      font-size:16px;
      font-weight:600;
      text-transform:uppercase;
    }
    .section-title:before{
      content:"";
      width:5px;
      height:20px;
      border-radius:6px;
      background:#7a9eff;
      display:block;
    }
    .category-grid{
      display:grid;
      grid-template-columns:repeat(8,1fr);
      gap:10px;
    }
    .cat-box{
      min-height:88px;
      border:1px solid var(--line);
      border-radius:9px;
      background:#fff;
      box-shadow:0 8px 21px rgba(10,39,100,.04);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:10px;
      color:#0d3290;
      text-align:center;
      font-size:12px;
      font-weight:600;
    }
    .cat-box i{
      width:38px;
      height:38px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#0a52e8;
      background:#f2f6ff;
      font-size:21px;
    }

    .content-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) 300px;
      gap:18px;
      margin-top:22px;
      align-items:start;
    }
    .section-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:14px;
      gap:20px;
    }
    .section-head .section-title{margin:0}
    .view-more{
      color:#0b45b2;
      font-size:12px;
      font-weight:500;
    }
    .view-more i{margin-left:10px}
    .featured-posts{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .post-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:8px;
      overflow:hidden;
      box-shadow:0 8px 22px rgba(10,39,100,.04);
    }
    .post-img{
      height:140px;
      position:relative;
      overflow:hidden;
      background:#ddd;
    }
    .post-img img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .post-img .tag{
      position:absolute;
      left:10px;
      bottom:10px;
      margin:0;
      border-radius:4px;
    }
    .post-body{padding:13px}
    .post-body h3{
      margin:0 0 10px;
      font-size:15px;
      line-height:1.38;
      font-weight:600;
    }
    .post-author{
      display:flex;
      align-items:center;
      gap:8px;
      color:#596274;
      font-size:11px;
    }
    .post-author img{
      width:22px;
      height:22px;
      object-fit:cover;
      border-radius:50%;
    }

    .topic-cols{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
    }
    .topic-col{
      background:#fff;
      border:1px solid var(--line);
      border-radius:8px;
      padding:13px;
      box-shadow:0 8px 22px rgba(10,39,100,.04);
    }
    .topic-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      color:#0b45b2;
      font-size:12px;
      font-weight:600;
      text-transform:uppercase;
      margin-bottom:10px;
    }
    .topic-main{
      display:grid;
      grid-template-columns:78px 1fr;
      gap:10px;
      margin-bottom:10px;
      align-items:center;
    }
    .topic-main img{
      width:78px;
      height:60px;
      object-fit:cover;
      border-radius:5px;
    }
    .topic-main h3{
      margin:0;
      font-size:12px;
      line-height:1.35;
      font-weight:600;
    }
    .topic-col ul{
      margin:0;
      padding:0;
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .topic-col li{
      display:grid;
      grid-template-columns:42px 1fr;
      gap:8px;
      align-items:center;
      color:#3c4659;
      font-size:11px;
      line-height:1.35;
    }
    .topic-col li img{
      width:42px;
      height:32px;
      object-fit:cover;
      border-radius:4px;
    }

    .author-video-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }
    .authors{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:13px;
    }
    .author-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:8px;
      padding:14px 10px;
      text-align:center;
      box-shadow:0 8px 22px rgba(10,39,100,.035);
    }
    .author-card img{
      width:58px;
      height:58px;
      object-fit:cover;
      border-radius:50%;
      margin:0 auto 10px;
    }
    .author-card h4{
      margin:0 0 3px;
      font-size:12px;
      font-weight:600;
    }
    .author-card p{
      margin:0 0 6px;
      color:#707b8a;
      font-size:10px;
    }
    .author-card b{
      color:#0b45b2;
      font-size:11px;
      font-weight:600;
    }
    .video-row{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:13px;
    }
    .video-card .thumb{
      height:104px;
      position:relative;
      overflow:hidden;
      border-radius:6px;
      background:#111;
    }
    .video-card img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter:brightness(.86);
    }
    .play{
      position:absolute;
      inset:0;
      margin:auto;
      width:38px;
      height:38px;
      border-radius:50%;
      background:rgba(255,255,255,.84);
      color:#062a84;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:13px;
    }
    .duration{
      position:absolute;
      right:7px;
      bottom:7px;
      background:rgba(0,0,0,.7);
      color:#fff;
      padding:3px 6px;
      border-radius:3px;
      font-size:10px;
    }
    .video-card h3{
      margin:8px 0 0;
      font-size:12px;
      line-height:1.35;
      font-weight:600;
    }

    .side-list{
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    .side-rank{
      display:grid;
      grid-template-columns:24px 1fr;
      gap:10px;
      align-items:start;
      font-size:12px;
    }
    .side-rank b{
      width:22px;
      height:22px;
      border-radius:50%;
      background:var(--blue);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:11px;
      font-weight:600;
    }
    .side-rank h4{
      margin:0 0 4px;
      font-size:12px;
      line-height:1.4;
      font-weight:600;
    }
    .newsletter p{
      margin:0 0 14px;
      color:#677182;
      font-size:13px;
    }
    .newsletter input{
      width:100%;
      height:40px;
      border:1px solid var(--line);
      border-radius:6px;
      padding:0 12px;
      font-family:Inter,sans-serif;
      margin-bottom:10px;
      background:#fff;
    }
    .newsletter button{
      width:100%;
      height:40px;
      border:0;
      border-radius:6px;
      color:#fff;
      background:var(--blue);
      font-family:Inter,sans-serif;
      font-size:12px;
      font-weight:600;
    }
    .newsletter small{
      display:block;
      margin-top:12px;
      color:#8a92a0;
      font-size:11px;
    }

    .cta-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
      margin:22px 0;
    }
    .cta{
      min-height:118px;
      border-radius:9px;
      overflow:hidden;
      padding:24px;
      color:#fff;
      box-shadow:var(--shadow);
      position:relative;
      background:
        linear-gradient(90deg,rgba(0,98,215,.95),rgba(10,136,236,.82)),
        url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=700&q=85");
      background-size:cover;
    }
    .cta.purple{
      background:
        linear-gradient(90deg,rgba(89,41,214,.96),rgba(98,46,217,.7)),
        url("https://images.unsplash.com/photo-1551817958-d9d86fb29431?auto=format&fit=crop&w=700&q=85");
      background-size:cover;
    }
    .cta h3{
      margin:0 0 8px;
      font-size:22px;
      line-height:1.2;
      font-weight:600;
    }
    .cta p{
      margin:0 0 15px;
      max-width:480px;
      color:rgba(255,255,255,.88);
      font-size:13px;
    }
    .cta a{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-radius:5px;
      background:rgba(255,255,255,.18);
      border:1px solid rgba(255,255,255,.3);
      font-size:12px;
      font-weight:600;
    }

    footer{
      background:linear-gradient(90deg,#052f61,#073e76);
      color:#fff;
      padding:34px 0 20px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.6fr repeat(4,1fr);
      gap:40px;
      align-items:start;
    }
    .footer-logo{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:12px;
    }
    .footer-logo .mark{
      width:44px;
      height:44px;
      border-radius:8px;
      background:#fff;
      color:#0750cf;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:22px;
    }
    .footer-logo strong{
      display:block;
      font-size:25px;
      font-weight:600;
      line-height:1.05;
    }
    .footer-logo small{
      display:block;
      font-size:11px;
      color:rgba(255,255,255,.75);
    }
    .footer-about{
      max-width:310px;
      color:rgba(255,255,255,.72);
      font-size:13px;
      line-height:1.65;
      margin:0 0 18px;
    }
    .footer-social{
      display:flex;
      gap:13px;
    }
    .footer-social a{
      width:25px;
      height:25px;
      border-radius:50%;
      background:rgba(255,255,255,.12);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
    }
    footer h4{
      margin:0 0 14px;
      font-size:13px;
      font-weight:600;
      text-transform:uppercase;
    }
    footer ul{
      list-style:none;
      padding:0;
      margin:0;
      display:flex;
      flex-direction:column;
      gap:8px;
      color:rgba(255,255,255,.72);
      font-size:12px;
    }
    .copyright{
      border-top:1px solid rgba(255,255,255,.1);
      margin-top:26px;
      padding-top:14px;
      text-align:center;
      color:rgba(255,255,255,.62);
      font-size:12px;
    }

    @media(max-width:1120px){
      .header-main{grid-template-columns:1fr;gap:16px;padding:18px 0}
      .quick-actions{justify-content:flex-start;flex-wrap:wrap}
      .top-layout,.content-layout,.hero-block,.category-section,.featured-posts,.topic-cols,.author-video-row{grid-template-columns:1fr}
      .category-grid{grid-template-columns:repeat(4,1fr)}
      .featured-posts{display:grid;grid-template-columns:repeat(2,1fr)}
      .topic-cols{display:grid;grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:760px){
      .container{width:calc(100% - 28px)}
      .topbar{height:auto}
      .topbar .inner{height:auto;align-items:flex-start;flex-direction:column;padding:10px 0}
      .nav .inner{gap:22px}
      .hero{min-height:420px}
      .hero h1{font-size:24px}
      .hero-btn{position:relative;right:auto;bottom:auto;margin-top:12px;display:inline-flex}
      .side-hero{min-height:140px}
      .category-grid,.featured-posts,.topic-cols,.authors,.video-row,.cta-row{grid-template-columns:1fr}
      .post-img{height:190px}
      .topic-main,.topic-col li{grid-template-columns:1fr}
      .topic-main img,.topic-col li img{width:100%;height:140px}
      .footer-grid{grid-template-columns:1fr}
    }
  

/* TINTUCGOC normalization */
:root{--container:1250px;--tintucgoc-primary:var(--blue);--tintucgoc-secondary:var(--orange)}
body,button,input,select,textarea{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
b,strong,h1,h2,h3,h4,h5,h6{font-weight:600!important}.header{position:sticky;top:0;z-index:50}.nav .inner{overflow:visible;white-space:normal;flex-wrap:wrap;height:auto;min-height:42px}.nav a{flex:0 0 auto}.hero h1,.big-body h2,.cta h3{font-size:clamp(22px,2vw,24px)!important;line-height:1.28!important}.hero p,.big-body p,.cta p{font-size:15px}.post-body h3,.side-hero h3,.topic-main h3,.topic-main h4,.topic-col li,.video-card h3,.side-rank h4{font-weight:600}.footer-logo .mark img,.logo-mark img{max-width:100%;height:auto}.tgc-custom-logo-img{display:block}.post-card h3 a,.side-hero h3 a,.hero h1 a,.topic-main h3 a,.topic-main h4 a,.video-card h3 a,.side-rank h4 a{color:inherit;text-decoration:none}.post-card h3 a:hover,.side-hero h3 a:hover,.hero h1 a:hover,.topic-main h3 a:hover,.topic-main h4 a:hover,.video-card h3 a:hover,.side-rank h4 a:hover{color:var(--blue-2)}
@media(max-width:1120px){.nav .inner{overflow:visible}.hero-block{grid-template-columns:1fr}.featured-posts{grid-template-columns:repeat(2,1fr)}.topic-cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.nav .inner{gap:14px}.featured-posts,.topic-cols,.author-video-row,.video-row,.cta-row{grid-template-columns:1fr}}