/* ============================================================
   LỚP ÁO MÃ ĐẠI — khu "Hướng dẫn Đăng ký" (register-step-sec)
   và khu "Hướng dẫn" video (.guide). File này CHỈ ĐÈ CSS, không
   đụng HTML/JS — nút bấm, JS toggle tab vẫn hoạt động như cũ.
   Màu dùng lại đúng biến --md-* đã khai báo ở madai-2026.css.
   ============================================================ */

/* ============ 1. KHU 6 BƯỚC ĐĂNG KÝ — dải icon liền mạch ============ */

.register-step-sec{ background:#fbfdfc !important; padding-bottom: 10px; }

/* --- dẹp đường kẻ đứt-đoạn cũ trước từng icon (::before) — thay bằng
   MỘT đường kẻ chạy suốt hàng ở dưới, đỡ rối mắt hơn kẻ-từng-đoạn.
   ::before không dùng để hiển thị gì khác nên gỡ thẳng, không xung đột. */
.register-step-sec.register-step-sec .steps.register-steps .step .step-img:before,
.register-step-sec.register-step-sec .steps.register-steps .step:first-child .step-img:before,
.register-step-sec.register-step-sec .steps.register-steps .step:last-child .step-img:before{
  content:none; display:none;
}
/* ::after (số thứ tự) và .item-wrap::before/::after (nhãn + tay cầm cũ)
   phải gộp CHUNG một rule cho mọi biến thể (first/last/active/current)
   — KHÔNG tách neutralize riêng rồi định nghĩa lại riêng, vì bước 1 vừa
   là first-child vừa là active/current nên 2 rule tách rời sẽ đá nhau
   theo specificity, làm số+nhãn biến mất đúng ở bước đang chọn. */

.register-step-sec .steps.register-steps{
  display:flex; flex-wrap:nowrap; align-items:flex-start;
  position:relative; counter-reset:mdstep; padding:6px 0 4px; margin:0;
}
/* đường kẻ chạy suốt, nằm đúng tâm icon. Cố định 6 bước chia đều nên tâm
   icon đầu/cuối luôn cách mép đúng 1/12 bề rộng hàng (100%/6/2) — dùng %
   thay vì px để không lệch khi đổi padding/độ rộng màn hình. */
.register-step-sec .steps.register-steps:before{
  content:''; position:absolute; left:8.3333%; right:8.3333%; top:56px; height:2px;
  background:var(--md-vien-xanh); z-index:0;
}

.register-step-sec .steps.register-steps .step{
  display:flex !important; flex-direction:column; align-items:center;
  float:none; width:auto; flex:1 1 0; min-width:0; padding:0 8px;
  position:relative; z-index:1; cursor:pointer;
}

.register-step-sec .steps.register-steps .step .step-img{
  margin-bottom:0; position:relative; z-index:1;
}

.register-step-sec .steps.register-steps .step .step-img .img-ic{
  box-shadow:0 2px 10px rgba(0,60,45,.08);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* JS gốc không bao giờ gỡ class "active" khỏi bước 1 (chỉ gỡ/gán lại
   "current") nên viền dày 7px xanh cũ của .step.active sẽ dính mãi ở
   bước 1 dù đang chọn bước khác — đưa về viền thường, chỉ .current
   (đã có rule riêng ở dưới) mới được nổi bật. */
.register-step-sec.register-step-sec .steps.register-steps .step.active .step-img .img-ic{
  border:2px solid #e8e4e4; margin-top:0;
}
.register-step-sec .steps.register-steps .step:hover .step-img .img-ic{
  border-color:var(--md-vien-xanh); transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,60,45,.12);
}

/* số thứ tự — badge tròn nhỏ, nền xanh ĐẬM (đủ tương phản cho chữ trắng,
   KHÔNG dùng #009966 vì tương phản chỉ ~4,05, dưới chuẩn).
   Gộp CHUNG mọi biến thể (thường/first/last/active) trong 1 rule để
   khỏi đá specificity với chính nó — xem lý do ở khối trên. */
.register-step-sec .steps.register-steps .step{ counter-increment:mdstep; }
.register-step-sec.register-step-sec .steps.register-steps .step .step-img:after,
.register-step-sec.register-step-sec .steps.register-steps .step:first-child .step-img:after,
.register-step-sec.register-step-sec .steps.register-steps .step:last-child .step-img:after,
.register-step-sec.register-step-sec .steps.register-steps .step.active .step-img:after,
.register-step-sec.register-step-sec .steps.register-steps .step.active:last-child .step-img:after{
  content:counter(mdstep);
  position:absolute; top:-4px; left:-4px; z-index:2;
  width:24px; height:24px; line-height:24px; text-align:center;
  border-radius:50%; background:var(--md-nen-nut); color:#fff;
  font-size:12.5px; font-weight:800; border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.18); margin:0; right:auto; bottom:auto;
}

