/* 
 * DISCOVER NEWS HUB - HOME PAGE STYLES
 * 
 * ⚠️ QUAN TRỌNG: KHÔNG THÊM CSS GHI ĐÈ body, font-family, font-size, line-height TOÀN CỤC
 * Typography được định nghĩa trong /assets/css/base.css
 */

/* ============================================
   HERO SECTION (H1 + SEARCH + LOGO)
   ============================================ */
.hsgn-hero-section{
  padding:64px 0 48px;
  background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);
  position:relative;
}

.hsgn-hero-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(circle at 50% 0%, rgba(37,99,235,.03) 0%, transparent 70%);
  pointer-events:none;
}

@media (max-width:768px){
  .hsgn-hero-section{
    padding:40px 0 32px;
  }
}


.hsgn-search-form{
  max-width:980px;
  margin:0 auto 32px;
}

.hsgn-search-wrapper{
  display:flex;
  gap:0;
  background:#ffffff;
  border:2px solid #e5e7eb;
  border-radius:999px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:border-color .2s, box-shadow .2s;
  max-width:860px;
  margin:0 auto;
}

.hsgn-search-wrapper:focus-within{
  border-color:#2563eb;
  box-shadow:0 4px 16px rgba(37,99,235,.15);
}

.hsgn-search-input{
  flex:1;
  padding:16px 24px;
  border:0;
  background:transparent;
  font-size:16px;
  color:#111827;
  outline:none;
  height:56px;
}

.hsgn-search-input::placeholder{
  color:#9ca3af;
}

.hsgn-search-btn{
  padding:16px 24px;
  border:0;
  background:#2563eb;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s, box-shadow .2s;
  border-radius:999px;
  margin:4px;
  height:48px;
  min-width:56px;
}

.hsgn-search-btn:hover{
  background:#1d4ed8;
  box-shadow:0 2px 8px rgba(37,99,235,.25);
}

.hsgn-search-btn:focus-visible{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

@media (max-width:768px){
  .hsgn-search-wrapper{
    max-width:100%;
  }
  
  .hsgn-search-input{
    padding:14px 20px;
    height:50px;
    font-size:15px;
  }
  
  .hsgn-search-btn{
    padding:14px 20px;
    height:42px;
    min-width:50px;
  }
}

/* ============================================
   LICENSE NAVIGATION (ICON LINKS)
   ============================================ */
.hsgn-license-nav{
  padding:20px 0;
  background:transparent !important;
}

.hsgn-license-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  align-items:center;
}

.hsgn-license-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:16px 20px;
  min-width:100px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  text-decoration:none;
  color:#111827;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.hsgn-license-link:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  border-color:#2563eb;
  text-decoration:none;
}

.hsgn-license-icon{
  font-size:36px;
  line-height:1;
}

.hsgn-license-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}

.hsgn-license-text strong{
  font-size:16px;
  font-weight:900;
  color:#111827;
}

.hsgn-license-text span{
  font-size:12px;
  color:#6b7280;
  font-weight:600;
}

/* ============================================
   TEST CONTENT SECTION
   ============================================ */
.hlx-test-content{
  margin:32px 0;
  padding:32px 0;
  background:transparent !important;
  border-top:1px solid #e5e7eb;
}

.hlx-test-content h2{
  color:#111827;
  font-size:1.5rem;
  font-weight:700;
  margin:0 0 16px;
  line-height:1.3;
}

.hlx-test-content p{
  color:#374151;
  font-size:16px;
  line-height:1.7;
  margin:0 0 16px;
}

.hlx-test-content p:last-child{
  margin-bottom:0;
}

.hlx-test-content a{
  color:#2563eb;
  text-decoration:underline;
}

.hlx-test-content a:hover{
  color:#1d4ed8;
}

/* ============================================
   FEATURED STRIP (4 BÀI ĐỀU)
   ============================================ */
.hsgn-featured-strip{
  padding:32px 0;
  background:transparent !important;
}

