/* ---- Header ---- */
.site-header { position: absolute; inset-block-start: 0; inline-size: 100%; z-index: 10; }

.site-header__inner {
    width: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
    display: flex; align-items: center; gap: var(--sp-40);
    /* Gạch dưới nằm ở y=79 trên bản present, tức phần trên header cao đúng 79:
       20 đệm trên + 40 logo + 19 đệm dưới. */
    padding-block: 20px 19px;
    /* Gạch dưới header là NÉT ĐẶC cùng màu với chữ nav, không phải nét mờ 40%:
       đo trên bản present trang Câu chuyện ra đúng #412E1E, trang Thực đơn ra
       #F0E8D7. Để 40% vàng thì trên nền vàng của hero Thực đơn nó biến mất. */
    border-block-end: 1px solid var(--brand-4);
}

/* Chữ nav trên nền sáng là nâu --brand-4 (đo bản present trang Câu chuyện ra
   #412E1E), không phải màu chữ đen mặc định của body. */
/* Khoảng cách và cỡ chữ đo trên bản present: bốn mục nav cách nhau 60px, bề
   ngang mực "CÂU CHUYỆN CƠM LỆ" là 131 và "THỰC ĐƠN" là 65 — cả hai khớp đúng
   cỡ 12px letter-spacing 0. Bản dựng cũ để 13px + .08em nên mỗi mục dài thêm
   ~20% và cả dải nav lệch khỏi tâm khung. Đo lại được ở cả hai frame (Đặt bàn
   4029:43139 và Câu chuyện 4029:795) nên đây là kiểu chung, không phải một
   trang lẻ. */
.site-header__nav { display: flex; gap: 60px; margin-inline: auto; color: var(--brand-4); }
.site-header__lang button { color: var(--brand-4); }
.site-header__nav a,
.site-header__lang button { font-size: 12px; line-height: 20px; letter-spacing: normal; }
/* Mục nav của trang đang xem được GẠCH CHÂN: đo trên bản present trang Liên hệ
   ra nét 2px ở y=50–51, rộng đúng bằng chữ (1032…1078), màu bằng 50% màu chữ.
   Hộp dòng của thẻ <a> (12/20) canh giữa hàng header cao 40 nên đáy hộp rơi
   đúng y=50 — chỉ cần border-block-end, không phải chèn thêm phần tử. */
.site-header__nav a[aria-current="page"] {
    border-block-end: 2px solid;
    border-color: color-mix(in srgb, currentColor 50%, transparent);
}
.site-header__nav a:hover { color: var(--brand-1); }

.site-header__actions { display: flex; align-items: center; gap: var(--sp-20); }
.site-header__burger { display: none; }
.site-header__logo--mobile,
.site-header__lang-short { display: none; }

/* Biến thể header đứng trên nền tối (hero ảnh/photo). Xem ghi chú trong
   Views/Shared/_Header.cshtml — chỉ đổi màu chữ/viền, logo tự đổi src riêng. */
/* Gạch dưới nằm trên .site-header__inner chứ không phải trên chính thẻ header,
   nên biến thể on-dark phải nhắm vào phần tử đó — đặt border-block-end-color
   thẳng trên .site-header--on-dark là đặt vào một phần tử KHÔNG có viền, và đó
   là lý do gạch dưới header trang Thực đơn xưa nay không đổi màu. */
.site-header--on-dark .site-header__inner { border-block-end-color: var(--on-dark); }
.site-header--on-dark .site-header__nav a,
.site-header--on-dark .site-header__lang button { color: var(--on-dark); }
.site-header--on-dark .site-header__nav a:hover { color: var(--brand-1); }
/* Nút "Đặt bàn" header dùng .btn--solid (nền nâu đặc #412E1E, chữ kem, viền
   vàng --brand-1) — xem Views/Shared/_Header.cshtml. Không cần biến thể
   on-dark: nền nâu đặc luôn đủ tương phản trên mọi nền header (sáng lẫn tối),
   khác với .btn--outline (nền kem) từng dùng ở đây trước đó sẽ biến mất khi
   trộn với biến thể on-dark (cả hai cùng lấy màu kem #F0E8D7). */

