/*
Theme Name: Khóa Học Giá Hời
Theme URI: https://khoahocgiahoi.com
Author: Custom Build
Description: Theme WordPress bán khóa học online, tích hợp WooCommerce, mega menu danh mục, trang chủ dạng landing page với các block danh mục, khóa học mới nhất, banner ưu đãi. Mô phỏng theo giao diện khoahocgiahoi.com.
Version: 1.0.0
Requires PHP: 7.4
Requires at least: 5.9
Text Domain: khgh
Tags: e-commerce, woocommerce, education
*/

/* =============================
   0. RESET & BASE
============================= */
:root{
  --khgh-primary:#ff6b35;
  --khgh-primary-dark:#e2551f;
  --khgh-dark:#1a1a2e;
  --khgh-navy:#16213e;
  --khgh-text:#2d2d3a;
  --khgh-muted:#6b7280;
  --khgh-bg:#f6f7fb;
  --khgh-border:#eaeaf0;
  --khgh-success:#27ae60;
  --khgh-radius:12px;
  --khgh-shadow:0 4px 18px rgba(20,20,40,.07);
  --khgh-shadow-hover:0 10px 28px rgba(20,20,40,.14);
  --khgh-maxw:1240px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--khgh-text);
  background:var(--khgh-bg);
  line-height:1.55;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0 0 .5em;line-height:1.25;font-weight:700;}