.hsgn-section-title{
  font-size:30px;
  font-weight:800;
  color:#111827;
  margin:0 0 24px;
  letter-spacing:-0.015em;
}

.hsgn-featured-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}

.hsgn-featured-card{
  background:#ffffff !important;
  border:1px solid #e5e7eb;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  transition:transform .2s, box-shadow .2s;
}

.hsgn-featured-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.hsgn-featured-link{
  display:block;
  text-decoration:none;
  color:#111827;
  overflow:hidden;
}

.hsgn-featured-link img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}

.hsgn-featured-card:hover .hsgn-featured-link img{
  transform:scale(1.05);
}

.hsgn-featured-body{
  padding:16px;
  background:#ffffff !important;
}

.hsgn-featured-cat{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:#eff6ff;
  color:#2563eb;
  font-size:12px;
  font-weight:800;
  margin-bottom:10px;
}

.hsgn-featured-title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:900;
  line-height:1.3;
  color:#111827 !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.hsgn-featured-date{
  font-size:13px;
  color:#6b7280 !important;
  font-weight:700;
}

@media (max-width:768px){
  .hsgn-featured-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
  }
}

@media (max-width:480px){
  .hsgn-featured-grid{
    grid-template-columns:1fr;
  }
}

/* ============================================
   PILLAR SECTION (1 MAIN + 2 SIDE)
   ============================================ */
.hsgn-pillar-section{
  padding:32px 0;
  background:transparent !important;
}

/* ============================================
   PILLAR SECTION (1 MAIN + 2 SIDE - MSN)
   ============================================ */
.hsgn-pillar-section{padding:32px 0;background:transparent !important;}
.hsgn-pillar-heading{font-size:30px;font-weight:800;color:#111827;margin:0 0 24px;letter-spacing:-0.015em;}

.hsgn-pillar-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:24px;
  align-items:stretch;
}

