/* ===========================
   HUB: Coloring Pages (Scoped)
   Root: .hub-coloring-pages
   =========================== */

.hub-coloring-pages {
  --hub-max: 1100px;
  --hub-gap: 16px;
  --hub-radius: 14px;
  --hub-border: 1px solid rgba(0,0,0,.08);
  --hub-shadow: 0 6px 20px rgba(0,0,0,.08);
  --hub-muted: rgba(0,0,0,.72);
  --hub-bg-soft: rgba(0,0,0,.03);
  --hub-bg: #fff;
  --hub-link: inherit;
}

.ul-in-content{list-style:inside;margin:10px;color:var(--hub-muted)}

.ul-in-content li{list-style:inside;color:var(--hub-muted)}

.hub-coloring-pages .hub-container {
  width: min(100%, var(--hub-max));
  margin-inline: auto;
  padding-inline: 16px;
}

.hub-coloring-pages .hub-container .link-online-coloring{
	text-align: center;
    font-weight: 500;
    margin-top: 30px;
}

.hub-coloring-pages .hub-container .link-online-coloring a{
	padding: 8px 15px;
    border: 1px solid #eee;
    box-shadow: var(--hub-shadow);
    border-radius: 10px;
    border: var(--hub-border);
	color:#067d81;
	border-color:#067d81;
	transition:0.5s;
}

.hub-coloring-pages .hub-container .link-online-coloring a:hover{
	background: #dff5f5;
}

/* ----- Section spacing ----- */
.hub-coloring-pages section{padding:50px 0}
.hub-coloring-pages .hub-hero,
.hub-coloring-pages .hub-definition,
.hub-coloring-pages .hub-purposes,
.hub-coloring-pages .hub-categories,
.hub-coloring-pages .hub-trending,
.hub-coloring-pages .hub-ages,
.hub-coloring-pages .hub-faq {
  /*padding-block: 28px;*/
}

.hub-coloring-pages h1,
.hub-coloring-pages h2,
.hub-coloring-pages h3 {
  margin: 0 0 10px;
  line-height: 1.2;
  font-weight:500
}

.hub-coloring-pages h2 {
  font-size: clamp(2.3rem, 2.2vw, 2.8rem);
}

.hub-coloring-pages p {
  margin: 0;
  color: var(--hub-muted);
}

.hub-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 20px;
  font-weight: 700;
  color: #067d81;
  margin: 30px 0 20px;
  text-align: center;
  padding-bottom: 20px;
}

.hub-section-title::before,
.hub-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,.15);
}


/* ===========================
   HERO
   =========================== */
.hub-coloring-pages .hub-hero {
  padding-top: 20px;
  text-align:center;
  padding-bottom: 20px;
}
.hub-coloring-pages .hub-hero .breakcums{text-align:center;}
.hub-coloring-pages .hub-title {
  font-size: clamp(2.8rem, 3.2vw, 3.3rem);
  letter-spacing: -0.02em;
}

.hub-coloring-pages .hub-hero p,.header-homepage p {margin:0 auto}

.hub-coloring-pages .hub-subtitle, .header-homepage .hub-subtitle{
  margin-top: 6px;
  color: rgba(0,0,0,.72);
  font-weight:500;
}

