/* =========================================================
   MikSoftware — trang doanh nghiệp (index.html)
   ========================================================= */

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  background: var(--dark); color: #fff; overflow: hidden;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.hero::before { /* vignette */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 70% 40%, transparent 0%, rgba(18,18,18,0.55) 55%, rgba(18,18,18,0.95) 100%),
    linear-gradient(180deg, rgba(18,18,18,0.3), rgba(18,18,18,0) 30%, rgba(18,18,18,0.6));
}
.hero-mark {
  position: absolute; z-index: 1; right: 6vw; top: 50%; width: min(46vw, 620px); aspect-ratio: 1;
  transform: translateY(-50%); opacity: 0.22; pointer-events: none;
  animation: floatMark 9s ease-in-out infinite;
}
@keyframes floatMark { 50% { transform: translateY(-53%) rotate(-3deg); } }

.hero .container { position: relative; z-index: 2; max-width: none; }
.hero-title { font-size: clamp(52px, 10.5vw, 168px); }
.hero-title .line { display: block; }
.hero-title .were { position: relative; display: inline-block; }
.hero-title .were .bubble { position: absolute; left: calc(100% + 0.1em); top: -0.15em; font-size: 0.34em; }
.typing { white-space: nowrap; }
.typing .bracket { color: #fff; font-weight: 400; }
.typing .word { color: #6d6d6d; }
.typing .semi { color: var(--accent); }
.typing .caret {
  display: inline-block; width: 0.08em; height: 0.82em; background: #fff; margin-left: 0.04em;
  vertical-align: -0.05em; animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.hero-sub { margin-top: clamp(28px, 4vw, 48px); font-size: clamp(13px, 1.3vw, 17px); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #b9b9b9; max-width: 640px; }
.hero-sub b { color: #fff; }
.scroll-hint {
  position: absolute; z-index: 2; left: 50%; bottom: 34px; transform: translateX(-50%);
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.scroll-hint::after { content: ""; width: 1px; height: 46px; background: linear-gradient(#fff, transparent); animation: drip 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { opacity: 0; } }

/* ---------- VALUES (draggable card slider) ---------- */
.values { padding: clamp(80px, 11vw, 150px) 0 clamp(60px, 8vw, 110px); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2 { font-size: clamp(40px, 6.4vw, 96px); color: var(--ink); }
.section-head h2 .dim { color: #b5b5b0; }
.section-head p { max-width: 420px; color: #666; font-size: 15px; }

.drag-row {
  display: flex; gap: clamp(16px, 2vw, 28px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 10px var(--gutter) 30px; cursor: grab; user-select: none;
}
.drag-row::-webkit-scrollbar { display: none; }
.drag-row.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.drag-row.is-dragging * { pointer-events: none; }
.value-card {
  flex: 0 0 clamp(280px, 30vw, 420px); scroll-snap-align: start;
  background: var(--card); border-radius: 24px; padding: clamp(28px, 3vw, 44px);
  min-height: 380px; display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.value-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.25); }
.value-card .num { font-size: 13px; font-weight: 800; color: var(--accent); }
.value-card h3 { margin: 14px 0 18px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 900; text-transform: uppercase; color: var(--ink); letter-spacing: -0.01em; }
.value-card p { color: #555; font-size: 15px; }
.value-card .icon { margin-top: auto; padding-top: 30px; width: 54px; height: 54px; color: var(--accent); }
.drag-progress { margin: 8px var(--gutter) 0; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.drag-progress span { position: absolute; inset: 0 auto 0 0; width: 20%; background: var(--ink); transition: transform 0.15s linear; }

/* ---------- SERVICES ---------- */
.services { padding: clamp(60px, 8vw, 120px) 0; }
.service-list { border-top: 2px solid var(--ink); }
.service {
  display: grid; grid-template-columns: 90px 1.1fr 1.4fr 60px; gap: 24px; align-items: center;
  padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line);
  position: relative; transition: color 0.3s;
}
.service::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--ease); z-index: -1; border-radius: 4px; }
.service:hover { color: #fff; }
.service:hover::before { transform: scaleY(1); }
.service:hover p { color: #bdbdbd; }
.service { isolation: isolate; padding-left: 12px; padding-right: 12px; }
.service .idx { font-size: 14px; font-weight: 800; color: var(--accent); }
.service h3 { font-size: clamp(24px, 3vw, 44px); font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -0.02em; }
.service p { color: #666; font-size: 15px; transition: color 0.3s; }
.service .arrow { justify-self: end; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; transform: rotate(-45deg) scale(0.8); opacity: 0; transition: 0.4s var(--ease); }
.service:hover .arrow { opacity: 1; transform: none; }
.service .arrow svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .service { grid-template-columns: 50px 1fr; }
  .service p { grid-column: 2; }
  .service .arrow { display: none; }
}

/* ---------- STORYTELLING (kinetic letter-spacing on scroll) ---------- */
.story { position: relative; height: 220vh; }
.story-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.story-type { --p: 0; text-align: right; font-size: clamp(32px, 7.2vw, 124px); white-space: nowrap; }
.story-type .l1 { color: #a9a9a5; }
.story-type .l2 { color: var(--ink); }
.story-type .spread { letter-spacing: calc(var(--p) * 0.24em); transition: letter-spacing 0.1s linear; }
.story-type .l1 .spread { color: #c9c9c4; }
.story-type .l2 .spread { color: var(--ink); }

/* ---------- HISTORY ---------- */
.history { padding: 0 0 clamp(80px, 10vw, 140px); }
.history .container { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 100px); }
.history-title { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
.history-title h2 { font-size: clamp(44px, 6vw, 92px); color: var(--ink); }
.history-title p { margin-top: 20px; color: #666; max-width: 340px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline .year { font-size: clamp(28px, 3vw, 40px); font-weight: 900; color: var(--ink); line-height: 1; }
.timeline .year small { display: block; font-size: 12px; color: var(--accent); font-weight: 800; margin-top: 8px; letter-spacing: 0.06em; }
.timeline h4 { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.timeline p { color: #666; font-size: 15px; }
@media (max-width: 860px) {
  .history .container { grid-template-columns: 1fr; }
  .history-title { position: static; }
  .timeline li { grid-template-columns: 80px 1fr; }
}

/* ---------- SUCCESS (dark parallax band) ---------- */
.success { position: relative; background: var(--dark); color: #fff; padding: clamp(110px, 16vw, 220px) 0; overflow: hidden; }
.success-bg { position: absolute; inset: -20% 0; opacity: 0.5; }
.success-bg svg { width: 100%; height: 100%; }
.success .container { position: relative; }
.success p.eyebrow { color: var(--accent); margin-bottom: 22px; }
.success h2 { font-size: clamp(36px, 6.4vw, 100px); }
.success h2 .dim { color: #5a5a5a; }
.stats { margin-top: clamp(60px, 8vw, 100px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid #2f2f2f; padding-top: 36px; }
.stat b { display: block; font-size: clamp(36px, 4.6vw, 68px); font-weight: 900; line-height: 1; }
.stat b sup { color: var(--accent); font-size: 0.45em; }
.stat > span { display: block; margin-top: 10px; color: #9a9a9a; font-size: 14px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } }

/* ---------- NEWS ---------- */
.news { padding: clamp(90px, 12vw, 160px) 0 clamp(60px, 8vw, 100px); }
.news .container { display: grid; grid-template-columns: 1fr 2.2fr; gap: clamp(32px, 6vw, 90px); }
.news-title h2 { font-size: clamp(44px, 5.6vw, 84px); color: #9d9d98; }
.news-title h2 .bubble { font-size: 0.3em; }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-item { display: grid; grid-template-columns: 100px 1fr; gap: 24px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.news-item:first-child { padding-top: 0; }
.news-date span { display: block; font-size: 12px; color: #999; font-weight: 700; }
.news-date b { display: block; font-size: 44px; font-weight: 900; color: var(--ink); line-height: 1.1; }
.news-item h3 { font-size: clamp(17px, 1.5vw, 20px); font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.news-item h3 a { background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size 0.4s var(--ease); }
.news-item h3 a:hover { background-size: 100% 2px; }
.news-item p { color: #666; font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; }
@media (max-width: 860px) {
  .news .container { grid-template-columns: 1fr; }
  .news-item { grid-template-columns: 70px 1fr; }
  .news-date b { font-size: 34px; }
}

/* ---------- MARQUEE ---------- */
.marquee { overflow: hidden; white-space: nowrap; padding: 30px 0; }
.marquee-track { display: inline-flex; animation: marquee 28s linear infinite; }
.marquee-track span { font-size: clamp(56px, 10vw, 160px); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; padding-right: 0.4em; line-height: 1; }
.marquee.is-outline span { color: transparent; -webkit-text-stroke: 2px #c8c8c3; }
.marquee.is-reverse .marquee-track { animation-direction: reverse; }
.marquee.on-dark span { color: #262626; -webkit-text-stroke: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- GAMES TEASER (rotating 3D card) ---------- */
.teaser { background: var(--dark); color: #fff; padding: 20px 0; overflow: hidden; position: relative; }
.teaser-stage { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; padding: 40px var(--gutter); min-height: 70vh; }
.teaser-copy h2 { font-size: clamp(36px, 5vw, 76px); }
.teaser-copy p { color: #a7a7a7; margin: 22px 0 32px; max-width: 360px; }
.teaser-copy.right { justify-self: end; text-align: right; }
.teaser-copy.right p { margin-left: auto; }
.spin { perspective: 1200px; }
.spin-card {
  width: clamp(200px, 22vw, 300px); aspect-ratio: 9 / 16; border-radius: 26px; position: relative;
  transform-style: preserve-3d; animation: spin 9s linear infinite;
}
.spin-card .face {
  position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden; box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8), inset 0 0 0 4px rgba(255,255,255,0.08);
}
.spin-card .back { transform: rotateY(180deg); }
.spin-card svg { width: 100%; height: 100%; }
@keyframes spin { to { transform: rotateY(360deg); } }
@media (max-width: 900px) {
  .teaser-stage { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .teaser-copy.right { justify-self: center; text-align: center; }
  .teaser-copy p, .teaser-copy.right p { margin-left: auto; margin-right: auto; }
}

/* ---------- MOTTO (scramble text) ---------- */
.motto { padding: clamp(100px, 14vw, 200px) 0; }
.motto + .motto { padding-top: 0; }
.motto h2 { font-size: clamp(34px, 6vw, 92px); color: var(--ink); min-height: 1.9em; }
.motto h2 .dim { color: #b5b5b0; }
.motto .copy { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 980px; color: #555; }
.motto.is-right { text-align: right; }
.motto.is-right .copy { margin-left: auto; text-align: left; }
@media (max-width: 760px) { .motto .copy { grid-template-columns: 1fr; } }

/* ---------- Mobile hero tweaks ---------- */
@media (max-width: 600px) {
  .hero-canvas { opacity: 0.3; }
  .hero-title .typing { font-size: 0.6em; margin-top: 0.15em; }
  .hero-mark { width: 80vw; right: -10vw; opacity: 0.16; }
}
.spin-card img { width: 100%; height: 100%; object-fit: cover; }

.news-date.is-tag b { font-size: 30px; line-height: 1.3; }