/* MAIN */
.hsgn-pillar-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.hsgn-pillar-link{display:block;text-decoration:none;color:#111827;height:100%;}
.hsgn-pillar-link img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.hsgn-pillar-content{padding:20px;}
.hsgn-pillar-title{margin:0 0 12px;font-size:24px;font-weight:900;line-height:1.25;color:#111827;}
.hsgn-pillar-excerpt{margin:0 0 16px;color:#6b7280;line-height:1.6;font-size:15px;}
.hsgn-pillar-meta{font-size:13px;color:#6b7280;font-weight:700;}

/* RIGHT: 2 cards stacked + button */
.hsgn-pillar-side{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.hsgn-pillar-side-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  transition:transform .2s, box-shadow .2s;
}
.hsgn-pillar-side-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.12);}

.hsgn-pillar-side-link{
  display:flex;
  flex-direction:column;
  height:100%;
  text-decoration:none;
  color:#111827;
}
.hsgn-pillar-side-link img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.hsgn-pillar-side-content{padding:16px;}
.hsgn-pillar-side-title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:900;
  line-height:1.3;
  color:#111827;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.hsgn-pillar-side-date{font-size:13px;color:#6b7280;font-weight:700;}

.hsgn-pillar-see-more{
  margin-top:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  background:#2563eb;
  color:#fff;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  transition:background .2s;
}
.hsgn-pillar-see-more:hover{background:#1d4ed8;text-decoration:none;}

/* Responsive */
@media (max-width:1024px){
  .hsgn-pillar-grid{grid-template-columns:1fr;}
}

.hsgn-pillar-see-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  background:#2563eb;
  color:#fff;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  transition:background .2s;
}

.hsgn-pillar-see-more:hover{
  background:#1d4ed8;
  text-decoration:none;
}

/* ============================================
   CATEGORY SECTION
   ============================================ */
.hsgn-categories-section{
  padding:32px 0;
  background:transparent !important;
}

.hsgn-categories-wrapper{
  display:flex;
  flex-direction:column;
  gap:32px;
}

.hsgn-category-block{
  background:transparent !important;
}

.hsgn-category-block-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.hsgn-category-block-title{
  margin:0;
  font-size:24px;
  font-weight:900;
  color:#111827;
}

.hsgn-category-block-title a{
  color:#111827;
  text-decoration:none;
}

.hsgn-category-block-title a:hover{
  color:#2563eb;
}

.hsgn-category-cta{
  padding:8px 16px;
  background:#f3f4f6;
  color:#111827;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  transition:background .2s, color .2s;
}

.hsgn-category-cta:hover{
  background:#2563eb;
  color:#fff;
  text-decoration:none;
}

.hsgn-category-articles{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}

.hsgn-category-article{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  transition:transform .2s, box-shadow .2s;
}

.hsgn-category-article:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.hsgn-category-article-link{
  display:block;
  text-decoration:none;
  color:#111827;
}

.hsgn-category-article-link img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}

.hsgn-category-article-content{
  padding:16px;
}

.hsgn-category-article-title{
  margin:0 0 8px;
  font-size:16px;
  font-weight:900;
  line-height:1.3;
  color:#111827;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.hsgn-category-article-date{
  font-size:13px;
  color:#6b7280;
  font-weight:700;
}

/* ============================================
   LATEST TEXT SECTION
   ============================================ */
.hsgn-latest-text-section{
  padding:32px 0;
  background:transparent !important;
}

.hsgn-latest-text-list{
  display:flex;
  flex-direction:column;
  gap:0;
}

.hsgn-latest-text-item{
  padding:16px 0;
  border-bottom:1px solid #e5e7eb;
}

.hsgn-latest-text-item:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.hsgn-latest-text-link{
  display:block;
  text-decoration:none;
  color:#111827;
}

.hsgn-latest-text-title{
  margin:0 0 8px;
  color:#111827;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.hsgn-latest-text-link:hover .hsgn-latest-text-title{
  color:#2563eb;
}

.hsgn-latest-text-meta{
  color:#6b7280;
  display:flex;
  align-items:center;
  gap:6px;
}

.hsgn-latest-text-cat{
  color:#2563eb;
  font-weight:500;
}

/* ============================================
   E-E-A-T DISCLAIMER
   ============================================ */
.hsgn-eat-disclaimer{
  margin:32px 0 0;
  padding:24px 0;
  border-top:1px solid #e5e7eb;
  background:#f8fafc;
}

.hsgn-eat-text{
  text-align:center;
  margin:0;
  font-style:italic;
  color:#6b7280;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px){
  .hsgn-license-links{
    gap:12px;
  }
  .hsgn-license-link{
    min-width:90px;
    padding:12px 16px;
  }
  .hsgn-license-icon{
    font-size:32px;
  }
  .hsgn-license-text strong{
    font-size:16px;
  }
  .hsgn-featured-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .hsgn-pillar-grid{
    grid-template-columns:1fr;
  }
  
  .hsgn-pillar-side{
    height:auto;
  }
  
  .hsgn-pillar-side-card{
    flex:none;
  }
  .hsgn-category-articles{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .hsgn-hero-section{
    padding:32px 0 20px;
  }
  .hsgn-search-form{
    padding:0 16px;
  }
  .hsgn-license-links{
    gap:8px;
  }
  .hsgn-license-link{
    min-width:80px;
    padding:10px 12px;
  }
  .hsgn-license-icon{
    font-size:28px;
  }
  .hsgn-license-text strong{
    font-size:14px;
  }
  .hsgn-license-text span{
    font-size:11px;
  }
  .hsgn-featured-grid{
    grid-template-columns:1fr;
  }
  .hsgn-category-articles{
    grid-template-columns:1fr;
  }
}

/* ===== PATCH: harden home.css (no layout change) ===== */

/* 1) Lock underline for ecosystem tiles */
.hsgn-license-link:hover,
.hsgn-license-link:focus{
  text-decoration:none;
}
.hsgn-license-link:hover{
  color:#111827;
}

/* 2) Better focus for search (a11y) */
.hsgn-search-btn:focus-visible,
.hsgn-search-input:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,.25);
}

