/* =========================================================
   Microsoft Office bản quyền — styles riêng (dùng kèm banquyen.css)
   ========================================================= */

/* ============================ HERO (195:4568) ============================ */
.ofc-hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-bg); /* #c5e0f5 theo Figma */
}
/* Windows swirl góc dưới trái (image 7) — xoay + lật như Figma */
.ofc-hero-wave {
  position: absolute;
  z-index: 0;
  width: 64vw;
  left: -20vw;
  bottom: -34%;
  opacity: 0.7;
  transform: rotate(-155.4deg) scaleY(-1);
  transform-origin: center center;
  pointer-events: none;
}
.ofc-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 642px) minmax(0, 798px);
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 721px;
}
.ofc-hero-content {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 32px 0;
}
.ofc-hero-brand {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", "SF Pro Display", system-ui, sans-serif;
  line-height: 0.9;
  color: var(--win-blue); /* #0094fc theo Figma */
}
.ofc-hero-brand .ms {
  font-size: clamp(52px, 7.7vw, 111px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ofc-hero-brand .office {
  font-size: clamp(84px, 12.5vw, 180px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ofc-hero-sub {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: 0.4px;
  color: var(--text);
  white-space: nowrap;
}
.ofc-hero-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.ofc-hero-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
}
.ofc-hero-list img { width: 16px; height: 16px; }

/* --- Hero visual: 1 ảnh composite duy nhất (br-02) như Figma --- */
.ofc-hero-visual {
  position: relative;
  z-index: 1;
  width: min(100%, 798px);
  justify-self: end;
}
.ofc-hero-visual img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* ============================ MODEL MEDIA (dùng lại .bq-model-media) =======
   Figma 205:6295 — media lấp đầy chiều cao còn lại của card (flex),
   ảnh sản phẩm crop theo đúng thiết kế. */
.bq-model-media.ofc-media { height: 299px; }
.bq-model-media.ofc-media img { object-position: center; }
/* Card vĩnh viễn: crop lên trên để chỉ khoe 2 hộp Office, cắt chữ "WIN 10 X 11 PRO" dưới ảnh gốc */
.bq-model-media.ofc-media.is-perpetual img { object-position: center 24%; }

/* ============================ SECTION 5 — bảng giá thuê bao dạng slider (195:6009) === */
.ofc-sub-slider {
  width: 100%;
  display: grid;
  gap: 32px;
  justify-items: center;
}
.ofc-sub-viewport {
  width: 100%;
  overflow: hidden;
}
.ofc-sub-track {
  display: flex;
  transition: transform 0.45s ease;
  touch-action: pan-y;
}
.ofc-sub-slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 16px; /* chừa chỗ cho đổ bóng của bảng, tránh bị cắt trong viewport */
}
.ofc-sub-slide .bq-ent-table-wrap { margin: 0; }
/* Logo Microsoft 365 cạnh "Tiêu chí" — to & nghiêng như Figma (~121px, -9deg) */
.ofc-ent-logo {
  width: 120px;
  height: auto;
  transform: rotate(-9deg);
}
.ofc-sub-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ofc-sub-dot {
  width: 20px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d5dbe3;
  cursor: pointer;
  transition: background-color 0.25s ease, width 0.25s ease;
}
.ofc-sub-dot.is-active {
  width: 28px;
  background: var(--primary);
}
.ofc-sub-dot:not(.is-active):hover { background: #b9c2cd; }

/* dấu check xanh (dữ liệu demo slide 2) */
.ofc-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--primary);
  border-radius: 50%;
  color: var(--primary);
  font-size: 12px;
  line-height: 1;
}

/* --- Bảng thuê bao: dấu X đỏ + giá dạng pill --- */
.ofc-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid #ff4d4f;
  border-radius: 50%;
  color: #ff4d4f;
  font-size: 13px;
  line-height: 1;
}
.bq-ent-head .bq-btn.ofc-price-pill {
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.bq-ent-col.featured .bq-ent-head .bq-btn.ofc-price-pill {
  background: var(--primary);
}
/* ============================ SECTION 4 — bảng giá vĩnh viễn (237:2622) ====
   Figma: 4 card 342×476, tiêu đề chừa 2 dòng để list tính năng thẳng hàng,
   giá xếp sát nhau, nền có lưới phối cảnh mờ. */
.ofc-price .bq-price-wrap { position: relative; z-index: 1; }
.ofc-price-bg {
  position: absolute;
  left: 50%;
  top: calc(50% + 40px);
  transform: translate(-50%, -50%);
  width: 1600px;
  max-width: 128%;
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}
.ofc-price .bq-price-card {
  min-height: 476px;
  justify-content: space-between;
}
.ofc-price .bq-price-card h3 {
  min-height: 58px;
  display: flex;
  align-items: center;
}
/* Hai mức giá trong 1 card (Key điện tử / Full Box) — xếp sát như Figma */
.ofc-price-amounts { display: grid; gap: 2px; }

/* ============================ SECTION 70 — lợi ích (253:6448) ============
   Tiêu đề 24px, mô tả 18px; visual dựng lại đúng toạ độ Figma (khung 489×490). */
.ofc-value .bq-value-card h3 { font-size: 24px; }
.ofc-value .bq-value-card p { font-size: 18px; line-height: 1.3; }

.ofc-value-visual {
  position: relative;
  width: min(100%, 489px);
  aspect-ratio: 489 / 490;
  justify-self: center;
}
.ofc-value-visual img { position: absolute; pointer-events: none; }
.ofc-value-rings {
  left: 50%;
  top: 50%;
  width: 127.2%;
  aspect-ratio: 622.885 / 631.302;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.ofc-value-logo {
  left: 50%;
  top: 50%;
  width: 80.4%;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.ofc-value-av {
  z-index: 3;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}
.ofc-value-av.a1 { width: 18%;   left: 72.5%; top: 3.3%; }
.ofc-value-av.a2 { width: 10.8%; left: 50.8%; top: 90.2%; }
.ofc-value-av.a3 { width: 10.8%; left: 0.5%;  top: 39.2%; }
.ofc-value-dot { z-index: 2; aspect-ratio: 1; }
.ofc-value-dot.d1 { width: 4.9%; left: 43.0%; top: -1.0%; }
.ofc-value-dot.d2 { width: 5.9%; left: 21.8%; top: 89.2%; }
.ofc-value-dot.d3 { width: 3.1%; left: 91.7%; top: 17.1%; }
.ofc-value-dot.d4 { width: 3.1%; left: 10.7%; top: 12.2%; }
.ofc-value-dot.d5 { width: 3.1%; left: 4.4%;  top: 66.9%; }
.ofc-value-dot.d6 { width: 3.9%; left: 96.8%; top: 35.3%; }
.ofc-value-dot.d7 { width: 2.9%; left: 78.0%; top: 95.1%; }

/* ============================ SECTION 6 — bộ ứng dụng Office (6 card) ====== */
.ofc-apps-section {
  background: var(--white);
  overflow: hidden;
}
.ofc-apps-wrap {
  padding: 128px 0;
  display: grid;
  gap: 64px;
  justify-items: center;
}
.ofc-apps-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.ofc-app-card {
  position: relative;
  min-height: 229px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  border-radius: 32px;
  background: var(--white);
  box-shadow: 0 0 50px rgba(63, 165, 224, 0.2);
  overflow: hidden;
}
.ofc-app-card h3 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}
.ofc-app-card p {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.ofc-app-card .ofc-app-icon {
  position: absolute;
  top: 18px;
  right: 17px;
  width: 116px;
  height: 116px;
  object-fit: contain;
}

/* ============================ SECTION 72 — tại sao chọn Nhân Hòa (359:3823)
   Figma: ảnh lấp đầy card, tiêu đề căn giữa chừa 2 dòng, mô tả căn đều. */
.ofc-why .bq-why-card { justify-content: flex-start; gap: 24px; }
.ofc-why .bq-why-media {
  flex: 1 1 auto;
  height: auto;
  min-height: 180px;
}
.ofc-why .bq-why-card h3 {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ofc-why .bq-why-card p { min-height: 72px; }

/* ============================ SECTION 68 — band (253:6347) ==============
   Nền #c5e0f5, tiêu đề + CTA giữa; logo M365 + wordmark Microsoft góc trái,
   swirl Windows góc phải dưới. */
.ofc-band {
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  padding: 96px 0;
}
.ofc-band-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 32px;
  justify-items: center;
  text-align: center;
}
.ofc-band-inner h2 {
  margin: 0;
  max-width: 1344px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}
.ofc-band-swirl {
  position: absolute;
  z-index: 0;
  right: -3%;
  bottom: -56px;
  width: min(52vw, 980px);
  opacity: 0.7;
  transform: rotate(0.63deg);
  pointer-events: none;
}
.ofc-band-logo {
  position: absolute;
  z-index: 1;
  left: 2.5%;
  top: 26px;
  width: 150px;
  transform: rotate(-9deg);
  pointer-events: none;
}
.ofc-band-ms {
  position: absolute;
  z-index: 1;
  left: 3%;
  top: 244px;
  width: 210px;
  pointer-events: none;
}
@media (max-width: 1280px) {
  .ofc-band-inner h2 { font-size: 40px; }
}
@media (max-width: 1024px) {
  .ofc-band-ms { display: none; }
  .ofc-band-logo { width: 128px; top: 24px; }
}
@media (max-width: 768px) {
  .ofc-band-swirl, .ofc-band-logo { display: none; }
  .ofc-band { padding: 64px 0; }
  .ofc-band-inner h2 { font-size: 30px; }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1280px) {
  .ofc-hero-brand .office { font-size: clamp(64px, 10vw, 120px); }
  .ofc-value-visual { order: -1; max-width: 460px; }
}
@media (max-width: 1024px) {
  .ofc-hero-grid { grid-template-columns: 1fr; min-height: auto; }
  .ofc-hero-wave { display: none; }
  .ofc-hero-visual { justify-self: center; max-width: 620px; }
  .ofc-hero-content { padding-top: 24px; }
  .ofc-apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ofc-apps-wrap { padding: 80px 0; }
}
@media (max-width: 768px) {
  .ofc-hero-sub { white-space: normal; }
  .ofc-hero-cta { }
  .ofc-apps-grid { grid-template-columns: 1fr; }
  .ofc-app-card { min-height: 130px; }
}