.hub-coloring-pages .hub-intro, .header-homepage .hub-intro{
  margin-top: 5px;
  max-width: 74ch;
}
.hub-coloring-pages .home-explore .hub-purpose-card::before{height:0}
.hub-coloring-pages .home-explore .hub-button{border-radius: 30px;}
.hub-coloring-pages .home-explore .hub-blue .hub-button{background: #57b8fd;}
.hub-coloring-pages .home-explore .hub-orange .hub-button{background: #ffaf4b}
.hub-coloring-pages .home-explore .hub-green .hub-button{background: #80d75c}
.home-all-categories a.view-all-btn{    
	background: linear-gradient(135deg, #4a86d5, #4bc6ed);
    color: #fff;
    padding: 3px 15px;
    margin: 0 auto;
    width: fit-content;
    display: block;
    margin: 10px auto;
    border-radius: 30px;font-weight: 500;}

/*====HOME PAGE====*/
.header-homepage p {text-align:center}
.hub-coloring-pages .home-core .hub-category-item img{border:none;box-shadow:none !important}
.home-core{padding:0;opacity: 0.85;}
/* ===========================
   DEFINITIVE INTRO
   =========================== */
.hub-coloring-pages .hub-definition h2 {
	border-bottom: 1px solid #e4e4e4;
	padding-bottom: 5px;
	}
.hub-coloring-pages .hub-definition .hub-definition-content {
}

.hub-coloring-pages .hub-definition .hub-definition-content p + p {
  margin-top: 10px;
}

/* ===========================
   PURPOSE CARDS (3)
   =========================== */
.hub-coloring-pages .hub-purpose-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--hub-gap);
  margin-top: 12px;
}

.hub-coloring-pages .hub-purpose-card {
  grid-column: span 4;
  background: var(--hub-bg);
  border: var(--hub-border);
  border-radius: var(--hub-radius);
  box-shadow: var(--hub-shadow);
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
  position: relative;
  overflow: hidden;
}

.hub-coloring-pages .hub-purpose-card .hub-purpose-icon{
	display: flex;
    flex-direction: row;
	justify-content: center;
    align-items: center;
    gap: 10px;
}

.hub-coloring-pages .hub-purpose-card .hub-purpose-icon h3{margin:0}

.hub-coloring-pages .hub-purpose-card .hub-purpose-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.hub-coloring-pages .hub-purpose-title {
  font-size: 18px;
  margin: 0;
}

.hub-coloring-pages .hub-purpose-desc {
  margin: 0;
  color: var(--hub-muted);
  font-size: 14px;
}

/* theme stripes (light) */
.hub-coloring-pages .hub-purpose-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 10px;
  background: rgba(0,0,0,.08);
}

.hub-coloring-pages .hub-purpose-card.theme-blue::before { background: rgb(43 152 245 / 80%); }
.hub-coloring-pages .hub-purpose-card.theme-orange::before {  background: rgb(247 166 18 / 80%); }
.hub-coloring-pages .hub-purpose-card.theme-green::before { background: rgb(47 201 73 / 80%); }

/* button */
.hub-coloring-pages .hub-button {
  display: inline-flex;
  align-items: center;
  width:fit-content;
  gap: 6px;
  padding: 3px 20px;
  margin:0 auto;
  border-radius: 10px;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
  color:#fff;
}

.hub-coloring-pages .hub-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(47,128,237,.35);
}

.hub-coloring-pages .theme-blue .hub-button{background: #55adf7}
.hub-coloring-pages .theme-green .hub-button{background: rgb(47 201 73 / 80%);}
.hub-coloring-pages .theme-orange .hub-button{background: rgb(247 166 18 / 80%)}

.hub-coloring-pages .theme-blue .hub-button:hover{background: #3b88c9}
.hub-coloring-pages .theme-green .hub-button:hover{background: #33bb7b}

.hub-coloring-pages .hub-button:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(47,128,237,.25);
}

/* ===========================
   CATEGORY GRID
   =========================== */
.hub-coloring-pages .hub-category-grid {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--hub-gap);
}

.hub-coloring-pages .hub-category-item {
  grid-column: span 3;
}

.hub-coloring-pages .hub-category-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  background: transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.hub-coloring-pages .hub-category-item img{
	width:100%;
	height:auto;
	padding: 12px 12px;
	border-radius: 12px;
	border: var(--hub-border);
	box-shadow: var(--hub-shadow);
	background: #fff;
	cursor: pointer;
}
	
.hub-coloring-pages .hub-category-item a:hover img{
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1);
  
}

.hub-coloring-pages .hub-category-icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.hub-coloring-pages .hub-category-label {
  font-weight: 500;
  color: rgba(0,0,0,.78);
  line-height: 1.2;
  text-align: center;
}

/* ===========================
   TRENDING GRID
   =========================== */
.hub-coloring-pages .hub-trending-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--hub-gap);
}

.hub-coloring-pages .hub-trending-item {
  grid-column: span 3;
  border: var(--hub-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--hub-bg);
  box-shadow: var(--hub-shadow);
}