/* 3) Aspect-ratio safe fallback */
.hsgn-featured-link img,
.hsgn-pillar-link img,
.hsgn-pillar-side-link img,
.hsgn-category-article-link img{
  min-height:140px;
}
@media (min-width:1025px){
  .hsgn-featured-link img{min-height:120px;}
  .hsgn-category-article-link img{min-height:120px;}
}

/* ===== ICON NAV: chỉ hiện logo/icon, ẩn chữ (UI clean kiểu MSN/Discover) ===== */
/* ICON NAV: chỉ icon, ẩn chữ - nhưng vẫn có aria-label/title cho accessibility */
.hsgn-license-nav .hsgn-license-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.hsgn-license-nav .hsgn-license-link{
  min-width:72px;
  padding:14px 16px;
  position:relative;
}

.hsgn-license-nav .hsgn-license-icon{
  font-size:34px;
  line-height:1;
  margin:0 auto;
}

/* Hover vẫn giữ hiệu ứng */
.hsgn-license-nav .hsgn-license-link:hover .hsgn-license-icon{
  transform:scale(1.08) rotate(3deg);
}

/* Mobile tối ưu lại cho gọn */
@media (max-width: 640px){
  .hsgn-license-nav .hsgn-license-link{
    min-width:68px;
    padding:12px 14px;
  }
  .hsgn-license-nav .hsgn-license-icon{
    font-size:30px;
  }
}

/* ================================
   MSN CATEGORY BAR
   ================================ */
