/* 01-core.css */
:root{
  --btn-h: 44px;
  --btn-r: 8px;
  --btn-pad-x: 18px;

  --btn-a: #38bdf8;
  --btn-b: #2563eb;

  --btn-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
  --btn-shadow-hover: 0 6px 20px rgba(37, 99, 235, 0.38);
}

._s02TpC8{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:var(--btn-h);
  padding:0 var(--btn-pad-x);
  box-sizing:border-box;
  border-radius:var(--btn-r);
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:800;
  font-size:.95rem;
  line-height:1;
  letter-spacing:0;
  text-decoration:none;
  white-space:nowrap;
  border:0;
  cursor:pointer;
  user-select:none;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.kuma-btn--primary{
  color:#fff;
  background:linear-gradient(135deg,var(--btn-a),var(--btn-b));
  box-shadow:var(--btn-shadow);
}
.kuma-btn--primary:hover{
  transform:translateY(-1px);
  background: linear-gradient(135deg, #60c8f8, #3b82f6);
  box-shadow:var(--btn-shadow-hover);
}
.kuma-btn--primary:active{
  transform:translateY(0);
  filter:brightness(.98);
}

/* nút phụ (tư vấn) */
.kuma-btn--ghost{
  color:rgba(15,23,42,.85);
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:0 12px 26px rgba(15,23,42,.10);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}
.kuma-btn--ghost:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
}

/* Secondary hero CTA: glass button for dark/visual hero sections */
.kuma-btn--secondary,
._s02TpC8.kc-btn--secondary{
  color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:none;
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  backdrop-filter:blur(8px) saturate(120%);
}
.kuma-btn--secondary:hover,
._s02TpC8.kc-btn--secondary:hover{
  color:#fff;
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.42);
  transform:translateY(-1px);
}

._s02TpC8 ._XS-q0qO,
.kc-btn--primary ._XS-q0qO,
.kc-btn--secondary ._XS-q0qO{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  padding:7px;
  margin-right:-2px;
  border-radius:8px;
  box-sizing:border-box;
}

._s02TpC8 ._XS-q0qO img,
.kc-btn--primary ._XS-q0qO img,
.kc-btn--secondary ._XS-q0qO img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.kuma-btn--primary ._XS-q0qO,
.kc-btn--primary ._XS-q0qO{
  background:rgba(30,64,175,.32);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.18);
}

.kuma-btn--secondary ._XS-q0qO,
._s02TpC8.kc-btn--secondary ._XS-q0qO,
.kc-btn--secondary ._XS-q0qO{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}

/* === Tabs common === */
.dxp2-tabs {
  display: flex !important;
  align-items: center;
  justify-content: center;

  width: fit-content !important;
  max-width: 100%;
  margin: 0 auto 32px !important;

  padding: 8px 10px;
  gap: 18px;

  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.25));
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 8px 22px rgba(36, 74, 140, 0.12);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  overflow-x: auto;
  scrollbar-width: none;
}

.dxp2-tabs::-webkit-scrollbar { display: none; }
.dxp2-tabs::after { display: none !important; }

.dxp2-tabs .tab {
  background: transparent;
  border: none;

  padding: 10px 18px;
  border-radius: 9999px;

  color: #1e293b;
  font-weight: 700;
  font-size: 1rem;

  white-space: nowrap;
  cursor: pointer;
  transition: background .25s, color .25s, box-shadow .25s;
}

.dxp2-tabs .tab:hover { background: rgba(255,255,255,0.22); }

.dxp2-tabs .tab.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 5px 16px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.95);
}

/* underline active */
.dxp2-tabs .tab.active::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 2px;
  height: 1.5px;
  border-radius: 3px;
  background: linear-gradient(90deg,#1e3a8a,#2563eb);
}

/* === Pane common === */
.dxp2-pane { display: none; animation: fadeIn .3s ease; }
.dxp2-pane.active { display: block; }

/* === Grid common (3 col) === */
.dxp2-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