/* ---- Nút dùng chung ---- */
/* Nút trong Figma là hình chữ nhật GÓC VUÔNG, không bo tròn — xem nút "Đặt bàn"
   trên header, "Đặt chỗ"/"Đặt món" trang Thực đơn và "Đặt bàn →" ở chân trang.
   --r-sm vẫn dùng cho chip/pill (thẻ chủ đề, số thứ tự món), chỉ nút là vuông. */
.btn {
    display: inline-flex; align-items: center; gap: var(--sp-8);
    padding: var(--sp-8) var(--sp-20);
    border: 1px solid transparent;
    font-size: 13px; line-height: 20px;
}
/* Nút nền đặc vẫn có viền vàng mảnh quanh mép. Viền trong suốt đặt sẵn ở .btn
   để nút đặc và nút viền cao bằng nhau — trước đây nút đặc không có viền nên
   thấp hơn nút viền 2px. */
.btn--solid { background: var(--brand-4); color: var(--on-dark); border-color: var(--brand-1); }
/* Đọc điểm ảnh trên bản present: nút viền có NỀN KEM #F0E8D7 và viền nâu
   #412E1E, không phải nền trong suốt viền đen như cách dựng cũ. Trên dải nền
   sẫm dần thì nút nền trong suốt bị chìm hẳn vào nền. */
.btn--outline { background: var(--brand-2); border-color: var(--brand-4); }
/* Cỡ lớn dùng cho nút kêu gọi giữa trang (Figma đo được 140x60), khác hẳn nút
   nhỏ trên header. */
.btn--lg { padding: var(--sp-20) 41px; font-size: 16px; line-height: 20px; }
.btn--outline-light { border-color: var(--brand-1); color: var(--brand-1); }
/* Nút nền kem đặc chữ nâu — nút "Xem menu" trên hero trang Đặt bàn. Đo trên bản
   present: hộp 140x49 nền #F0E8D7, chữ #412E1E cỡ 20. Trước đây dựng bằng
   .btn--outline-light (viền vàng, nền trong suốt) nên gần như tàng hình. */
.btn--paper { background: var(--brand-2); color: var(--brand-4); border-color: var(--brand-2); }

/* ---- Trường nhập liệu dùng chung (đặt bàn, liên hệ) ---- */
.field {
    display: grid; gap: var(--sp-4);
    padding: var(--sp-12) var(--sp-16);
    border-block-end: 1px solid var(--border-default);
}
.field--wide { grid-column: 1 / -1; }
/* Nhãn ô nhập màu NÂU --brand-4, không phải xám trung tính: đọc điểm ảnh trên cả
   hai bản present có biểu mẫu (Đặt bàn 4029:43139 và Liên hệ 4029:29110) đều ra
   nét ấm (103,88,74) chứ không phải (60,60,60) của #3C3C3C. */
.field__label { color: var(--brand-4); letter-spacing: .08em; }
.field input, .field select, .field textarea {
    border: none; background: none; padding-block: var(--sp-4);
    border-block-end: 1px solid transparent;
    font: inherit; color: inherit;
    /* Không để nội dung dài (địa chỉ chi nhánh…) ép rộng vượt khung field. */
    inline-size: 100%; min-inline-size: 0;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
    outline: 2px solid var(--brand-1); outline-offset: 2px;
}
.field__error { color: var(--status-error); }
.field__error:empty { display: none; }

/* ---- Footer ---- */
/* Đo trên bản present trang Đặt bàn (chân trang cao 710, từ y=2981 tới 3691):
   nội dung bắt đầu ở 3078 (97 tính từ mép trên) và kết thúc ở 3589 (102 tính từ
   mép dưới), trong khi HAI VẠCH DỌC lại chỉ chạy từ 3021 tới 3650 — tức thò ra
   ngoài vùng nội dung 57 phía trên và 61 phía dưới, chứ không chạm mép chân
   trang như cách dựng cũ. */