.hsgn-msn-catbar{margin:10px 0 22px;}
.hsgn-msn-catbar__row{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
}
.hsgn-msn-catbar__item{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:999px;
  background:linear-gradient(180deg,#ffffff,#f6f7fb);
  border:1px solid rgba(11,18,32,.10);
  box-shadow:0 10px 28px rgba(11,18,32,.08), inset 0 1px 0 rgba(255,255,255,.9);
  color:#0b1220;font-weight:700;text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hsgn-msn-catbar__item:hover{
  transform:translateY(-1px);
  border-color:rgba(37,99,235,.35);
  box-shadow:0 14px 34px rgba(37,99,235,.14), inset 0 1px 0 rgba(255,255,255,.95);
  text-decoration:none;
}
.hsgn-msn-catbar__item--cta{
  background:linear-gradient(180deg,#2563eb,#1d4ed8);
  border-color:rgba(37,99,235,.55);
  color:#fff;
}

/* ================================
   MSN LEAD GRID
   ================================ */
.hsgn-msn-lead{margin:22px 0 44px;}
.hsgn-msn-lead__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:stretch;
}

/* LEFT: Slider + Bài chủ chốt thứ 2 */
.hsgn-msn-left{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ================================
   SLIDER (LEFT)
   ================================ */
.hsgn-msn-slider{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#0b1220;
  box-shadow:0 18px 55px rgba(11,18,32,.18);
  aspect-ratio:16/9;
  flex:1;
}
.hsgn-msn-slider__stage{position:relative;height:100%;width:100%;}
.hsgn-msn-slide{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;
  transform:scale(1.02);
  transition:opacity .35s ease, transform .35s ease;
}
.hsgn-msn-slide.is-active{
  opacity:1;pointer-events:auto;
  transform:scale(1);
}
.hsgn-msn-slide__link{display:block;height:100%;position:relative;}
.hsgn-msn-slide__img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.05) contrast(1.05);
}
.hsgn-msn-slide__overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:22px 22px 18px;
  background:linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,.60) 55%, rgba(11,18,32,.92) 100%);
}
.hsgn-msn-slide__cat{
  display:inline-flex;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;font-weight:700;
}
.hsgn-msn-slide__title{
  margin:12px 0 10px;
  color:#fff;
  font-size:clamp(20px, 2.2vw, 34px);
  line-height:1.25;
  text-shadow:0 18px 55px rgba(0,0,0,.35);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.hsgn-msn-slide__meta{
  display:flex;gap:10px;align-items:center;
  color:rgba(255,255,255,.82);
  font-weight:600;
}

/* Slider buttons */
.hsgn-msn-slider__btn{
  position:absolute;top:50%;
  transform:translateY(-50%);
  width:48px;height:48px;border-radius:999px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:28px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  z-index:5;
  cursor:pointer;
}
.hsgn-msn-slider__btn:hover{
  background:rgba(255,255,255,.26);
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.hsgn-msn-slider__btn:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}
.hsgn-msn-slider__btn--prev{left:16px;}
.hsgn-msn-slider__btn--next{right:16px;}

/* Dots */
.hsgn-msn-slider__dots{
  position:absolute;left:0;right:0;bottom:14px;
  display:flex;gap:10px;justify-content:center;
  z-index:6;
}
.hsgn-msn-dot{
  width:10px;height:10px;border-radius:999px;
  border:0;background:rgba(255,255,255,.40);
  transition:width .18s ease, background .18s ease, transform .18s ease;
  cursor:pointer;
}
.hsgn-msn-dot:hover{
  background:rgba(255,255,255,.60);
  transform:scale(1.15);
}
.hsgn-msn-dot.is-active{
  width:28px;
  background:#fff;
}
.hsgn-msn-dot:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* "Flip book" nhẹ khi chuyển */
.hsgn-msn-slide.is-flip{
  animation:hlxPageFlip .38s ease;
  transform-origin:right center;
}
@keyframes hlxPageFlip{
  0%{transform:perspective(900px) rotateY(-10deg) scale(1.01); filter:brightness(.95);}
  100%{transform:perspective(900px) rotateY(0deg) scale(1); filter:brightness(1);}
}

/* ================================
   RIGHT PANEL
   ================================ */
.hsgn-msn-right{display:flex;flex-direction:column;gap:14px;}
.hsgn-msn-fixed{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(11,18,32,.10);
  box-shadow:0 18px 55px rgba(11,18,32,.12);
}
.hsgn-msn-fixed--second{
  margin-top:0;
}
.hsgn-msn-fixed__link{display:block;text-decoration:none;color:inherit;}
.hsgn-msn-fixed__img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.hsgn-msn-fixed__body{padding:14px 14px 16px;}
.hsgn-msn-fixed__cat{color:#2563eb;font-weight:800;font-size:13px;}
.hsgn-msn-fixed__title{
  margin:8px 0 8px;
  color:#0b1220;
  line-height:1.3;
  font-size:16px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.hsgn-msn-fixed__meta{color:rgba(11,18,32,.68);font-weight:600;}

.hsgn-msn-widgets{display:flex;flex-direction:column;gap:12px;}
.hsgn-msn-widget{
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff,#f6f7fb);
  border:1px solid rgba(11,18,32,.10);
  box-shadow:0 12px 30px rgba(11,18,32,.08), inset 0 1px 0 rgba(255,255,255,.9);
  padding:14px;
}
.hsgn-msn-widget__title{
  font-weight:900;color:#0b1220;margin-bottom:10px;
  letter-spacing:-0.01em;
}
.hsgn-msn-weather__loc{font-weight:800;color:#0b1220;}
.hsgn-msn-weather__temp{font-size:28px;font-weight:900;color:#0b1220;line-height:1.1;margin-top:4px;}
.hsgn-msn-weather__cond{color:rgba(11,18,32,.68);font-weight:700;margin-top:4px;}

.hsgn-msn-stats{display:grid;gap:10px;}
.hsgn-msn-stat{display:flex;align-items:center;justify-content:space-between;}
.hsgn-msn-stat span{color:rgba(11,18,32,.68);font-weight:700;}
.hsgn-msn-stat strong{color:#0b1220;font-weight:900;font-variant-numeric:tabular-nums;}
.hsgn-msn-widget__note{margin-top:8px;color:rgba(11,18,32,.55);font-size:11px;font-weight:600;}
.hsgn-msn-weather__temp{font-variant-numeric:tabular-nums;}


/* Responsive */
@media (max-width: 1024px){
  .hsgn-msn-lead__grid{grid-template-columns:1fr;gap:16px;}
  .hsgn-msn-left{flex-direction:column;}
}
@media (max-width: 640px){
  .hsgn-msn-slider__btn{display:none;}
  .hsgn-msn-slider__dots{bottom:10px;gap:8px;}
  .hsgn-msn-dot{width:8px;height:8px;}
  .hsgn-msn-dot.is-active{width:24px;}
}

/* ================================
   PATCH: MERGE .hsgn-h1-main (1 block duy nhất)
   - Xóa/không dùng 2 định nghĩa rời rạc
   - Giữ layout + 3D/modern
   ================================ */

.hsgn-h1-main{
  /* layout cơ bản */
  text-align:center;
  margin:0 auto 16px;
  max-width:980px;
  line-height:1.35;
  letter-spacing:-0.02em;

  /* size */
  font-size:42px;

  /* 3D/modern */
  font-family: 'Be Vietnam Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight:800;
  color:#0b1220;

  text-shadow:none;

  position:relative;
}

.hsgn-hero-sub{
  text-align:center;
  margin:0 auto 32px;
  max-width:860px;
  font-size:16px;
  line-height:1.6;
  color:#64748b;
  font-weight:400;
}

@media (max-width:768px){
  .hsgn-hero-sub{
    font-size:15px;
    padding:0 16px;
  }
}

.hsgn-h1-main::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-12px;
  width:min(520px,85%);
  height:14px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(37,99,235,.25), rgba(37,99,235,0) 70%);
  filter:blur(2px);
}

/* Responsive giữ đúng ý hiện tại */
@media (max-width: 640px){
  .hsgn-h1-main{
    padding:0 16px;
    font-size:28px;
  }
}

/* =========================================================
   PUBLISHER LOGO 3D (MSN/Discover - Premium)
   - Không hiển thị chữ cạnh logo
   - 3D nổi + kính bóng + viền sang
   ========================================================= */
.hsgn-publisher-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:18px 0 10px;
}

.hsgn-publisher-logo-link{
  position:relative;
  width:64px;
  height:64px;
  border-radius:999px;

  /* nền kính */
  background:
    radial-gradient(120% 120% at 25% 20%, rgba(255,255,255,.95), rgba(255,255,255,.65) 35%, rgba(255,255,255,.2) 70%),
    linear-gradient(180deg, #ffffff, #eef2f7);

  border:1px solid rgba(11,18,32,.14);

  /* bóng sâu kiểu 3D */
  box-shadow:
    0 10px 18px rgba(11,18,32,.18),
    0 28px 55px rgba(11,18,32,.14),
    0 60px 120px rgba(37,99,235,.08),
    inset 0 2px 2px rgba(255,255,255,.95),
    inset 0 -8px 16px rgba(11,18,32,.08);

  display:flex;
  align-items:center;
  justify-content:center;

  transform:translateZ(0);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow:hidden;
}

/* viền sáng mỏng (premium ring) */
.hsgn-publisher-logo-link::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  padding:1px;
  background:linear-gradient(135deg,
    rgba(255,255,255,.95),
    rgba(255,255,255,.15) 35%,
    rgba(37,99,235,.18) 70%,
    rgba(255,255,255,.5));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.9;
}

/* highlight kính */
.hsgn-publisher-logo-link::after{
  content:"";
  position:absolute;
  top:-25%;
  left:-20%;
  width:70%;
  height:70%;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 70%);
  filter:blur(1px);
  pointer-events:none;
  opacity:.85;
}

/* logo bên trong */
.hsgn-publisher-logo-img{
  width:38px;
  height:38px;
  object-fit:contain;
  border-radius:12px;

  /* đẩy nổi logo lên */
  filter:drop-shadow(0 8px 10px rgba(11,18,32,.18));
  transform:translateY(-1px);
}

/* hover kiểu publisher */
.hsgn-publisher-logo-link:hover{
  transform:translateY(-4px) scale(1.06);
  border-color:rgba(37,99,235,.28);
  box-shadow:
    0 14px 24px rgba(11,18,32,.22),
    0 40px 80px rgba(37,99,235,.18),
    inset 0 2px 2px rgba(255,255,255,1),
    inset 0 -10px 18px rgba(11,18,32,.10);
}

.hsgn-publisher-logo-link:active{
  transform:translateY(-1px) scale(.99);
}

/* mobile */
@media (max-width:640px){
  .hsgn-publisher-logo-link{width:56px;height:56px;}
  .hsgn-publisher-logo-img{width:34px;height:34px;border-radius:10px;}
}

/* DOCK ICONS – FINAL UNIFIED */
.hsgn-icon-dock{
  display:flex;
  justify-content:space-between; /* Trải đều 9 vòng tròn */
  align-items:center;
  gap:0; /* Không gap, dùng space-between */
  flex-wrap:nowrap; /* Không wrap để trải đều */
  margin:8px auto 0; /* Xích lên trên 6px (từ 14px) */
  padding:10px 12px;
  max-width:980px; /* Bằng với thanh tìm kiếm */
  width:100%;
}

.hsgn-dock-item{
  width:60px; /* Vòng tròn ngoài 60x60px */
  height:60px; /* Vòng tròn ngoài 60x60px */
  border-radius:999px;
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
  text-decoration:none;
  isolation:isolate;
  flex-shrink:0; /* Không co lại để trải đều */

  /* Glass 5D */
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.98) 0%, rgba(234,243,255,.95) 35%, rgba(210,226,255,.92) 70%, rgba(186,207,255,.9) 100%);
  border:1px solid rgba(60,110,255,.22);

  box-shadow:
    0 18px 34px rgba(0,0,0,.18),
    0 8px 16px rgba(0,0,0,.12),
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -10px 22px rgba(10,30,90,.10);

  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* Highlight bóng kính */
.hsgn-dock-item::before{
  content:"";
  position:absolute;
  left:10px; right:10px; top:8px;
  height:18px;
  border-radius:999px;
  background: linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,0));
  opacity:.9;
  z-index:0;
}

