/* Quick links — AB#134930 (layout desktop) + AB#134933 (mobile sticky bar).
   Chuẩn tham chiếu KHÔNG còn thuần PROD nữa — mỗi phần một nguồn:
     · phân bố ngang desktop  -> Figma 560:10850   (vòng 3, BA dẫn trong comment reopen 28/08)
     · khối mobile (<=767px)  -> Figma 3579:32562  (vòng 2, AB#134933)
     · icon 25px, gap 12px, min-height 94, typography nhãn -> bản AEM `.quick-link-root` trên PROD
       www.u.com.my/en/personal/home, đo bằng headless Chrome + CDP ngày 2026-08-27.
   Bản này CỐ Ý lệch SRS Part11 v0.2 Table 77/79/80 ở 5 điểm — xem
   gap-134930-134933-quick-links-aem-parity.md (A1-A5). LƯU Ý: "waived" trong gap file nghĩa là DEV
   TỰ CHẤP NHẬN RỦI RO để đi tiếp, KHÔNG phải BA đã duyệt — cả 3 mục A1/A2/A3 vẫn chưa có câu trả
   lời của BA. */

.uiw-quick-links {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /* Figma 560:10850 (node BA dẫn ở comment reopen 28/08) đo được: container 1248 chứa 5 item 52px,
     gap 136.5px, inset 2 bên 221px -> tâm-tâm 188.5px. `space-around` của vòng 1 (lấy theo PROD)
     làm tâm-tâm PHỤ THUỘC SỐ ITEM: 5 item -> 249.6px, 4 item -> 312px; trang UAT chỉ có 4 item nên
     trông "dãn ra quá" dù CSS không đổi (AB#134930 reopen).
     Cái được giữ bất biến ở đây là PITCH (188.5px) với mọi số item — KHÔNG phải vị trí tuyệt đối:
     cụm luôn căn giữa nên tâm icon chỉ trùng Figma (247 + i*188.5) khi có ĐÚNG 5 item; 4 item ra
     341.25, 6 item ra 152.75. Pitch = width item + gap, không phụ thuộc riêng bề rộng item, nên item
     giữ vai trò vùng bấm rộng thay vì co về đúng 52px như frame Figma.

     Hai dòng `justify-content` dưới đây là CÓ CHỦ Ý, đừng gộp lại thành một:
     `center` thuần + `overflow-x: auto` là một cái bẫy trong LTR — khi hàng rộng hơn container,
     nửa phần tràn nằm ở phía TRÁI, mà `scrollLeft` không nhận giá trị âm nên phần đó VĨNH VIỄN
     không cuộn tới được. Đo thật: 1024px + 6 item cắt mất 53.5px của item đầu, trong đó 18.84px là
     chữ thật của nhãn "Check Coverage" (`space-around` cũ không dính vì trình duyệt cho nó tụt về
     start khi tràn). `safe center` căn giữa như thường và tự tụt về start khi tràn.
     Dòng `center` đứng trước làm fallback: trình duyệt không hiểu từ khoá `safe` sẽ bỏ nguyên
     declaration thứ hai; nếu chỉ để mỗi `safe center` thì nó rơi về `normal` (= flex-start) và
     hàng lệch trái ở MỌI màn hình. Cùng lớp lỗi với AB#132267. */
  justify-content: center;
  justify-content: safe center;
  gap: 0;
  padding: 0;
  /* SRS Table 77 "width: 1248" vẫn đúng và trùng PROD. Giữ max-width + margin auto ở ĐÂY (không để
     shell lo) vì `.uiw-dw-shell.uiw-dw-dynamic-quick-links` đang opt-out khỏi cap của shell trong
     layout-shell.css — bỏ cả hai thì trên màn >1440px hàng sẽ giãn hết chiều ngang trang. */
  width: 100%;
  max-width: 1248px;
  margin: 0 auto;
  /* PROD cao 94px (do .blob-container 200x94), không phải 88px của SRS Table 77 — xem gap mục B1. */
  min-height: 94px;
  /* Trên PROD nền trắng đến từ section AEM bao ngoài, không phải từ quick-link. Ở đây giữ nền trong
     widget (quyết định A4) để widget tự đủ, đặt vào section nền bất kỳ vẫn ra đúng thiết kế. */
  background-color: #ffffff;
  border-radius: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.uiw-quick-links-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* PROD: icon 25 + 12 + label 16 = 53, căn giữa trong 94 -> chừa 20.5px trên/dưới.
     12px = `.text-wrapper { margin-top: .75rem }` của bản AEM. */
  gap: 12px;
  /* 188.5px = pitch tâm-tâm của Figma 560:10850 (item 52 + gap 136.5). Item rộng bằng đúng pitch với
     `gap: 0` -> tâm icon trùng Figma, đồng thời nhãn vẫn còn đủ bề ngang cho chốt chặn tràn 2 dòng
     của AB#132267 (co item về 52px sẽ làm nhãn tràn ra ngoài và mất chốt đó). */
  width: 188.5px;
  height: 94px;
  flex-shrink: 0;
  padding: 0;
  text-decoration: none;
  color: inherit;
}