/* nhãn tên bước — HTML gốc không có chữ, chèn bằng CSS content để
   đọc được (≥13px), không còn "icon trơ trọi không biết là bước gì".
   Gộp luôn biến thể .current vào cùng rule hiển thị (KHÔNG tách riêng)
   vì bước 1 mặc định vừa current vừa first-child. */
.register-step-sec.register-step-sec .steps.register-steps .step .item-wrap:before,
.register-step-sec.register-step-sec .steps.register-steps .step.current .item-wrap:before{
  display:block; position:static; width:auto; height:auto; background:none;
  transform:none; margin:10px auto 0; max-width:132px;
  font-size:13.5px; line-height:1.4; font-weight:600; color:var(--md-than);
  text-align:center; white-space:normal;
}
/* tay cầm/tam giác chỉ-xuống cũ (::after của item-wrap khi .current) —
   không dùng nữa, thay bằng viền icon nổi bật ở khối dưới */
.register-step-sec.register-step-sec .steps.register-steps .step .item-wrap:after,
.register-step-sec.register-step-sec .steps.register-steps .step.current .item-wrap:after{
  content:none; display:none;
}
.register-step-sec.register-step-sec .steps.register-steps .step:nth-child(1) .item-wrap:before{ content:"Đăng ký tài khoản"; }
.register-step-sec.register-step-sec .steps.register-steps .step:nth-child(2) .item-wrap:before{ content:"Cài công cụ mua hàng"; }
.register-step-sec.register-step-sec .steps.register-steps .step:nth-child(3) .item-wrap:before{ content:"Chọn hàng, thêm giỏ"; }
.register-step-sec.register-step-sec .steps.register-steps .step:nth-child(4) .item-wrap:before{ content:"Gửi đơn hàng"; }
.register-step-sec.register-step-sec .steps.register-steps .step:nth-child(5) .item-wrap:before{ content:"Đặt cọc tiền hàng"; }
.register-step-sec.register-step-sec .steps.register-steps .step:nth-child(6) .item-wrap:before{ content:"Nhận hàng, thanh toán"; }

/* bước đang chọn — nổi bật bằng viền xanh + nhãn đậm màu, thay cho
   tam giác chỉ-xuống cũ (đã gỡ ở trên).
   CHỈ dùng .current (không dùng .active): JS gốc chỉ gỡ/gán lại class
   "current" mỗi lần bấm, còn "active" bị bỏ sót trên bước 1 mãi mãi
   (removeClass chỉ áp cho 'current') — dùng .active sẽ ra 2 vòng tròn
   cùng sáng một lúc, sai với thao tác thật của khách. */
.register-step-sec.register-step-sec .steps.register-steps .step.current .step-img .img-ic{
  border:3px solid var(--md-xanh) !important; margin-top:0 !important;
  box-shadow:0 0 0 4px var(--md-xanh-nhat);
}
.register-step-sec.register-step-sec .steps.register-steps .step.current .item-wrap:before{
  color:var(--md-xanh-dam); font-weight:800;
}

/* nền khối nội dung chi tiết bên dưới (đã tồn tại sẵn) — chỉ vá đúng
   1 chỗ: nền #049568 + chữ trắng nhỏ dưới chuẩn tương phản (mobile) */