/* Glow viền mềm */
.hsgn-dock-item::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background: radial-gradient(closest-side, rgba(90,140,255,.35), transparent 70%);
  filter: blur(10px);
  opacity:.55;
  z-index:-1;
}

.hsgn-dock-item:hover{
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow:
    0 22px 44px rgba(0,0,0,.20),
    0 10px 18px rgba(0,0,0,.14),
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -12px 26px rgba(10,30,90,.12);
}

.hsgn-dock-item:active{
  transform: translateY(-1px);
}

.hsgn-dock-item:focus-visible{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

.hsgn-dock-item img{
  width:120px !important; /* Icon bên trong 120x120px */
  height:120px !important; /* Icon bên trong 120x120px */
  object-fit:cover !important; /* Cover để fill hết vòng tròn */
  object-position:center center !important;
  display:block !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  position:relative;
  z-index:1;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.22));
  margin:-22px auto 0; /* Lùi xuống 8px (từ -30px) */
}

/* Mobile */
@media (max-width:480px){
  .hsgn-icon-dock{ 
    gap:8px; /* Gap nhỏ hơn trên mobile */
    flex-wrap:wrap; /* Cho phép wrap trên mobile */
    justify-content:center; /* Căn giữa trên mobile */
  }
  .hsgn-dock-item{ 
    width:60px; height:60px; /* Vòng tròn ngoài 60x60px */
  }
  .hsgn-dock-item img{ 
    width:120px !important; /* Icon bên trong 120x120px */
    height:120px !important; /* Icon bên trong 120x120px */
  }
}