/* ===== danh-de-online.css ===== */
/* ===== Hero Section ===== */
.page-danh-de-online__hero-section{padding-top:10px}
.page-danh-de-online__hero-image-wrapper{width:100%}
.page-danh-de-online__hero-image{width:100%;height:auto;aspect-ratio:17/5;object-fit:cover;display:block;border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.page-danh-de-online__hero-content{padding:24px 16px 16px;display:flex;flex-direction:column;gap:12px}
.page-danh-de-online__hero-title{color:#C91F17;font-size:clamp(1.5rem, 4vw, 2.2rem);font-weight:900;line-height:1.25;max-width:12em;text-shadow:0 2px 4px rgba(255,255,255,0.5)}
.page-danh-de-online__hero-description{color:#333333;font-size:1.1rem;line-height:1.6;max-width:60ch}
.page-danh-de-online__hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.page-danh-de-online__btn{display:inline-block;padding:12px 28px;border-radius:999px;font-weight:800;text-decoration:none;transition:transform .15s ease, opacity .15s;border:2px solid transparent;text-align:center}
.page-danh-de-online__btn:hover{transform:translateY(-2px);opacity:.95}
.page-danh-de-online__btn--primary{background:linear-gradient(180deg, #FFD86A 0%, #E6B800 100%);color:#3B2E00;box-shadow:0 4px 12px rgba(255,216,106,0.3)}
.page-danh-de-online__btn--secondary{background:#FFFFFF;color:#C91F17;border-color:#C91F17}
@media (max-width:768px){
  .page-danh-de-online__hero-image-wrapper{margin:0}
  .page-danh-de-online__hero-image{aspect-ratio:2/1;border-radius:12px}
  .page-danh-de-online__hero-content{padding:16px 12px}
  .page-danh-de-online__hero-title{font-size:1.4rem}
  .page-danh-de-online__hero-description{font-size:0.9rem}
  .page-danh-de-online__hero-actions{flex-direction:column}
  .page-danh-de-online__btn{max-width:100%;width:auto;white-space:normal;word-wrap:break-word;box-sizing:border-box}
}
/* ===== Trusted & Logo Grid ===== */
.page-danh-de-online__trusted-section{padding:24px 16px}
.page-danh-de-online__trusted-inner{max-width:1200px;margin:0 auto}
.page-danh-de-online__trusted-text{text-align:center;color:#333333;font-weight:600;margin-bottom:16px}
.page-danh-de-online__logo-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px 16px}
.page-danh-de-online__logo-item{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:280px;background:#ffffff;border-radius:16px;padding:12px;box-shadow:0 4px 16px rgba(0,0,0,0.05)}
.page-danh-de-online__logo-item:nth-child(5){grid-column:2}
.page-danh-de-online__logo-item:nth-child(6){grid-column:3}
.page-danh-de-online__logo-image{width:100%;height:auto;aspect-ratio:2/1;object-fit:contain}
@media (max-width:1024px){
  .page-danh-de-online__logo-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .page-danh-de-online__logo-item:nth-child(5){grid-column:auto}
  .page-danh-de-online__logo-item:nth-child(6){grid-column:auto}
}
@media (max-width:768px){
  .page-danh-de-online__logo-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .page-danh-de-online__logo-item:nth-child(5){grid-column:auto}
  .page-danh-de-online__logo-item:nth-child(6){grid-column:auto}
  .page-danh-de-online__logo-image{max-width:160px}
}
/* ===== Guide Section ===== */
.page-danh-de-online__guide-section{padding:16px 0 48px}
.page-danh-de-online__guide-inner{max-width:1000px;margin:0 auto;padding:0 16px}
.page-danh-de-online__guide-title{text-align:center;color:#C91F17;font-weight:900;line-height:1.2;margin-bottom:16px}
.page-danh-de-online__guide-intro{color:#333333;line-height:1.6;text-align:center;margin-bottom:16px;font-size:1rem}
.page-danh-de-online__guide-item{background:#fff;border:1px solid #f2b544;border-radius:12px;padding:16px 20px;margin-bottom:12px;font-size:0.95rem;color:#333333;box-shadow:0 2px 10px rgba(0,0,0,0.05)}
.page-danh-de-online__guide-item summary{cursor:pointer;font-weight:700;color:#333333;display:flex;justify-content:space-between;align-items:center;list-style:none}
.page-danh-de-online__guide-item p{margin-top:8px;line-height:1.65}
.page-danh-de-online__guide-toggle{display:inline-flex;align-items:center;justify-content:center;background:#C91F17;color:#fff;border-radius:50%;width:24px;height:24px;font-weight:900;font-size:1.2rem;flex-shrink:0}
.page-danh-de-online__guide-item a{color:#C91F17;font-weight:600;text-decoration:underline}
/* ===== Features ===== */
.page-danh-de-online__features-section{padding:48px 16px;background:#B71C1C;border-radius:24px;margin:0 16px 48px}
.page-danh-de-online__features-inner{max-width:1200px;margin:0 auto}
.page-danh-de-online__features-title{color:#FFF5E1;text-align:center;font-size:clamp(1.5rem, 4vw, 2.2rem);font-weight:900;margin-bottom:24px}
.page-danh-de-online__features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.page-danh-de-online__feature-card{background:#D32F2F;border:1px solid #F2B544;border-radius:12px;padding:20px;transition:transform .2s ease;box-shadow:0 0 15px rgba(255,204,102,0.2)}
.page-danh-de-online__feature-title{color:#FFF5E1;font-size:1.1rem;font-weight:800;margin-bottom:8px}
.page-danh-de-online__feature-text{color:#FFF5E1;line-height:1.6;font-size:0.9rem}
@media (max-width:768px){
  .page-danh-de-online__features-section{margin:0 0 24px;border-radius:0;padding:24px 16px}
  .page-danh-de-online__features-grid{grid-template-columns:1fr;gap:16px}
  .page-danh-de-online__feature-card{padding:16px}
}
/* ===== Games ===== */
.page-danh-de-online__games-section{padding:24px 16px 48px}
.page-danh-de-online__games-title{color:#C91F17;text-align:center;font-weight:900;margin-bottom:16px}
.page-danh-de-online__games-description{color:#333333;text-align:center;max-width:70ch;margin:0 auto 24px;line-height:1.6}
.page-danh-de-online__topic-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;max-width:1200px;margin:0 auto}
.page-danh-de-online__topic-card{background:#fff;border:1px solid #F2B544;border-radius:16px;padding:12px;text-align:center;transition:transform .2s;box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.page-danh-de-online__topic-card:hover{transform:translateY(-4px)}
.page-danh-de-online__topic-image{width:100%;height:auto;border-radius:12px;margin-bottom:12px}
.page-danh-de-online__topic-title a{color:#C91F17;text-decoration:none;font-weight:800;font-size:1rem}
.page-danh-de-online__topic-title a:hover{text-decoration:underline}
.page-danh-de-online__topic-text{color:#333333;font-size:0.9rem;line-height:1.5}
@media (max-width:1024px){
  .page-danh-de-online__topic-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .page-danh-de-online__topic-grid{grid-template-columns:1fr}
}
/* ===== Learning ===== */
.page-danh-de-online__learning-section{padding:40px 16px;background:linear-gradient(180deg,#B71C1C,#7A0E0E);border-radius:24px;margin:0 16px}
.page-danh-de-online__learning-title{color:#FFF5E1;text-align:center;font-weight:900;font-size:clamp(1.4rem, 3vw, 2rem);margin-bottom:12px}
.page-danh-de-online__learning-description{color:#FFF5E1;text-align:center;max-width:75ch;margin:0 auto 20px;line-height:1.65}
.page-danh-de-online__learning-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;max-width:1200px;margin:0 auto 20px}
.page-danh-de-online__learning-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.1);transition:transform .2s}
.page-danh-de-online__learning-card:hover{transform:scale(1.02)}
.page-danh-de-online__learning-image{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;display:block}
.page-danh-de-online__learning-title-card a{display:block;padding:12px;color:#333333;text-decoration:none;font-weight:700;line-height:1.4}
.page-danh-de-online__learning-title-card a:hover{color:#C91F17}
.page-danh-de-online__learning-actions{text-align:center}
.page-danh-de-online__learning-actions .page-danh-de-online__btn--primary{background:#F4D34D;color:#1a0f00;border:1px solid #E6B800}
@media (max-width:1024px){
  .page-danh-de-online__learning-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .page-danh-de-online__learning-section{margin:0 0;border-radius:0;padding:24px 16px}
  .page-danh-de-online__learning-grid{grid-template-columns:1fr}
  .page-danh-de-online__learning-btn{max-width:100%}
}
/* Global mobile image constraints */
@media (max-width:768px){
  .page-danh-de-online img{max-width:100% !important;height:auto !important}
  .page-danh-de-online{max-width:100%;overflow-x:hidden}
}