@media(max-width:767px){
  .register-step-sec.register-step-sec .step-inner{ background-color:var(--md-nen-nut) !important; }
}

/* --- điện thoại: 2 cột, không tràn ngang, bỏ đường kẻ suốt hàng --- */
@media(max-width:767px){
  .register-step-sec .steps.register-steps{ flex-wrap:wrap; padding-top:4px; }
  .register-step-sec .steps.register-steps:before{ display:none; }
  .register-step-sec.register-step-sec .steps.register-steps .step{
    flex:0 0 50%; max-width:50%; padding:0 10px 22px; box-sizing:border-box;
  }
  /* Gộp CHUNG mọi biến thể (thường/first/last/active) — giống lý do đã
     giải thích ở khối desktop trên: bước 1 vừa first-child vừa active,
     bước 6 là last-child. Rule desktop (không media) có sẵn 2 selector
     ":first-child"/".active" nặng ký hơn (0,7,1) so với selector trơn
     ở đây (0,6,1) — nếu chỉ viết 1 selector trơn, đúng 2 bước 1 và 6 sẽ
     KHÔNG bị đè bởi rule mobile này (badge vẫn to 24px, lệch -4px/-4px
     thay vì 20px/-2px/2px như 4 bước giữa) dù mã đã đúng breakpoint. */
  .register-step-sec.register-step-sec .steps.register-steps .step .step-img:after,
  .register-step-sec.register-step-sec .steps.register-steps .step:first-child .step-img:after,
  .register-step-sec.register-step-sec .steps.register-steps .step:last-child .step-img:after,
  .register-step-sec.register-step-sec .steps.register-steps .step.active .step-img:after,
  .register-step-sec.register-step-sec .steps.register-steps .step.active:last-child .step-img:after{
    width:20px; height:20px; line-height:20px; font-size:11px; top:-2px; left:2px;
  }
  .register-step-sec.register-step-sec .steps.register-steps .step .item-wrap:before{
    font-size:13px; max-width:128px; margin-top:8px;
  }
  /* step.css có sẵn ".item-wrap{display:none}" ở đúng breakpoint này
     (vốn để giấu tay-cầm chỉ-xuống cũ) — nếu không mở lại thì nhãn tên
     bước (chèn qua ::before của chính item-wrap) cũng biến mất theo. */
  .register-step-sec.register-step-sec .steps.register-steps .step .item-wrap{
    display:block;
  }
  /* chừa chỗ cho cụm nút nổi bên phải, giống khu .guide bên dưới */
  .register-step-sec.register-step-sec .step-inner .inner .info{
    padding-right:58px; box-sizing:border-box;
  }
}

/* ============ 2. KHU "HƯỚNG DẪN" (video + danh sách) ============ */

/* Lớp phủ nền: GIỮ NGUYÊN như bản đang chạy (chủ chốt 01/10/2026).
   Từng đổi sang mảng xanh lá đặc, nhưng cả khu đã có ảnh tàu-container nhiều màu, thêm
   mảng xanh đậm nữa thành rực và rối mắt. Nền cũ dịu hơn — không đè gì lên nữa. */
/* (cố ý để trống — không đè .guide:before) */

/* khung video — bo góc, đổ bóng, ảnh phủ kín không méo */
.guide .box-video{
  border-radius:16px; overflow:hidden;
  box-shadow:0 12px 30px rgba(0,30,20,.28);
}

/* VÁ LỆCH BREAKPOINT có sẵn (không phải do file này gây ra): responsive.css
   cho .box-video nằm ĐÈ (position:absolute, chiếm nửa trái) kể từ đúng
   768px, nhưng bootstrap.css của theme lại cho .col-sm-6 xuống 50% muộn
   hơn 1px — từ 769px. Ở đúng 768px, cột chữ bên phải vẫn đang rộng 100%
   (chưa tách cột) trong khi khung video đã đổi sang absolute → 2 khối
   đè thẳng lên nhau. Trả .box-video về dạng khối thường ở đúng mốc 768px
   này cho khớp với cột chữ, từ 769px trở lên vẫn giữ bố cục 2 cột cũ. */