.site-footer { background: var(--brand-4); color: var(--on-dark); padding-block: 97px 99px; }

/* Đo trên bản present: khối thương hiệu rộng 270 (x 240..510), khối ba cột bắt
   đầu ở x=770 — tức khoảng hở tới 260px chứ không phải 80px như cách dựng cũ.
   Giữa khoảng hở đó Figma kẻ HAI vạch dọc song song, chạy suốt chiều cao chân
   trang kể cả phần đệm. */
.site-footer__inner {
    position: relative;
    width: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 270px 1fr;
    /* Nút "Đặt bàn tại cơ sở" KHÔNG nằm ở một hàng riêng bên dưới: bản present
       canh đáy nút thẳng với đáy hàng biểu tượng mạng xã hội bên cột thương hiệu
       (cả hai kết thúc ở y=3589). Cho cột thương hiệu trải hết hai hàng rồi ghim
       nút xuống đáy hàng thứ hai — để row-gap 80 như cũ thì nút rơi xuống dưới
       cột thương hiệu, thấp hơn thiết kế 137px và chân trang dài thêm chừng ấy. */
    grid-template-rows: auto 1fr;
    column-gap: 260px; row-gap: 0;
}
.site-footer__brand { grid-row: 1 / -1; }
.site-footer__cols { grid-row: 1; grid-column: 2; }
/* Một khối hẹp 20px chỉ tô viền trái/phải = đúng hai vạch song song. inset-block
   âm bằng padding của footer để vạch chạm mép trên và mép dưới. */
.site-footer__inner::before {
    content: ""; position: absolute;
    inset-block: -57px -61px;
    inset-inline-start: 390px; inline-size: 20px;
    border-inline: 1px solid color-mix(in srgb, var(--brand-1) 75%, transparent);
    pointer-events: none;
}

.site-footer__tagline { color: var(--brand-1); margin-block-start: var(--sp-20); }

/* Ba cột KHÔNG bằng nhau: đo trên bản present là 345 / 227 / 255. Chia đều 1fr
   làm cột "ĐỊA CHỈ" chỉ còn 277 nên mọi địa chỉ dài đều gãy làm hai dòng, trong
   khi Figma để gọn một dòng ("135 Triệu Việt Vương, Hai Bà Trưng, Hà Nội" đo
   được 322px). */
.site-footer__cols {
    display: grid;
    grid-template-columns: 345fr 227fr 255fr;
    column-gap: 42px; row-gap: var(--sp-40);
}
/* Gạch chân tiêu đề cột có ĐUÔI VÁT chéo xuống ở đầu phải — nét trang trí đặc
   trưng của thiết kế, gạch thẳng trơn nhìn khác hẳn. */
.site-footer__heading {
    position: relative;
    margin-block-start: 4px;
    font-family: var(--font-display);
    letter-spacing: .08em;
    padding-block-end: var(--sp-8);
    border-block-end: 1px solid var(--brand-1);
    margin-block-end: var(--sp-20);
    /* Tiêu đề cột màu vàng --brand-1, không phải kem --on-dark thừa hưởng từ
       .site-footer — bản present tách rõ tiêu đề (vàng) với nội dung (kem). */
    color: var(--brand-1);
}
.site-footer__heading::after {
    content: ""; position: absolute;
    inset-block-end: -1px; inset-inline-start: 100%;
    inline-size: 34px; block-size: 1px;
    background: var(--brand-1);
    transform-origin: left bottom; transform: rotate(34deg);
}
.site-footer__col li, .site-footer__col p { margin-block-end: var(--sp-8); }

/* Ô đăng ký thư là một HỘP có vạch trên và vạch dưới cao 50 (đo được y=3464 và
   y=3513), chữ thụt vào 14, mũi tên sát mép phải — không phải một ô chỉ gạch
   chân. Khoảng hở 167 phía trên là khoảng trống thật trong bản present, khối này
   bị đẩy hẳn xuống đáy cột thương hiệu. */