p{margin:0 0 1em;}
.khgh-container{max-width:var(--khgh-maxw);margin:0 auto;padding:0 20px;}
.khgh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--khgh-primary);color:#fff;border:none;
  padding:12px 26px;border-radius:999px;font-weight:700;font-size:15px;
  cursor:pointer;transition:.2s;box-shadow:0 6px 16px rgba(255,107,53,.35);
}
.khgh-btn:hover{background:var(--khgh-primary-dark);transform:translateY(-2px);}
.khgh-btn.outline{background:transparent;color:var(--khgh-primary);border:2px solid var(--khgh-primary);box-shadow:none;}
.khgh-btn.outline:hover{background:var(--khgh-primary);color:#fff;}
.khgh-btn.small{padding:8px 18px;font-size:13px;}
.screen-reader-text{position:absolute!important;left:-9999px;}

/* =============================
   1. TOPBAR
============================= */
.khgh-topbar{background:var(--khgh-dark);color:#cfd2e6;font-size:13px;}
.khgh-topbar .khgh-container{display:flex;align-items:center;justify-content:space-between;height:38px;}
.khgh-topbar-links{display:flex;gap:22px;}
.khgh-topbar-links a{opacity:.9;transition:.15s;}
.khgh-topbar-links a:hover{opacity:1;color:var(--khgh-primary);}
.khgh-topbar-right{display:flex;gap:18px;align-items:center;}

/* =============================
   2. HEADER
============================= */
.khgh-header{background:#fff;position:sticky;top:0;z-index:999;box-shadow:0 2px 10px rgba(0,0,0,.05);}
.khgh-header-inner{display:flex;align-items:center;gap:28px;padding:14px 0;}
.khgh-logo img{height:46px;width:auto;}
.khgh-logo{flex-shrink:0;}
.khgh-search{flex:1;max-width:520px;position:relative;}
.khgh-search input{
  width:100%;padding:11px 46px 11px 18px;border-radius:999px;border:1.5px solid var(--khgh-border);
  background:var(--khgh-bg);font-size:14px;outline:none;transition:.2s;
}
.khgh-search input:focus{border-color:var(--khgh-primary);background:#fff;}
.khgh-search button{
  position:absolute;right:4px;top:4px;bottom:4px;width:38px;border:none;border-radius:50%;
  background:var(--khgh-primary);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.khgh-header-actions{display:flex;align-items:center;gap:22px;margin-left:auto;flex-shrink:0;}
.khgh-header-action{display:flex;align-items:center;gap:8px;position:relative;font-size:14px;font-weight:600;}
.khgh-header-action svg{width:24px;height:24px;flex-shrink:0;stroke:var(--khgh-text);}
.khgh-header-action:hover svg,.khgh-header-action:hover{color:var(--khgh-primary);}
.khgh-header-action:hover svg{stroke:var(--khgh-primary);}
.khgh-cart-count{
  position:absolute;top:-8px;right:-10px;background:var(--khgh-primary);color:#fff;
  font-size:11px;font-weight:700;border-radius:50%;width:19px;height:19px;
  display:flex;align-items:center;justify-content:center;
}
.khgh-mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.khgh-mobile-toggle span{display:block;width:26px;height:3px;background:var(--khgh-text);margin:5px 0;border-radius:2px;}

/* =============================
   3. MAIN NAV + MEGA MENU
============================= */
.khgh-nav{background:var(--khgh-navy);}
.khgh-nav-inner{display:flex;align-items:stretch;}
.khgh-nav-all{
  display:flex;align-items:center;gap:10px;background:var(--khgh-primary);color:#fff;
  padding:0 22px;font-weight:700;font-size:14px;white-space:nowrap;cursor:pointer;position:relative;
}
.khgh-nav-menu{display:flex;flex-wrap:wrap;}
.khgh-nav-menu>li{position:relative;}
.khgh-nav-menu>li>a{
  display:block;padding:14px 16px;color:#e7e9f6;font-size:14px;font-weight:600;
  transition:.15s;white-space:nowrap;
}
.khgh-nav-menu>li>a:hover,.khgh-nav-menu>li.khgh-open>a{background:rgba(255,255,255,.08);color:var(--khgh-primary);}

.khgh-mega{
  position:absolute;left:0;top:100%;background:#fff;min-width:960px;max-width:1100px;
  box-shadow:0 20px 40px rgba(0,0,0,.18);border-radius:0 0 14px 14px;
  display:none;padding:26px;z-index:50;
}
.khgh-nav-menu>li.khgh-open .khgh-mega,.khgh-nav-all.khgh-open+.khgh-mega-all{display:block;}
.khgh-mega-cols{display:flex;flex-wrap:wrap;gap:0;}
.khgh-mega-col{width:20%;padding:0 14px;margin-bottom:16px;}
.khgh-mega-col h4{font-size:14px;color:var(--khgh-primary);margin-bottom:10px;border-bottom:2px solid var(--khgh-border);padding-bottom:8px;}
.khgh-mega-col ul li a{display:block;padding:5px 0;font-size:13.5px;color:var(--khgh-text);}
.khgh-mega-col ul li a:hover{color:var(--khgh-primary);padding-left:4px;}

.khgh-mega-all{
  position:absolute;left:0;top:100%;background:#fff;width:100%;box-shadow:0 20px 40px rgba(0,0,0,.18);
  display:none;padding:30px 0;z-index:60;
}
.khgh-mega-all-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.khgh-mega-all-card{
  border-radius:var(--khgh-radius);overflow:hidden;position:relative;box-shadow:var(--khgh-shadow);transition:.2s;
}
.khgh-mega-all-card:hover{transform:translateY(-4px);box-shadow:var(--khgh-shadow-hover);}
.khgh-mega-all-card img{height:110px;object-fit:cover;width:100%;}
.khgh-mega-all-card span{
  display:block;text-align:center;padding:10px 6px;font-weight:700;font-size:13.5px;background:#fff;
}

/* Mobile nav drawer */
.khgh-mobile-nav{display:none;}

/* =============================
   4. HERO
============================= */
.khgh-hero{padding:34px 0 10px;}
.khgh-hero-banner{
  border-radius:20px;overflow:hidden;position:relative;box-shadow:var(--khgh-shadow);
}
.khgh-hero-banner img{width:100%;object-fit:cover;}
.khgh-hero-banner .khgh-hero-cta{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
}

/* =============================
   5. SECTION HEADINGS
============================= */
.khgh-section{padding:44px 0;}
.khgh-section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;gap:20px;}
.khgh-section-head .khgh-eyebrow{color:var(--khgh-primary);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;display:block;}
.khgh-section-head h2{font-size:26px;margin:0;}
.khgh-section-head p{color:var(--khgh-muted);margin:6px 0 0;font-size:14.5px;max-width:640px;}
.khgh-section-head .khgh-see-more{white-space:nowrap;font-weight:700;color:var(--khgh-primary);font-size:14px;display:flex;align-items:center;gap:4px;}
.khgh-section-head .khgh-see-more:hover{text-decoration:underline;}
.khgh-section.alt{background:#fff;}

/* =============================
   6. CATEGORY GRID (homepage)
============================= */
.khgh-cat-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;
}
.khgh-cat-card{
  background:#fff;border-radius:var(--khgh-radius);overflow:hidden;box-shadow:var(--khgh-shadow);
  transition:.2s;text-align:center;
}
.khgh-cat-card:hover{transform:translateY(-4px);box-shadow:var(--khgh-shadow-hover);}
.khgh-cat-card img{height:120px;width:100%;object-fit:cover;}
.khgh-cat-card .khgh-cat-name{padding:12px 8px;font-weight:700;font-size:14px;}
.khgh-cat-card .khgh-cat-count{font-size:12px;color:var(--khgh-muted);padding-bottom:10px;display:block;}

/* =============================
   7. PRODUCT GRID / CARD
============================= */
.khgh-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;}
.khgh-product-grid.cols-6{grid-template-columns:repeat(6,1fr);}
ul.products{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px!important;list-style:none;margin:0!important;padding:0!important;}
ul.products li.product{margin:0!important;}

.khgh-product-card, ul.products li.product{
  background:#fff;border-radius:var(--khgh-radius);overflow:hidden;box-shadow:var(--khgh-shadow);
  transition:.2s;position:relative;display:flex;flex-direction:column;
}
.khgh-product-card:hover, ul.products li.product:hover{transform:translateY(-5px);box-shadow:var(--khgh-shadow-hover);}
.khgh-product-thumb{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;}
.khgh-product-thumb img{width:100%;height:100%;object-fit:cover;transition:.3s;}
.khgh-product-card:hover .khgh-product-thumb img{transform:scale(1.06);}
.khgh-badge-sale{
  position:absolute;top:10px;left:10px;background:var(--khgh-primary);color:#fff;font-size:11.5px;font-weight:800;
  padding:4px 10px;border-radius:999px;box-shadow:0 4px 10px rgba(255,107,53,.4);
}
.khgh-product-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1;}
.khgh-product-cat{font-size:11.5px;color:var(--khgh-primary);font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;}
.khgh-product-title, ul.products li.product .woocommerce-loop-product__title{
  font-size:14.5px;font-weight:700;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px;
}
.khgh-product-price{margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.khgh-price-sale, .price ins{color:var(--khgh-primary)!important;font-weight:800;font-size:17px;text-decoration:none!important;}
.khgh-price-regular, .price del{color:#b7b9c9!important;font-size:13px;text-decoration:line-through!important;}
.khgh-product-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:var(--khgh-muted);}
.khgh-product-card .add_to_cart_button, .khgh-product-card a.button{
  margin-top:10px;display:block;text-align:center;background:var(--khgh-dark);color:#fff!important;
  padding:9px 10px;border-radius:8px;font-weight:700;font-size:13px;transition:.2s;
}
.khgh-product-card .add_to_cart_button:hover, .khgh-product-card a.button:hover{background:var(--khgh-primary);}

/* =============================
   8. USP STRIP
============================= */
.khgh-usp{background:#fff;padding:36px 0;border-top:1px solid var(--khgh-border);border-bottom:1px solid var(--khgh-border);}
.khgh-usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.khgh-usp-item{display:flex;gap:14px;align-items:center;}
.khgh-usp-item .khgh-usp-icon{
  width:54px;height:54px;border-radius:50%;background:rgba(255,107,53,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.khgh-usp-icon svg{width:26px;height:26px;stroke:var(--khgh-primary);}
.khgh-usp-item h5{margin:0 0 3px;font-size:15px;}
.khgh-usp-item p{margin:0;font-size:12.5px;color:var(--khgh-muted);}

/* =============================
   9. DEAL BANNER
============================= */
.khgh-deal{
  border-radius:22px;overflow:hidden;position:relative;background:var(--khgh-dark);color:#fff;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
}
.khgh-deal-img img{width:100%;height:100%;object-fit:cover;min-height:320px;}
.khgh-deal-content{padding:40px;}
.khgh-deal-content h2{font-size:26px;color:#fff;}
.khgh-deal-content ul{margin:18px 0;}
.khgh-deal-content ul li{padding:6px 0 6px 26px;position:relative;font-size:14px;color:#d9dae8;}
.khgh-deal-content ul li::before{content:"✓";position:absolute;left:0;color:var(--khgh-primary);font-weight:800;}
.khgh-deal-actions{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap;}

/* =============================
   10. FOOTER
============================= */
.khgh-footer{background:var(--khgh-dark);color:#c6c9de;padding:60px 0 0;margin-top:20px;}
.khgh-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding-bottom:40px;}
.khgh-footer h5{color:#fff;font-size:15px;margin-bottom:16px;}
.khgh-footer-about img{height:42px;margin-bottom:14px;}
.khgh-footer-about p{font-size:13px;color:#a7abc4;}
.khgh-footer ul li{margin-bottom:9px;font-size:13.5px;}
.khgh-footer ul li a:hover{color:var(--khgh-primary);}
.khgh-footer-social{display:flex;gap:10px;margin-top:14px;}
.khgh-footer-social a{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;
  transition:.2s;
}
.khgh-footer-social a:hover{background:var(--khgh-primary);}
.khgh-footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;font-size:12.5px;color:#8b8fac;text-align:center;}
.khgh-payment-img{background:#fff;border-radius:10px;padding:10px;margin-top:8px;}

/* =============================
   11. WOOCOMMERCE PAGE TWEAKS
============================= */
.woocommerce-page .khgh-container, .woocommerce .khgh-container{padding-top:30px;padding-bottom:60px;}
.woocommerce table.shop_table{border-radius:var(--khgh-radius);overflow:hidden;box-shadow:var(--khgh-shadow);border:none;}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background:var(--khgh-primary)!important;color:#fff!important;border-radius:999px!important;border:none!important;
  padding:11px 24px!important;font-weight:700!important;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover{background:var(--khgh-primary-dark)!important;}
.woocommerce-cart table.cart img{border-radius:8px;}
.woocommerce-checkout #payment{background:#fff;border-radius:var(--khgh-radius);}
.woocommerce ul.products li.product .price{margin:0 0 6px;}

/* Breadcrumb / page header */
.khgh-page-header{background:#fff;border-bottom:1px solid var(--khgh-border);padding:22px 0;margin-bottom:10px;}
.khgh-page-header h1{font-size:24px;margin:0;}
.khgh-breadcrumb{font-size:13px;color:var(--khgh-muted);}
.khgh-breadcrumb a:hover{color:var(--khgh-primary);}

/* =============================
   12. RESPONSIVE
============================= */
@media(max-width:1024px){
  .khgh-mega{min-width:720px;}
  .khgh-mega-col{width:33.33%;}
  .khgh-mega-all-grid{grid-template-columns:repeat(3,1fr);}
  .khgh-footer-grid{grid-template-columns:1fr 1fr;}
  .khgh-usp-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:860px){
  .khgh-deal{grid-template-columns:1fr;}
  .khgh-deal-img img{min-height:220px;}
}
@media(max-width:782px){
  .khgh-search{display:none;}
  .khgh-nav{display:none;}
  .khgh-mobile-toggle{display:block;}
  .khgh-header-actions{gap:14px;}
  .khgh-header-action span{display:none;}
  .khgh-section-head{flex-direction:column;align-items:flex-start;}
  .khgh-footer-grid{grid-template-columns:1fr;}
  .khgh-usp-grid{grid-template-columns:1fr;}
  .khgh-topbar-links{display:none;}

  .khgh-mobile-nav{
    display:block;position:fixed;inset:0 0 0 auto;width:82%;max-width:340px;background:#fff;z-index:1200;
    transform:translateX(100%);transition:.3s;box-shadow:-10px 0 30px rgba(0,0,0,.2);overflow-y:auto;
  }
  .khgh-mobile-nav.is-open{transform:translateX(0);}
  .khgh-mobile-nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1100;display:none;}
  .khgh-mobile-nav-overlay.is-open{display:block;}
  .khgh-mobile-nav-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--khgh-border);}
  .khgh-mobile-nav ul li a{display:block;padding:13px 18px;border-bottom:1px solid var(--khgh-border);font-weight:600;}
  .khgh-mobile-nav ul li ul li a{padding-left:32px;font-weight:400;font-size:13.5px;}
}