/* Responsive grid */
@media (min-width: 641px) and (max-width: 1024px) {
  .dxp2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dxp2-grid { grid-template-columns: 1fr; }
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* =========================================================
   KumaClouds Unified Tabs (_4csxp1B)
   - Base class for all sections (SSL, WS, MCS, etc.)
   - Ensures consistent styling and behavior
   ========================================================= */
._4csxp1B {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 18px 50px rgba(2,8,23,0.06);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 32px;
  
  /* Scrollable when tabs overflow */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

._4csxp1B::-webkit-scrollbar { display: none; }

._YRlz463 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 800;
  font-size: 13px;
  color: rgba(15,23,42,0.75);
  cursor: pointer;
  
  /* Prevent text wrapping */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;

  gap: 10px;
  
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}

._YRlz463:hover {
  background: rgba(255,255,255,0.35);
  color: rgba(15,23,42,0.85);
}

/* Active state - using aria-selected for accessibility */
._YRlz463[aria-selected="true"],
._YRlz463.is-active {
  background: rgba(255,255,255,0.95);
  color: rgba(15,23,42,0.92);
  border-color: rgba(15,23,42,0.10);
  box-shadow: 0 10px 22px rgba(2,8,23,0.08);
}

/* Focus-visible for keyboard navigation */
._YRlz463:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

/* =========================================================
   Tabs — Mobile & Tablet (max-width: 1024px)
   White card container + icon-above-label + solid blue active
   ========================================================= */
@media (max-width: 1024px) {
  /* Container: white card */
  ._4csxp1B,
  .dxp2-tabs,
  .ssl-tabs,
  .ams-cloud-tabs,
  .ai-solution-tabs {
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, 0.07) !important;
    box-shadow: 0 2px 16px rgba(15, 23, 42, 0.07) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 8px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 20px !important;
  }

  /* Tab items: icon + label stacked, fill space when few tabs */
  ._YRlz463,
  .dxp2-tabs .tab,
  .ssl-tabs .tab,
  .ams-cloud-tabs .tab,
  .ams-cloud-tabs button,
  .ai-solution-tabs .tab {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: auto !important;
    min-height: 62px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    color: #64748b !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    min-width: max-content !important;
  }

  /* Icon inside tab */
  ._YRlz463 svg,
  .dxp2-tabs .tab svg,
  .ssl-tabs .tab svg,
  .ams-cloud-tabs .tab svg,
  .ams-cloud-tabs button svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    color: #94a3b8;
  }

  /* Active: solid blue */
  ._YRlz463[aria-selected="true"],
  ._YRlz463.is-active,
  .dxp2-tabs .tab.active,
  .dxp2-tabs .tab.is-active,
  .ssl-tabs .tab.is-active,
  .ssl-tabs .tab[aria-selected="true"],
  .ams-cloud-tabs .tab.active,
  .ams-cloud-tabs .tab.is-active,
  .ams-cloud-tabs button.active,
  .ai-solution-tabs .tab.active {
    background: linear-gradient(145deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%) !important;
    color: #fff !important;
    border-color: rgba(29, 78, 216, 0.35) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
  }

  /* Active icon: white */
  ._YRlz463[aria-selected="true"] svg,
  ._YRlz463.is-active svg,
  .dxp2-tabs .tab.active svg,
  .dxp2-tabs .tab.is-active svg,
  .ssl-tabs .tab.is-active svg,
  .ssl-tabs .tab[aria-selected="true"] svg,
  .ams-cloud-tabs .tab.active svg,
  .ams-cloud-tabs .tab.is-active svg,
  .ams-cloud-tabs button.active svg,
  .ai-solution-tabs .tab.active svg {
    color: #fff !important;
  }

  /* Remove underline accent */
  ._YRlz463[aria-selected="true"]::after,
  ._YRlz463.is-active::after,
  .dxp2-tabs .tab.active::after,
  .dxp2-tabs .tab.is-active::after,
  .ssl-tabs .tab.is-active::after,
  .ssl-tabs .tab[aria-selected="true"]::after,
  .ams-cloud-tabs .tab.active::after,
  .ams-cloud-tabs button.active::after,
  .ai-solution-tabs .tab.active::after {
    display: none !important;
  }
}

/* === Page navigation progress bar === */
#kc-page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  opacity: 0;
  background: linear-gradient(90deg, #38bdf8, #2563eb);
  z-index: 99999;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  will-change: width, opacity;
}