.newsletter {
    display: flex; align-items: center; gap: var(--sp-8);
    margin-block-start: 167px;
    block-size: 50px; padding-inline: 14px 0;
    border-block: 1px solid var(--brand-1);
}
.newsletter input[type="email"] {
    flex: 1; background: none; border: none;
    padding-block: 0; color: var(--on-dark);
}
.newsletter button { font-size: 24px; line-height: 1; }
.newsletter input::placeholder { color: color-mix(in srgb, var(--on-dark) 60%, transparent); }
.newsletter__msg { color: var(--brand-1); margin-block-start: var(--sp-8); }

/* Biểu tượng mạng xã hội 36px (đo được dải 240…371 = 3 x 36 + 2 x 12). */
.site-footer__social { display: flex; gap: var(--sp-12); margin-block-start: var(--sp-40); }
.site-footer__social img { inline-size: 36px; block-size: 36px; }
/* Figma đặt nút này ở đáy, canh TRÁI thẳng mép cột "ĐỊA CHỈ", không phải giữa. */
/* Nút này to hơn nút trên header: đo được hộp 201x52. KHÔNG có viền kép: quét cột
   điểm ảnh qua nút trên bản present chỉ thấy MỘT nét vàng ở 3538 và 3589, còn cách
   nút 4px ra ngoài (x=770) vẫn là nền nâu đặc. */
.site-footer__cta { grid-row: 2; grid-column: 2; justify-self: start; align-self: end; inline-size: 201px; block-size: 52px; justify-content: center; padding: 0; }

/* Logo chân trang xếp dọc: cắt bản vẽ ngang 139x40 làm hai mảnh rồi chồng lên
   nhau. Khoảng trống sạch giữa biểu tượng và chữ nằm ở x=44..51.
   Mảnh biểu tượng: phóng bản vẽ lên 212px rồi lấy 67px đầu (44 đơn vị).
   Mảnh chữ: thu bản vẽ còn 125px rồi lấy từ x=43 (đơn vị 48) hết bề ngang, cắt
   bớt phần trống trên đầu. */
.site-footer__logo { display: grid; justify-items: center; gap: 5px; justify-self: start; }
.site-footer__logo span { display: block; position: relative; overflow: hidden; }
.site-footer__logo img { position: absolute; max-inline-size: none; }
.site-footer__logo-mark { inline-size: 67px; block-size: 61px; }
.site-footer__logo-mark img { inline-size: 212px; inset-block-start: 0; inset-inline-start: 0; }
.site-footer__logo-word { inline-size: 82px; block-size: 27px; }
.site-footer__logo-word img { inline-size: 125px; inset-block-start: -9px; inset-inline-start: -43px; }

/* ---- Thanh đặt bàn ghim đáy (chỉ mobile) ----
   Ẩn ở desktop; khối mobile trong responsive.css bật lên. Số đo Figma
   (node 4029:28871): cao 64, nền #F0E8D7, lề trong 24, nút 82x29. */
.mobile-bar { display: none; }

/* ---- Bất biến: CSS cho bất cứ thứ gì trong Views/Shared/ thuộc về layout.css,
   không bao giờ đặt trong page stylesheet (home.css, reservation.css, …) —
   partial dùng chung có thể render trên nhiều trang khác nhau, và trang nào
   không load đúng stylesheet của "trang gốc" sẽ nhận nội dung không style. ---- */

/* ---- Đánh giá (_Testimonials, dùng ở Home và Reservation) ---- */
/* Màu đọc trực tiếp từ điểm ảnh bản present: cả khối này là NÂU/VÀNG trên nền
   giấy, không phải chữ đen mặc định. Tiêu đề, đoạn dẫn và mọi chữ trong thẻ đều
   #412E1E (--brand-4); riêng ô điểm số dùng #B5935E (--brand-1). */
/* /img/nen-giay.jpg là ĐÚNG tấm ảnh Figma dùng — tờ giấy dó chụp thật, có nếp
   nhăn và mép quăn. Lấy được bằng cách đọc danh sách tài nguyên mà bản present
   tải về (s3-alpha-sig.figma.com), rồi thu còn 1200px / JPEG 72 (261KB). Bản
   vân tổng hợp bằng feTurbulence trước đây phẳng và đều quá, không ra chất
   giấy thật. Dùng chung cho cả trang Thực đơn. */
