/* ==========================================================
   Trang "Đăng nhập / Đăng ký" (dang-nhap.html)
   Figma node 152:4017 (file dt5I7wF6S9aoBL4810OvMM). Trang không thuộc brand nào
   - dùng chung mega menu + brandbar (cả 3 tab là <a> bình thường, không có tab
   "đang xem") + footer, phần thật sự riêng chỉ là khối email ở giữa trang.
   Dùng lại --romar-teal-dark (#0E6678) và --romar-teal (#005C6F) đã có sẵn trong
   style.css :root - không thêm biến mới vì đã đúng khớp giá trị Figma.
   ========================================================== */

.dang-nhap-section{
  padding:121px 0 125px;
}
/* Màn 2: gap link "Quay lại đăng nhập" -> footer đo được 115px (khác 125px của
   màn 1) - đổi qua JS khi chuyển màn (xem dang-nhap.html). */
.dang-nhap-section.dang-nhap-section--step2{
  padding-bottom:115px;
}

.dang-nhap-box{
  max-width:1044px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Node 152:4172: Anuphan SemiBold 64px, đen (KHÔNG phải teal như các tiêu đề
   khác), line-height 72px, canh giữa. */
.dang-nhap-title{
  margin:0;
  font-family:'Anuphan', sans-serif;
  font-weight:600;
  font-size:64px;
  line-height:72px;
  color:#000000;
  text-align:center;
}

/* Node 152:4173: Anuphan Regular 24px, đen, canh giữa, ngay dưới tiêu đề. */
.dang-nhap-desc{
  margin:2px 0 0;
  font-family:'Anuphan', sans-serif;
  font-weight:400;
  font-size:24px;
  line-height:56px;
  color:#000000;
  text-align:center;
}

.dang-nhap-form{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

/* Node 152:4174/152:4175: khung bo 25px, nền trắng, viền 1px teal đậm
   (--romar-teal-dark). Placeholder Anuphan Light 24px, màu --romar-teal
   (#005C6F) - màu phụ riêng của trang này, không phải lỗi lệch màu vị trí 2. */
.dang-nhap-input{
  width:840px;
  max-width:100%;
  height:100px;
  border-radius:25px;
  background:#FFFFFF;
  border:1px solid var(--romar-teal-dark);
  /* Padding ngang đo trực tiếp trong Figma: placeholder (152:4175, x=7469) cách
     mép trái khung (152:4174, x=7367) đúng 102px - KHÔNG phải giá trị đoán 40px
     ban đầu, phát hiện khi rà soát lại toàn trang. */
  padding:0 102px;
  font-family:'Anuphan', sans-serif;
  font-weight:300;
  font-size:24px;
  color:var(--romar-teal);
}
.dang-nhap-input::placeholder{
  font-family:'Anuphan', sans-serif;
  font-weight:300;
  font-size:24px;
  color:var(--romar-teal);
  opacity:1;
}
.dang-nhap-input:focus{
  outline:none;
  box-shadow:none;
  border-color:var(--romar-teal-dark);
}

/* Node 152:4177 (layer Figma tên "thêm vào giỏ hàng", chữ thật là "Tiếp theo"):
   840x67px, nền --romar-teal (#005C6F, đậm hơn CTA thường dùng --romar-teal-dark
   ở các trang khác - giữ đúng khác biệt này), bo 25px, chữ trắng SemiBold 32px. */
.dang-nhap-btn{
  margin-top:21px;
  width:840px;
  max-width:100%;
  height:67px;
  border:none;
  border-radius:25px;
  background:var(--romar-teal);
  color:#FFFFFF;
  font-family:'Anuphan', sans-serif;
  font-weight:600;
  font-size:32px;
  line-height:1;
  text-align:center;
}
.dang-nhap-btn:hover{
  background:var(--romar-teal-dark);
}

/* ==========================================================
   MÀN 2 - node 152:4207 "đăng ký" (1440x1932). Tiêu đề/mô tả dùng lại nguyên
   .dang-nhap-title/.dang-nhap-desc (node 152:4216/152:4217, cùng text/style hệt
   màn 1). 4 ô nhập dùng lại NGUYÊN .dang-nhap-input (bo 25px/viền #0E6678/nền
   trắng/840x100px) - class dùng chung cho cả placeholder-trong-khung (màn 1) và
   label-trên-khung (màn 2), tránh trùng lặp CSS như yêu cầu. Figma không cho
   thấy chữ nhập mẫu nào trong 4 ô này (chỉ có label + khung trắng rỗng, khác màn
   1 có riêng 1 node text placeholder) nên không có màu chữ gõ vào được xác nhận
   riêng - dùng lại var(--romar-teal) có sẵn trong .dang-nhap-input cho nhất quán.
   ========================================================== */

/* Gap mô tả -> ô nhập đầu tiên đo được ở màn 2: 11px (426-415, khác 24px ở màn 1
   vì màn 1 vào thẳng input, màn 2 có label phía trên input đầu tiên trước). */
.dang-ky-form{
  margin-top:11px;
}

/* Gap giữa các nhóm label+ô liên tiếp đo được: ĐÚNG 33px cho cả 3 lần (Tên->Họ,
   Họ->Email, Email->Mật khẩu) - số đo nhất quán, không phải trùng hợp. */
.dang-ky-field + .dang-ky-field{
  margin-top:33px;
}
.dang-ky-field{
  width:840px;
  max-width:100%;
}

/* Node 152:4287 (label "Tên", đại diện cho cả 4 label): Anuphan Medium 24px, đen,
   canh trái, thụt vào 25px so với mép trái khung bên dưới (x label 9093 - x khung
   9068 = 25, đúng bằng bán kính bo góc). Gap label -> khung riêng lẻ đo dao động
   36-43px giữa 4 ô (không đều, khả năng do đặt tay trong Figma) - dùng khoảng
   trắng thị giác thật (~11px, đo qua renderBounds) làm margin-bottom chung, ổn
   định hơn số bbox thô dao động. */
.dang-ky-label{
  display:block;
  width:100%;
  padding-left:25px;
  margin-bottom:11px;
  font-family:'Anuphan', sans-serif;
  font-weight:500;
  font-size:24px;
  color:#000000;
  text-align:left;
  box-sizing:border-box;
}

/* Node 152:4220: cùng component/kích thước với nút "Tiếp theo" (.dang-nhap-btn),
   chỉ đổi chữ. Gap từ đáy ô "Mật khẩu" -> nút đo được 55px (khác 21px ở màn 1 vì
   màn 1 nút liền ngay dưới input, ở đây có thêm khoảng cách nhóm field cuối). */
.dang-ky-submit{
  margin-top:55px;
}

/* Node 152:4311 (component set 152:4307): Anuphan Regular 16px, #005C6F, không
   gạch chân, canh giữa. Gap nút "Đăng ký" -> link đo được 13px. */
.dang-ky-back{
  margin-top:13px;
  border:none;
  background:transparent;
  padding:0;
  font-family:'Anuphan', sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1;
  color:var(--romar-teal);
  text-decoration:none;
  cursor:pointer;
}
.dang-ky-back:hover{
  text-decoration:underline;
}

/* ==========================================================
   Mobile - node 462:1996 "đăng nhập" (402x1248, file Copy). Frame riêng, KHÔNG
   dùng chung với desktop 152:4017. Header mobile ("thanh bar" 462:1997) chỉ có
   hamburger+logo+tìm kiếm+giỏ hàng, KHÔNG có dải brandbar Destello/Romar/Sairo -
   đã hỏi và xác nhận với người dùng (2026-09-16): ẨN brandbar ở mobile/tablet
   theo đúng Figma (khác cách xử lý ở Sairo mobile - ở đó user chọn GIỮ bộ lọc dù
   Figma không có, còn ở đây user chọn ẨN đúng theo Figma).
   Khối tiêu đề/mô tả/ô email/nút là bản co tỉ lệ 0.419048 (352/840) từ khối
   desktop, RIÊNG font-size input/placeholder/nút bị co theo cùng hệ số xuống còn
   ~10px/~13.4px - xác nhận đây là artifact của thao tác "scale nhóm" nhanh trong
   Figma (không phải type-scale cố ý), không dùng nguyên số này vì: (1) input
   <16px kích hoạt lỗi tự động zoom khi focus trên iOS Safari, (2) khó đọc trên
   màn hình thật. Đã hỏi và xác nhận với người dùng (2026-09-16): GIỮ đúng bố cục/
   khoảng cách/kích thước khung theo Figma, chỉ NÂNG cỡ chữ input/placeholder/nút
   lên tối thiểu 16px và tăng nhẹ chiều cao khung cho vừa chữ + đủ vùng chạm.
   ========================================================== */
@media (max-width:1439.98px){
  .romar-brandbar{
    display:none;
  }
  .dang-nhap-section{
    /* Gap "thanh bar" -> tiêu đề đo được trong Figma: 78px (462:1997 -> 462:1999) */
    padding-top:78px;
    padding-left:24px;
    padding-right:24px;
    /* Gap nút -> chân trang đo được: ~29px (462:2003 -> 462:1998) */
    padding-bottom:29px;
  }
  .dang-nhap-title{
    font-size:40px;
    line-height:47px;
  }
  .dang-nhap-desc{
    /* Gap tiêu đề -> mô tả đo được: ~16px (top-to-top 63px - lineHeight tiêu đề 47px) */
    margin-top:16px;
    font-size:16px;
    line-height:19px;
  }
  .dang-nhap-form{
    /* Gap mô tả -> ô email đo được: ~14px (top-to-top 33px - lineHeight mô tả 18.88px) */
    margin-top:14px;
  }
  .dang-nhap-input{
    /* Khung 352x41.9px trong Figma (co 0.419 từ 840x100) - nâng nhẹ lên 44px để
       vừa cỡ chữ 16px + đủ vùng chạm, bo góc/viền giữ theo tỉ lệ đo được (~10px/1px). */
    height:44px;
    border-radius:10px;
    /* Padding đo trong Figma mobile: placeholder (462:2002, x=15795.74) cách mép
       trái khung (462:2001, x=15753) 42.74px - đúng tỉ lệ 0.419 so với 102px
       desktop, không dùng 24px đoán trước đó. */
    padding:0 43px;
    font-size:16px;
  }
  .dang-nhap-input::placeholder{
    font-size:16px;
  }
  .dang-nhap-btn{
    /* Gap ô email -> nút đo được: ~9px (top-to-top 50.7px - height khung 41.9px) */
    margin-top:9px;
    /* Khung 352x28.1px trong Figma - nâng lên 44px để vừa cỡ chữ 16px + đủ vùng
       chạm (28px quá thấp cho chữ 16px), bo góc đồng bộ với ô email. */
    height:44px;
    border-radius:10px;
    font-size:16px;
  }

  /* ==========================================================
     MÀN 2 mobile - node 462:2004 "đăng kí" (402x1461, file Copy). Khung riêng
     KHÁC màn 1 (462:1996) - không được dùng chung số liệu của màn 1. Dùng
     selector .dang-nhap-section.dang-nhap-section--step2 (2 class, độ đặc hiệu
     cao hơn .dang-nhap-section 1 class ở trên) để KHÔNG bị thua bởi rule desktop
     .dang-nhap-section--step2{padding-bottom:115px} định nghĩa ngoài media query
     (lỗi tìm thấy khi rà soát: rule desktop đó có độ đặc hiệu ngang .dang-ky-submit
     và cùng 2-class ngang bằng nhưng đứng SAU trong file nên từng thắng nhầm ở
     mọi viewport, kể cả mobile - phải viết lại có điều kiện rõ ràng ở đây). */
  .dang-nhap-section.dang-nhap-section--step2{
    /* Gap "thanh bar" -> tiêu đề màn 2 đo được: 48px (462:2005 -> 462:2007),
       KHÁC 78px của màn 1 vì bố cục màn 2 dài hơn (1461px vs 1248px). */
    padding-top:48px;
    /* Gap link "Quay lại đăng nhập" -> chân trang: co tỉ lệ 0.421 từ 115px desktop
       (353.9/840) - Figma mobile không đo được số liệu sạch do bbox chân trang
       lấn qua cả phần trang trí phía trên khối teal, dùng số co tỉ lệ nhất quán
       với cách đã làm ở màn 1. */
    padding-bottom:49px;
  }
  .dang-ky-form{
    /* Gap mô tả -> field đầu tiên màn 2 đo được: 23px (302-278.66) */
    margin-top:23px;
  }
  .dang-ky-field + .dang-ky-field{
    /* Gap giữa các field đo được: ~14px cho cả 3 lần (13.94/13.76/13.94) - đúng
       tỉ lệ 0.421 so với 33px desktop. */
    margin-top:14px;
  }
  .dang-ky-label{
    /* Figma co cỡ chữ label xuống còn ~12px (cùng artifact scale-nhóm đã gặp ở
       input/placeholder/nút màn 1) - label không phải input nên không bị lỗi
       zoom iOS, nhưng 12px vẫn hơi nhỏ để đọc thoải mái trên di động - nâng nhẹ
       lên 14px cho nhất quán với quyết định "điều chỉnh cho dễ dùng" đã chốt.
       Vẫn giữ canh TRÁI + thụt lề (không đổi thành canh giữa) - đã kiểm tra qua
       Figma, textAlignHorizontal của label mobile vẫn là LEFT giống desktop, chỉ
       khác cỡ chữ/khoảng cách. Thụt lề co theo tỉ lệ 0.421 từ 25px desktop. */
    padding-left:11px;
    margin-bottom:6px;
    font-size:14px;
  }
  .dang-ky-submit{
    /* Gap field cuối ("Mật khẩu") -> nút "Đăng ký" đo được: 23px (602.44-579.53),
       KHÁC 9px của nút "Tiếp theo" màn 1 - dùng selector .dang-ky-submit (2 class
       cộng .dang-nhap-btn) để thắng đúng rule .dang-nhap-btn{margin-top:9px} ở
       trên cùng file (lỗi tìm thấy: trước đây rule 1-class .dang-nhap-btn đứng
       SAU trong media query nên thắng nhầm .dang-ky-submit dù độ đặc hiệu bằng
       nhau - viết lại rõ ràng ở đây, sau rule .dang-nhap-btn, để thắng đúng). */
    margin-top:23px;
  }
  .dang-ky-back{
    /* Gap nút -> link đo được: ~7px (co tỉ lệ từ 13px desktop) */
    margin-top:7px;
  }
}