@media(max-width:768px){
  .guide .box-video{
    position:relative !important; left:auto !important; top:auto !important;
    right:auto !important; bottom:auto !important; margin-right:0 !important;
    width:100% !important; display:block; height:auto;
  }
  /* .bg-layer đang bị ép width/height:100% (ăn theo layout desktop ở
     trên) — ở dạng khối thường thì cha cao 0 (auto) nên height:100% sẽ
     co ảnh về 0. Trả lại height:auto để ảnh tự cao theo tỉ lệ thật. */
  .guide .box-video .bg-layer{
    position:static !important; width:100% !important; height:auto !important;
  }
}
.guide .box-video .bg-layer{
  width:100% !important; height:100% !important; max-width:none;
  top:0 !important; left:0 !important; transform:none !important;
  object-fit:cover;
}

/* tiêu đề "Hướng dẫn" — thêm gạch chân vàng kim, đồng bộ style Mã Đại */
.guide .txt .sec-title{
  position:relative; padding-bottom:12px; margin-bottom:16px !important;
}
.guide .txt .sec-title:after{
  content:''; position:absolute; left:0; bottom:0; width:46px; height:3px;
  border-radius:2px; background:var(--md-cam);
}

/* danh sách gạch đầu dòng — dễ đọc hơn, icon tô vàng kim, có khối viền
   trái làm điểm nhấn thay vì nằm trơ giữa nền */
.guide .content .desc1{
  font-size:14.5px !important; line-height:2 !important; font-weight:500;
  border-left:3px solid var(--md-cam); padding:4px 0 4px 16px; margin-bottom:18px !important;
}
/* Màu/cỡ chữ CHỈ đặt lên ::before (nơi thật sự vẽ mũi tên qua content),
   KHÔNG đặt lên chính thẻ .fa — vì dòng cuối "Đặt cọc và thanh toán..."
   bị lỗi gõ nhầm </i> thay vì </span> trong HTML gốc, khiến thẻ span đó
   KHÔNG đóng và nuốt luôn chữ thật phía sau làm con của nó. Nếu style
   màu/cỡ chữ trên chính .fa, chữ bị nuốt sẽ ăn theo (từng ra vàng kim
   & nhỏ hơn hẳn các dòng khác — đã thấy khi tự chụp ảnh kiểm). Không
   sửa được HTML (ngoài phạm vi file này) nên tách hẳn phần glyph. */
.guide .content .desc1 .fa.fa-caret-right:before{
  font-family:FontAwesome; color:var(--md-cam); font-size:13px; margin-right:8px;
}
.guide .content .desc1 .fa.fa-caret-right{
  font-weight:500; line-height:2; color:inherit; font-size:inherit; font-family:inherit;
}

/* nút cài đặt — 2 nút này đang lấy màu mặc định (#e84d3d) vì selector đè
   sẵn ở madai-2026.css không khớp đúng HTML: <p class="action-btns"> chứa
   <div> ngay bên trong nên trình duyệt tự đóng thẻ <p> đó SỚM (quy tắc
   HTML5: div không được lồng trong p) — .action-btns thực ra KHÔNG bọc
   được 2 nút này. Bỏ mốc .action-btns, chỉ cần .guide là đủ phạm vi. */
.guide .chrome{ background:var(--md-son) !important; }
.guide .coccoc{ background:var(--md-nen-nut) !important; }
.guide .chrome,
.guide .coccoc{
  border-radius:26px !important; box-shadow:0 3px 0 rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease;
}
.guide .chrome:hover,
.guide .coccoc:hover{
  transform:translateY(-2px); box-shadow:0 5px 10px rgba(0,0,0,.22);
}

/* điện thoại: chừa chỗ cho cụm nút nổi (Zalo/chat/gọi) bên phải, tránh
   chữ bị đè lên — cột này full-bleed không có lề container như desktop */
@media(max-width:480px){
  .guide .col-default .txt{ padding-right:58px; }
}