.testimonials {
    background: var(--bg-soft) url("/img/nen-giay.jpg") center / cover;
    /* Khối cao đúng 596 trên bản present (dải vàng 10 + giấy 586). Chiều cao này
       KHÔNG chỉ là chuyện khoảng trắng: ảnh giấy đặt center/cover nên khối cao
       hơn thiết kế sẽ kéo mép quăn sẫm của tờ giấy vào khung — đó là dải tối
       ngay dưới đường vàng ở bản dựng cũ (khối cao 690). */
    padding-block: 75px 80px;
    color: var(--brand-4);
    /* Dải vàng ngang ở MÉP TRÊN, dày đúng 10px, chạy hết bề ngang — đo trên bản
       present: #B5935E liền một khối từ y=184 đến y=192. Mép dưới không có dải
       này, giấy nối thẳng vào chân trang nâu. */
    border-block-start: 10px solid var(--brand-1);
}
/* Khối đánh giá KHÔNG dùng .container 1440: bản present cho lề trái 96 và băng
   thẻ chạy sát mép phải khung (đo được tiêu đề bắt đầu ở x=99, ô điểm ở 97). */
.testimonials > .container { width: calc(100% - 192px); max-inline-size: none; }
.testimonials__lead {
    max-inline-size: 720px; margin-block-start: 9px;
    font-size: 20px; line-height: 28px; font-weight: 300;
}
.testimonials__body { display: flex; align-items: stretch; gap: 36px; margin-block-start: 38px; }
.testimonials__score {
    inline-size: 240px; flex: none; text-align: center;
    border: 1px solid var(--brand-1); padding: var(--sp-20);
    display: grid; align-content: center; gap: var(--sp-8);
    color: var(--brand-1);   /* cả ô điểm số là vàng, kể cả "Xuất sắc" và 4.7/5 */
}
.testimonials__value { font-family: var(--font-display); }
.testimonials__stars { color: var(--brand-1); letter-spacing: .2em; }
.testimonials__track {
    display: flex; gap: 19px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Bắt buộc: băng này là con của một flex container, mà con flex mặc định
       min-width:auto nên KHÔNG co nhỏ hơn tổng bề rộng các thẻ — overflow-x
       thành vô dụng và cả TRANG bị đẩy rộng ra (đo được tràn 52px ở khổ 393). */
    min-inline-size: 0;
}
.testimonials__track::-webkit-scrollbar { display: none; }
.review-card {
    /* Thẻ đánh giá rộng 318 (đo được 417…734 rồi lặp lại đúng bước 337), cao 240 —
       cách dựng cũ để 240 rộng nên bốn thẻ chỉ chiếm hai phần ba băng. */
    inline-size: 318px; block-size: 240px; flex: none; scroll-snap-align: start;
    /* Viền vàng #B5935E đúng như ô điểm số, không phải viền xám mặc định.
       Nền chỉ phủ trắng 30% để vân giấy còn ăn qua — 60% như trước làm thẻ
       trắng bệch, tách hẳn khỏi nền. */
    border: 1px solid var(--brand-1);
    background: color-mix(in srgb, #fff 30%, transparent);
    padding: var(--sp-16);
}
/* Figma tách dòng sao + thời gian khỏi phần nội dung bằng một ĐƯỜNG KẺ chạy
   hết bề rộng thẻ. Kẻ phải tràn qua cả phần đệm 16px của thẻ nên dùng lề âm,
   rồi tự bù lại bằng padding của chính dải này. */
.review-card__top {
    display: flex; justify-content: space-between; align-items: center;
    margin: calc(var(--sp-16) * -1) calc(var(--sp-16) * -1) var(--sp-12);
    padding: var(--sp-16);
    border-block-end: 1px solid var(--brand-1);
}
/* Cùng cỡ với dòng "1 tháng trước" bên cạnh, nếu không dải trên cao 57px thay
   vì 52px như Figma (sao thừa hưởng cỡ chữ thân 16/24). */
.review-card__stars { color: var(--brand-1); font-size: 13px; line-height: 20px; }
/* Mũi tên chỉ chiếm 10px bề ngang trong bản present (khe hai bên đúng 36 = gap
   của .testimonials__body). Nút rộng mặc định đẩy băng thẻ lệch sang phải 14px,
   nên ghim bề ngang rồi nới vùng bấm bằng đệm + lề âm. */
.testimonials__arrow {
    flex: none; align-self: center; font-size: 28px; color: var(--brand-4);
    inline-size: 10px; padding: 14px 0; margin-block: -14px;
    display: grid; place-items: center;
}

/* ---- FAQ (_Faq, shared partial) ----
   Bản present trang Đặt bàn xếp khối này THẲNG CỘT với phiếu giữ chỗ: rộng 767,
   mép trái x=576 — không phải khung .container 1440 như cách dựng cũ (rộng gần
   gấp đôi thiết kế). Mỗi hàng cao 60, kẻ dưới màu nâu đặc #412E1E, chữ hỏi cỡ
   20 nét Light, dấu "+" sát mép phải. */
.faq { padding-block: 80px 102px; width: min(100% - var(--gutter) * 2, 767px); margin-inline: auto; }
.faq__item { border-block-end: 1px solid var(--brand-4); }
.faq__question {
    inline-size: 100%; display: flex; justify-content: space-between; gap: var(--sp-20);
    padding: 20px 9px 15px; text-align: start;
    font-size: 20px; line-height: 24px; font-weight: 300;
}
.faq__answer { padding: 0 9px var(--sp-16); color: var(--text-secondary); }
/* Dấu "+" trong bản present là ô vuông 12x12, lớn hơn cỡ chữ câu hỏi. */
.faq__sign { font-size: 24px; line-height: 24px; }

/* ---- Dải cuối blog (_BlogSidebar, shared partial — hiện chỉ render trong Blog/Index
   và Blog/Detail, cả hai đều load blog.css, nhưng bất biến ở đầu file này áp dụng bất
   kể usage hiện tại: nếu sau này partial được nhúng ở trang khác không load blog.css
   thì khối này vẫn phải còn style.) ---- */
/* Nền dải này KHÔNG phẳng: đo trên bản present thấy tối dần đều từ #F0E8D7 xuống
   #DCCAAD ở sát chân trang, và nền TRÀN HẾT bề ngang màn hình — nên phải nằm ở lớp
   bọc ngoài, không đặt trên .blog-strip vốn bị .container bó lại 1440.
   Đường kẻ ngăn thì ngược lại: đo được đúng 1440 (bằng .container). Màu kẻ không
   phải xám --border-default mà là --brand-4 pha loãng (đo được #948373 = 50%). */
.blog-strip-band { background: linear-gradient(to bottom, var(--brand-2), #DCCAAD); }
/* Đo trên bản present trong khung 1440: ba cột 375 / 688 / 375 và KHÔNG có khe —
   hai đường kẻ dọc chính là viền trái/phải của cột giữa, nên đặt gap sẽ đẩy kẻ ra sai
   chỗ. Dải bắt đầu cách gạch ngang 40 và chạy sát chân trang (không đệm dưới). */
.blog-strip {
    display: grid; grid-template-columns: 375fr 688fr 375fr;
    padding-block: var(--sp-40) 0;
    border-block-start: 1px solid color-mix(in srgb, var(--brand-4) 50%, transparent);
}
/* Nội dung cột 1 thụt vào 40; cột giữa và cột phải thụt 55 (đo được: ô email rộng
   578 nằm giữa cột 688, thẻ vàng rộng 320 nằm sát mép phải cột 375). */
/* Đệm dưới để thẻ chủ đề cuối không dính chân trang. Bản present chỉ vẽ 3 chủ đề nên
   cột này luôn thấp hơn cột giữa; site thật đã có 4 nên cần chừa sẵn khoảng thở. */
.blog-strip__search { padding-inline-start: var(--sp-40); padding-block-end: var(--sp-80); }
/* Cùng một mũi tên dài nhưng bản present tô ba màu khác nhau tuỳ chỗ đặt (nâu đậm ở
   ô tìm kiếm, kem trên thẻ nền vàng, gần đen ở phân trang). Dùng mask để một file
   SVG duy nhất ăn theo `color` của phần tử cha, khỏi phải nhân bản file cho mỗi màu. */
.icon-arrow {
    display: inline-block; inline-size: 24px; block-size: 10px; flex: none;
    background-color: currentColor;
    -webkit-mask: url("/img/icon/long-arrow-right.svg") no-repeat center / contain;
    mask: url("/img/icon/long-arrow-right.svg") no-repeat center / contain;
}

/* Ô tìm kiếm trên bản present KHÔNG phải khung viền kín kèm nút nền đặc: đo được
   240x49, chỉ có gạch trên và gạch dưới màu --brand-1, chữ nâu đậm, mũi tên dài
   nằm sát mép phải trong cùng hàng. */
.blog-strip__search form {
    display: flex; align-items: center; inline-size: 240px;
    border-block: 1px solid var(--brand-1);
}
.blog-strip__search input {
    flex: 1; border: none; background: none;
    padding: var(--sp-12) 0 var(--sp-12) var(--sp-16); color: var(--brand-4);
}
.blog-strip__search input::placeholder { color: var(--brand-4); opacity: 1; }
.blog-strip__search button { display: flex; padding-inline: var(--sp-12); color: var(--brand-4); }
.blog-strip__label { margin-block: var(--sp-16) var(--sp-8); }
.blog-strip__chips { display: grid; gap: var(--sp-8); justify-items: start; }
/* Thẻ chủ đề: nền kem đặc, KHÔNG viền, chữ hồng đất --brand-3. Cao đúng 32
   (4 + line-height 24 + 4) như đo trên bản present. */
.chip {
    display: inline-block; background: var(--brand-2);
    padding: var(--sp-4) var(--sp-16); color: var(--brand-3);
}
.chip--solid { justify-self: start; }
/* Đệm dưới nằm ở CỘT GIỮA chứ không ở .blog-strip: trên bản present hai đường kẻ dọc
   (chính là viền cột này) chạy dài xuống tận chân trang, thấp hơn đáy nội dung ~80. */
.blog-strip__newsletter {
    text-align: center; padding-inline: 55px; padding-block-end: var(--sp-80);
    border-inline: 1px solid color-mix(in srgb, var(--brand-4) 50%, transparent);
}
/* Khung ô email viền nâu đậm --brand-4 (không phải xám --border-default). Bên trong,
   ô nhập vẫn có gạch chân mảnh và nút gửi là khối nền nâu đặc 74x54 — đo trên bản
   present, không phải mũi tên chữ trơ trọi như bản dựng cũ. */
.newsletter--boxed { border: 1px solid var(--brand-4); padding: var(--sp-8); margin-block-start: var(--sp-20); }
.newsletter--boxed input {
    padding-inline: var(--sp-8); color: var(--text-primary);
    border-block-end: 1px solid color-mix(in srgb, var(--brand-4) 50%, transparent);
    align-self: stretch;
}
.newsletter--boxed button {
    display: flex; align-items: center; justify-content: center;
    inline-size: 74px; block-size: 54px; flex: none;
    background: var(--brand-4); color: var(--brand-2);
}
/* .newsletter gốc dựng cho chân trang NỀN TỐI nên placeholder để màu kem; trong dải
   blog nền sáng thì màu đó gần như tàng hình — đặt lại theo nền sáng. */
.newsletter--boxed input::placeholder { color: var(--text-secondary); opacity: 1; }
.blog-strip__featured {
    background: var(--brand-1); color: var(--brand-2); padding: var(--sp-20);
    display: grid; gap: var(--sp-12); justify-items: start;
    margin-inline-start: 55px; align-self: start;
}
/* "Đọc bài →" trên bản present là chữ thường kèm mũi tên, không phải nút có viền. */
.blog-strip__featured__link { display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--brand-2); }