.uiw-quick-links-icon {
  display: block;
  /* Khoá theo CHIỀU CAO (`width: auto`) để icon không vuông vẫn giữ tỉ lệ — cách này lấy từ bản
     AEM trên PROD và giữ nguyên; chỉ CON SỐ là đổi.
     29px = Figma 560:10850 (PO chốt 03/09 "theo Figma"). Đo bằng Figma MCP get_metadata: 4/5 icon là
     29x29 (mobile_camera / currency_exchange / distance / featured_seasonal_and_gifts), riêng
     "Pay Bill" là Group 38.87x34.54 — Figma TỰ không đồng đều, nên lấy 29 là giá trị của đa số và
     khoá chiều cao cho cả 5 ra đều nhau.
     Ba nguồn từng mâu thuẫn ở chỗ này: SRS Table 79 ghi 32x32 PC / 24x24 mobile · bản AEM trên PROD
     đo được 25px cả 2 breakpoint (giá trị chạy từ vòng 1 tới 03/09) · Figma 29px. Bug gốc nói "icon
     is to big" là so với bản 32x32; 29px vẫn nhỏ hơn con số đó. Xem gap mục A2. */
  height: 29px;
  width: auto;
  max-width: 100%;
}

.uiw-quick-links-label {
  font-family: 'Unbeatable','Arial','Helvetica Neue','Helvetica',sans-serif;
  /* Weight 500 = Figma 560:10853 ("Top Up" in frame 560:10850) and SRS Table 80 (AB#145787). The label
     is a plain Input field, so its weight follows Figma, not PROD's 400. Size 16/16 and #464B52 still
     follow PROD (gap A5). The <=767px block below keeps 12/600. */
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: #464B52;
  text-align: center;
  /* Giữ nguyên chốt chặn tràn của AB#132267: bẻ trong từ dài rồi cắt ở 2 dòng. Với 16px/16px thì
     25 + 12 + 32 = 69px, vẫn nằm gọn trong item cao 94px. */
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Tablet — PROD thu item còn 150px ở <=1023px. Ở dải 768-1023px, 6 item x 150 = 900px có thể vượt
   viewport (iPad dọc 768px); cho item co lại (min 96px) thay vì để tràn, vì khi tràn thì phần thò ra
   phía TRÁI không cuộn tới được (xem giải thích `safe center` ở khối gốc) — đúng lỗi AB#132267 đã
   xử một lần. Trước vòng 3 chỗ này viện dẫn `space-around`; giá trị đó không còn trong file, nhưng
   lý do giữ `min-width` thì không đổi vì `center` dính đúng cái bẫy đó.
   Khối này KHÔNG override `justify-content`, nên tablet thừa hưởng `safe center` của khối gốc —
   tức cũng được che bởi fix tràn ở trên. Dải 768-1023 không có frame Figma nào, xem gap mục vòng 3. */
@media (max-width: 1023px) and (min-width: 768px) {
  .uiw-quick-links-item {
    width: 150px;
    min-width: 96px;
    flex-shrink: 1;
  }
}

/* Mobile — AB#134933: thanh cố định đáy màn hình, ẩn khi cuộn xuống, hiện lại khi cuộn lên.
   PROD làm việc này bằng vue-portal đẩy widget vào `.sticky-bottom-destination` (position: fixed).
   Dynamic widget không có portal nên tự `position: fixed`; an toàn vì `.uiw-dw-shell` không có
   transform/filter/contain nên không tạo containing block cho phần tử fixed.

   VÒNG 2 (2026-08-28): mọi số ở khối này lấy từ FIGMA node `3579:32562` ("Menu", mobile 393px) —
   KHÔNG còn theo bản AEM/PROD như vòng 1. QC bác vòng 1 ("chưa giống design", AB#134933 comment
   2026-08-28) và BA dẫn Figma; chốt của dev: visual theo Figma, GIỮ hành vi ẩn/hiện theo cuộn.
   Figma: dính đáy (không lề, không cách đáy), bo góc CHỈ 2 góc trên, đổ bóng HƯỚNG LÊN — ba dấu
   hiệu này cùng nói thanh là bar dính đáy, không phải card nổi 16px như vòng 1 làm. */
@media (max-width: 767px) {
  .uiw-quick-links {
    position: fixed;
    left: 0;
    right: 0;
    /* Figma: bar dính hẳn đáy viewport, tràn hết chiều ngang. Vòng 1 để `bottom: 32px; margin: 0 16px`
       theo PROD -> đó là phần QC bác. */
    bottom: 0;
    margin: 0;
    /* `max-width: none` huỷ cap 1248px của khối base — ở mobile bar phải tràn hết chiều ngang. */
    max-width: none;
    /* Bỏ `min-height: 94px` của khối base để bar cao theo nội dung. Figma ghi 82.12px; render thật
       81.67px = 12 (padding-top) + 21 (icon) + 4.667 (gap) + 32 (nhãn 2 dòng x 16) + 12
       (padding-bottom) — chênh 0.46px vì trong Figma icon Pay Bill là group cao 21.46. Không khoá
       cứng 100px như vòng 1: nhãn 1 dòng ("Reward") và 2 dòng ("Switch to U") cho chiều cao khác nhau,
       khoá cứng sẽ hoặc hở đáy hoặc cắt nhãn. Chặn TRÊN do `-webkit-line-clamp: 2` của nhãn lo. */
    min-height: 0;
    padding: 12px 20px;
    /* Dưới `.sticky-bottom-destination` (z-index 1000) đúng như PROD, để cookie bar/sticky bar của
       shell vẫn nằm trên. */
    z-index: 999;
    /* Figma `justify-content: space-between` + padding ngang 20px: 5 item x 42 = 210, viewport 393
       -> 4 khoảng trống 35.75px. Vòng 1 dùng `space-around` (kế thừa desktop) nên lề ngoài và
       khoảng giữa không khớp Figma. */
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 3.1px rgba(0, 0, 0, 0.1);
    /* Phải huỷ `overflow-x: auto` của khối base: nó biến bar thành scroll container, và scroll
       container CẮT phần con vẽ ra ngoài padding box — tức cắt chính phần nhãn tràn ra ngoài item mà
       Figma cố ý cho tràn ("Reward" rộng 44 so với item 42). (Bóng thì KHÔNG liên quan: box-shadow
       của một phần tử không bị `overflow` của chính nó clip, chỉ bị clip bởi overflow của phần tử
       CHA — bản vòng 2 đầu tiên ghi sai chỗ này.)
       Đánh đổi: mất lớp cuộn ngang dự phòng. An toàn trong giới hạn hợp lệ — SRS Table 75 cho tối đa
       6 item, 6 x 42 + 40 padding = 292px, vẫn gọn trong viewport nhỏ nhất 320px. NHƯNG cap 6 chỉ
       được enforce ở UI Angular (`widget-manual-item-limits.ts:15`), còn `template.liquid` render trọn
       `model.items`, nên nội dung tạo qua API/import với 7+ item sẽ có item nằm ngoài viewport mà
       KHÔNG cuộn tới được (đo: 8 item @320px -> item cuối right=356). Đã ghi gap mục B4; enforce cap
       ở template là thay đổi hành vi riêng, chờ BA trả lời A1. */
    overflow: visible;
    /* Viết dạng longhand để trạng thái ẩn chỉ cần đè `transition-delay` của riêng `visibility`. */
    transition-property: opacity, transform, visibility;
    transition-duration: 500ms, 500ms, 0s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), linear;
    transition-delay: 0s, 0s, 0s;
  }

  /* Không có thuộc tính = trạng thái đầu trang: hiện. widget.js chỉ set khi người dùng thật sự cuộn,
     nên "hiện ngay khi tải trang" không phụ thuộc JS chạy kịp hay không. */
  .uiw-quick-links[data-scroll-dir="up"] {
    opacity: 1;
    transform: translateY(0);
  }

  /* `calc(100% + 6px)` = trọn chiều cao bar + 6px cho bóng hướng lên -> ra hẳn ngoài viewport ở MỌI
     chiều cao, không phụ thuộc nội dung. Vòng 2 ban đầu để `translateY(200px)`; con số đó chỉ đúng khi
     bar cao ~82px — đo thật cho thấy nhãn nhiều từ đẩy bar lên 209.66px và lúc đó còn 9.66px nằm
     trong viewport. Nay clamp 2 dòng đã khoá chiều cao lại, nhưng dùng `100%` thì invariant không còn
     phụ thuộc vào việc clamp có tồn tại hay không.
     Nhưng ra ngoài viewport KHÔNG gỡ được khỏi thứ tự tab: người dùng bàn phím vẫn tab trúng các
     <a> của thanh đang ẩn. `visibility: hidden` gỡ hẳn khỏi cây a11y + thứ tự tab, và chỉ áp dụng
     SAU khi chạy xong 500ms hiệu ứng (transition-delay của riêng visibility) để không cắt ngang
     hiệu ứng mờ dần. `pointer-events: none` chặn chạm trong lúc thanh còn đang trượt ra. */
  .uiw-quick-links[data-scroll-dir="down"] {
    opacity: 0;
    transform: translateY(calc(100% + 6px));
    visibility: hidden;
    pointer-events: none;
    transition-delay: 0s, 0s, 500ms;
  }

  .uiw-quick-links-item {
    /* Figma: item rộng 42px, khoảng icon->nhãn 4.667px, cao tự do (57.67px khi nhãn 2 dòng).
       Vòng 1 để 55px + gap 0 + icon margin 15px theo PROD. */
    width: 42px;
    /* PHẢI có: khối base khoá `height: 94px` cho item (desktop, dòng 43). Bỏ dòng này thì bar mobile
       cao 12 + 94 + 12 = 118px thay vì 81.67px — đã đo bằng harness ở chế độ local trước khi publish. */
    height: auto;
    min-width: 0;
    gap: 4.667px;
    justify-content: flex-start;
    flex-shrink: 0;
  }

  .uiw-quick-links-icon {
    /* Figma icon 21x21. Vẫn khoá theo CHIỀU CAO (`width: auto`) như khối base: icon Pay Bill trong
       Figma rộng 24 vì là group 2 lớp, ép vuông sẽ bóp méo nó. */
    height: 21px;
    margin: 0;
  }

  .uiw-quick-links-label {
    /* Figma "Legal/Semibold": UMobile Display SemiBold 12/16, màu #000 (var --Color2). Vòng 1 để
       16px/400/#464B52 theo PROD. */
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: #000000;
    /* Chỗ QC chụp lỗi: nhãn bị bẻ GIỮA TỪ thành "Rewar / d". Nguyên nhân KHÔNG phải là "có chặn tràn"
       mà là riêng `overflow-wrap: anywhere` của khối base: `anywhere` kéo min-content của nhãn về bề
       rộng MỘT KÝ TỰ, nên hộp nhãn co đúng bằng item (42px) và "Reward" (43.36px ở 12px SemiBold)
       buộc phải bẻ. `break-word` bẻ được từ dài y như `anywhere` nhưng KHÔNG đổi min-content, nên hộp
       nhãn rộng bằng từ dài nhất và "Reward" nằm 1 dòng, tràn ra ngoài item — đúng như Figma (node
       "Reward" rộng 44 so với item 42, x=-1). Đó là điểm khác duy nhất giữa hai giá trị, và cũng là
       lý do KHÔNG trả về `normal`: `normal` không bẻ nổi từ dài không có dấu cách. */
    overflow-wrap: break-word;
    word-break: normal;
    /* Vẫn PHẢI giữ chốt chặn tràn của AB#132267 (bug đã đóng): nhãn do CMS nhập, không có validation
       độ dài. Đo thật khi bỏ hết chặn: nhãn 130 ký tự không dấu cách trải từ -284px tới 842px trên
       viewport 320 (đè mọi nhãn khác, và vì bar là position:fixed nên trang KHÔNG sinh cuộn để với
       tới); nhãn 10 từ đẩy bar từ 82px lên 210px.
       64px > từ dài nhất của nội dung thật ("Coverage" 54.69px) nên nhãn thật không đổi một pixel;
       clamp 2 dòng khoá chiều cao bar ở 81.67px. `overflow: hidden` KHÔNG cắt "Reward" vì hộp nhãn
       bó sát chữ (shrink-to-fit của block trong flex column), chỉ cắt khi một từ vượt 64px.
       Vì sao 64 mà không phải 56 (56 cũng > 54.69 và giảm được mức chồng nhãn ở ca 320px/6 item):
       biên chỉ còn 1.31px. Con số 54.69px đo với font fallback `sans-serif` — và hiện tại đó CŨNG là
       font thật, vì không có `@font-face` nào khai `'UMobile Display'` trong `wwwroot` (coreclient.css
       chỉ khai `Unbeatable` và `Nunito`, mà stack của nhãn ở dòng 60 không có `Unbeatable`). Rủi ro
       nằm ở TƯƠNG LAI: nếu ai đó thêm `@font-face` thật hoặc sửa font stack, chữ rộng ra và biên
       1.31px sẽ âm ⇒ nhãn thật bị cắt, tức tái sinh đúng lỗi QC báo. 64px giữ biên ~17%. */
    max-width: 64px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uiw-quick-links {
    transition: none;
  }
}