.hub-coloring-pages .hub-trending-item a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.hub-coloring-pages .hub-trending-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.hub-coloring-pages .hub-trending-item h3 {
  margin: 10px 10px 12px;
  font-size: 14px;
  color: rgba(0,0,0,.82);
}

/* ===========================
   AGE GROUPS
   =========================== */
/* =========================
   AGE GROUPS (Like Sample)
   ========================= */

.hub-age-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  margin-top: 20px;
}

.hub-age-card {
	grid-column: span 3;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  padding: 26px 12px 16px;
  border-radius: 16px;
  transition: transform .15s ease, box-shadow .15s ease;
  color: #333;
}

.hub-age-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* avatar */
.hub-age-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -44px;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

.hub-age-avatar img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: contain;
  display: block;
}

/* label */
.hub-age-label {
  margin-top: 12px;
  font-weight: 600;
  font-size: 18px;
}

/* ===== Pastel background (match image) ===== */
.age-preschool { background: #fdebd3; }
.age-kids      { background: #e3f2d9; }
.age-teens     { background: #fff1c9; }
.age-adults    { background: #f0e3f1; }

/* =========================
   Responsive
   ========================= */

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

  .hub-age-avatar {
    margin-top: -36px;
  }
}

/* =========================
   HOW TO USE – STEPS
   ========================= */

.hub-step-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.hub-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 600;
  color: #333;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

.hub-steps .hub-container > p{max-width:700px;text-align:center;margin:0 auto}

/* checkbox */
.hub-step-check {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 6px;
  background: rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
}

/* text */
.hub-step-text {
  flex: 1;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 2.2rem;
}

/* icon right */
.hub-step-icon {
  font-size: 26px;
  opacity: .8;
}

.hub-step-icon img{
	width:50px;
	height:auto
}

/* ===== pastel backgrounds ===== */
.step-blue {
  background: #e6f1f8;
}
.hub-step-check {
  background: #fff;
}

.step-orange {
  background: #fdebd3;
}


.step-green {
  background: #e6f2dc;
}


.step-red {
  background: #f7d7cf;
}


/* =========================
   Responsive
   ========================= */
@media (max-width: 600px) {
  .hub-step-grid {
    grid-template-columns: 1fr;
  }

  .hub-step {
    padding: 12px 14px;
  }
}

/* =========================
   TRUST & CLARITY
   ========================= */

.hub-trust {
  background: #f4f9ff;
  padding: 40px 0;
}

.hub-trust-header {
  max-width: 720px;
  margin-bottom: 26px;
}

.hub-trust p.hub-trust-desc {
  max-width:700px;text-align:center;margin:0 auto
}

/* grid */
.hub-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 20px 0;
}

/* card */
.hub-trust-card {
  background: #fff;
  border-radius: 18px;
  padding: 22px 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hub-trust-icon img{
  width:40px;
  height:auto;
  margin: 0 auto;
}

.hub-trust-card h3 {
  font-size: 2rem;
	font-weight: 500;
	margin: 0;
	color: #046265;
	text-align:center;
}

.hub-trust-card p {
  font-size: 1.6rem;
    color: #333;
    margin: 0;
    line-height: 1.5;
    font-weight: 500;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 900px) {
  .hub-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .hub-trust {
    padding: 32px 0;
  }

  .hub-trust-grid {
    grid-template-columns: 1fr;
  }
}



/* ===========================
   FAQ (simple, readable)
   =========================== */
/* =========================
   FAQ – Accordion (No JS)
   ========================= */

.hub-faq-list {
  display: grid;
  gap: 14px;
  max-width:800px;margin:20px auto;
}

/* details box */
.hub-faq-item {
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #ffffff;
  overflow: hidden;
}

/* summary = question */
.hub-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 1.8rem;
    position: relative;
    color: #333;
}

/* remove default arrow */
.hub-faq-item summary::-webkit-details-marker {
  display: none;
}

/* + / - icon */
.hub-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3.5rem;
  font-weight: 200;
  color: #2f80ed;
  transition: transform .5s ease;
}

/* when open */
.hub-faq-item[open] summary::after {
  content: "–";
}

/* answer */
.hub-faq-answer {
  padding: 16px;
  font-size: 1.6rem;
  color: rgba(0,0,0,.68);
  line-height: 1.6;
  background: #e0f9f5;
    color: #333;
}

/* hover */
.hub-faq-item summary:hover {
  background: rgba(0,0,0,.03);
}

/* mobile */
@media (max-width: 600px) {
  .hub-faq-item summary {
    font-size: 14px;
    padding-right: 42px;
  }
}

/*HUB Printable Coloring Pages*/
.cta-row{ display:flex; gap: 5px; align-items:center; flex-wrap:wrap;flex-direction: column;margin-top:10px }
.cta-row .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 3px 18px;
  border-radius: 999px;
  font-weight: 500;
  text-decoration:none;
  background: linear-gradient(180deg, #ff8a3c 0%, #ff6f3c 100%);
  box-shadow: 0 2px 6px rgba(255, 111, 60, .4);
  color:#fff;
}
.cta-row .btn:hover{box-shadow: 0 4px 10px rgba(255,111,60,.5);background: linear-gradient(180deg, #ff9a4c 0%, #ff5a2c 100%);color:#fff}
.note{
  font-size: 13px;
  color: var(--muted);
}
/***HUB FORMAT***/
.hub-coloring-pages .hub-format{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.hub-format-icon{padding-right:10px}
.hub-coloring-pages .pdf-card{background: #ffeaea9e;}
.hub-coloring-pages .pdf-card::before{
	background:#fda4a4;
}
.hub-coloring-pages .image-card{background: #d4eaff75;}
.hub-coloring-pages .image-card::before{
	background:#9acbfb;
}
.hub-coloring-pages .online-card{background: #fff4d5;}
.hub-coloring-pages .online-card::before{
	background:#ffd86a;
}

/***HUB USE**/
.hub-coloring-pages .hub-use .hub-purpose-card::before{
	height:0;
}
.hub-use-icon svg{margin:0 auto}
.hub-coloring-pages .hub-use .hub-use-title{text-align:center}


/* =========================
/**HUB: COLORING PAGES FO KIDS***/
/* ========== KIDS HERO ========== */
.kids-hub .cta-row .btn{
	background: linear-gradient(180deg, #6fcb49 0%, #449d3e 100%);
    box-shadow: 0 2px 6px rgb(60 255 102 / 40%);
}
.kids-hub .cta-row .btn:hover{
	background: linear-gradient(180deg, #81dd5b 0%, #2d7d28 100%);
	box-shadow: 0 2px 6px rgb(60 255 102 / 30%);
}
/*
.learning-hub{background: #eff5ff;}
.fun-hub{background:#fdebd385}
.school-hub{background:#c1ff8947}
*/
.learning-hub h2,.fun-hub h2, .school-hub h2{
	border-bottom: 1px solid #9fc0c1;
    padding-bottom: 5px;
}

.learning-hub p,.fun-hub p, .school-hub p{
	margin:20px 0;
}
.hub-coloring-pages .learning-hub .hub-category-item,.hub-coloring-pages .fun-hub .hub-category-item,.hub-coloring-pages .school-hub .hub-category-item{
	grid-column: span 4;
}
.hub-coloring-pages .learning-hub .hub-category-item img,.hub-coloring-pages .fun-hub .hub-category-item img,.hub-coloring-pages .school-hub .hub-category-item img{
	padding:3px;
}

.kid-definition{
  background: linear-gradient(180deg,#eaf4ff 0%,#f6fbff 60%,#ffffff 100% );
}
section .hub-two-cols{
	display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 32px;
}
.hub-container-left ol{width:fit-content;margin:0 auto}
.hub-container-left li{
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
	padding-bottom: 8px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 8px;
}
.hub-container-left li:last-child{border:none}
.hub-container-left li img{width:50px;height:auto}
.hub-container-left li p{font-size:2rem;font-weight:500}
.hub-container-right img {
  width: 100%;
  height: auto;
  max-width: 420px;
  display: block;
  margin-left: 0;
  
}
.hub-container-right{position:relative}
.hub-container-right::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 40px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    #ffffff
  );
}

.hub-features-icon img{margin:0 auto}
.hub-features-title h3{color: #045a5d;text-align: center;}
.hub-features-title p{font-size: 1.6rem;color: #2f5355;}
.hub-coloring-pages .hub-features::before{height:0}

.hub-benefit .hub-age-card{
	border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgb(0, 0, 0, .12);
}
.hub-benefit .hub-age-card:hover {
  transform: none;
  box-shadow: 0 4px 10px rgb(0, 0, 0, .12);
}
.hub-benefit .hub-age-card .hub-age-avatar{width:100px;height:90px;margin-top:-60px;box-shadow:none}
.hub-benefit .hub-age-card .hub-age-avatar img{width:100%;height:auto}
.hub-benefit .hub-age-card .hub-age-label{ margin-top: 5px; line-height: 1.4;}

.kids-use-case .hub-step-grid{
	gap: 20px;
    max-width: 900px;
    margin: 20px auto;}
.kids-use-case .hub-step-grid .hub-step{box-shadow:none;flex-direction: column;}
.kids-use-case .hub-step-grid .hub-step .hub-step-title{
	width: 100%;
    text-align: center;
    font-size: 2.3rem;
}
.kids-use-case .hub-step-grid .hub-step .hub-step-text{font-size:1.9rem}

.hub-container-left.hub-power li img{width:32px}
.hub-step-grid.coloring-steps{grid-template-columns: repeat(4, 1fr);}
.hub-step-grid.coloring-steps .hub-step img{width:50px}
.hub-upload .hub-format-icon{padding:0}
.hub-upload .hub-format-icon img{width:50px;height:auto;max-width:50px}
.hub-coloring-pages .hub-upload .hub-purpose-card::before{height:0}
.hub-enjoy .hub-age-card .hub-age-avatar{width:64px;height:64px}
.hub-enjoy .hub-age-card .hub-age-avatar img{background:#eee}
.hub-online .hub-trust-card p{text-align:center;font-size:1.8rem}
.footer-seo-links{padding-bottom: 0px;}
.footer-seo{
  border-top:1px solid #eee;
  padding:15px 0;
  text-align:center;
}

.footer-seo a{
  margin:0 8px;
  font-size:15px;
  text-decoration:none;font-weight: 600;display: inline-block;
}

.footer-seo a:hover{
  text-decoration:underline;
}

.cta-wrap {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding:10px;
}

/* Base */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 15px;
  border-radius: 30px;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transition: all 0.25s ease;
}

/* Browse – vàng cam giống Printable */
 .cta-btn.online{
  background: linear-gradient(180deg, #fbd138, #ffaf4b);
  border: 1px solid #fff5d3;
}

/* Online – xanh lá giống Online Coloring */
.cta-btn.browse{
    background: linear-gradient(180deg, #80d75c, #48b11c);
    color: #ffffff;
    border: 1px solid #e4ffd9;
}

/* Hover */
.cta-btn:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  color:#fff;
}
/* ====== TEMPLATE TWO COLUMNS ====== */
main#site-content{background:#fff !important}
#view-all-btn{display:none}
.button-bottom-image{height:40px !important}
.button-bottom-image > div{height:100%}
.button-bottom-image > div a{line-height:36px;font-weight:600 !important}
	/* ====== 2 COLUMN LAYOUT ====== */
.layout-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 335px;
  align-items: start;
  gap: 60px;
    align-items: start;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

.featured img{margin:5px auto 15px}

.layout-2col .featured h1{background:#fff;padding:15px 0}

.main-content {
  min-width: 0;
}

.layout-2col .listItems{margin:0 auto}

.sidebar-content {
  position: sticky;
  top: 90px;
}

/* ====== SIDEBAR BOX ====== */
.sidebar-box {
  background: #f8fbff;
  border: 1px solid #cfe3ff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}

.sidebar-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f4fd8;
  margin-bottom: 12px;
  margin-top:0;
  padding: 10px 12px;
  border-radius: 8px;
  background: linear-gradient(90deg,#e6f0ff,#ffffff);
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #0d7684 0%, #3ebfd0 100%);
  color: #fff;
  text-transform: uppercase;
}

/* icons */
.sidebar-title.flame::before { content: "🔥"; margin-right:5px}
.sidebar-title.star::before { content: "⭐"; margin-right:5px}
.sidebar-title.new::before { content: "⚡"; margin-right:5px}

/* ====== SIDEBAR GRID ====== */
.related-grid{
	display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0px;
}
.listItems .ntbox{padding:10px}
.sidebar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sidebar-grid .ntboxs {
  margin: 0;
}

.sidebar-grid img {
    width: 100%;
    height: auto;
    border-radius: 3px;
    padding: 2px;
    border: 1px solid #e2e2e2;
    background: #fff;
}
.sidebar-grid .ntboxs:hover img {
	box-shadow: 0 0 5px 0 rgb(5 5 5 / 29%);
}
.sidebar-grid .textBox{
	text-align:center;
	margin:8px auto;
}

.sidebar-grid .textBox a{
	color:#333;
	font-size:16px;
	font-weight:500;
	line-height: 24px;
    display: block;
}
.sidebar-grid .ntboxs:hover a{
	color:#067d81;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 1024px) {
  .layout-2col {
    grid-template-columns: 1fr;
  }
  .sidebar-content {
    position: static;
  }
}

/* ===== GALLERY: 2 COLUMNS ===== */
.listItems.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* đảm bảo item không phá layout */
.listItems.gallery .ntboxs {
  width: 100%;
  margin: 0;
}

@media (min-width: 1025px) and (max-width: 1100px) {
	.related-grid {
	  grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 700px) and (max-width: 1024px) {
	.sidebar-grid {
	  grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}
/* ===== MOBILE: 1 COLUMN ===== */
@media (max-width: 699px) {
	.related-grid{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 578px) {
  .listItems.gallery {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sidebar-grid {
	  grid-template-columns: 1fr 1fr;
	}
  
}



@media (max-width: 700px) {
  section .hub-two-cols{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hub-container-right img {
    margin: 24px auto 0;
  }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
  .kids-hero__container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .kids-hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .kids-hero__image img {
    margin: 24px auto 0;
  }
  .hub-step-grid.coloring-steps{grid-template-columns: repeat(2, 1fr);}
}

/* =========================
   Mobile
   ========================= */



/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 960px) {
  .hub-coloring-pages .hub-purpose-card { grid-column: span 4; }
  .hub-coloring-pages .hub-category-item { grid-column: span 6; }
  .hub-coloring-pages .hub-trending-item { grid-column: span 6; }
  .hub-coloring-pages .hub-age-card { grid-column: span 6; }
  .hub-coloring-pages .hub-age-grid {gap:40px}
  .hub-coloring-pages .learning-hub .hub-category-item,.hub-coloring-pages .fun-hub .hub-category-item,.hub-coloring-pages .school-hub .hub-category-item{
	grid-column: span 6;
	}
  .hub-coloring-pages .home-core .hub-category-item {
        grid-column: span 3;
    }
}

@media (max-width: 700px) {
  .hub-coloring-pages .hub-container { padding-inline: 12px; }

  .hub-coloring-pages .hub-purpose-grid,
  .hub-coloring-pages .hub-category-grid,
  .hub-coloring-pages .hub-trending-grid{
    gap: 30px;
  }
 
  .hub-coloring-pages .hub-purpose-card { grid-column: span 12; }
  .hub-coloring-pages .hub-category-item { grid-column: span 12; }
  .hub-coloring-pages .hub-trending-item { grid-column: span 12; }
  .hub-coloring-pages .hub-age-card { grid-column: span 12; }

  .hub-coloring-pages .hub-trending-item img { height: 120px; }
  
}

@media (max-width: 600px) {
  .hub-faq-list dt {
    font-size: 14px;
    padding-right: 40px;
  }

  .hub-faq-list dd {
    font-size: 14px;
  }
  .hub-coloring-pages .learning-hub .hub-category-item,.hub-coloring-pages .fun-hub .hub-category-item,.hub-coloring-pages .school-hub .hub-category-item{
	grid-column: span 12;
	}
	.hub-step-grid.coloring-steps{grid-template-columns: repeat(1, 1fr);}
	  .hub-coloring-pages .home-core .hub-category-item {
        grid-column: span 6;
    }
}

@media (max-width: 480px) {
  .action-buttons {
    flex-direction: column;
  }
}