/* ============================================================================ TRANG CHI TIẾT MỘT QUỐC GIA — THIẾT KẾ 2026 Template: single-countries.php. Bộ style gốc là styles/ent-countries.css (867 dòng, dùng chung với trang danh sách /countries/). File này là LỚP PHỦ kéo trang về hệ 2026 mà không đụng vào template — xem [[styling-overlay-approach]]. Trang này KHÔNG mang class .sr-tools: nó là bài dài, các luật chữ chung của nhóm Free Tools sẽ đè lên những dòng nội dung vốn được in ra bằng thẻ

. Body class riêng là .sr-country (functions.php). Bảy dải nội dung, theo đúng thứ tự trong template: .banner-top ảnh quốc gia + tiêu đề .profxf hai thẻ giá cước .shiptipinfo mẹo vận chuyển .customfees thuế nhập khẩu + bảng thuế theo ngành hàng .documents giấy tờ cần có .ffgxc hàng cấm và hạn chế .search-duty ô tìm quốc gia + bốn thẻ quốc gia khác MỤC LỤC 1. Nền chung: cột nội dung, chữ 2. Hero 3. Nền xen kẽ của các dải 4. Thẻ 5. Bảng thuế và các mảng màu còn sót 6. Ô tìm kiếm và thẻ quốc gia 7. Mobile ========================================================================== / / --------------------------------------------------------------------------- 1. NỀN CHUNG --------------------------------------------------------------------------- / / Đặt trên .ent-full chứ không trên .sr-country: .sr-country là class của , đặt font ở đó là đè luôn cả menu đầu trang và chân trang. Bảy dải nội dung đều là .ent-full nên bọc đủ phần thân bài. / .sr-country .ent-full { font-family: var(--sr-font); color: var(--sr-neutral-700); } / Cột nội dung cũ rộng 1320px, các trang 2026 khác đều 1120px. / .sr-country .ent-container { max-width: var(--sr-container); padding-left: var(--sr-gutter); padding-right: var(--sr-gutter); box-sizing: border-box; } / Tiêu đề dải và tiêu đề thẻ. Liệt kê từng cái thay vì bắt chung h2/h3: .rightshipif h3 và .ffgxcflex_item p là NỘI DUNG chứ không phải tiêu đề, template in ra bằng thẻ tiêu đề cho tiện chứ không có ý nhấn. / .sr-country .mtapro h2, .sr-country .leftshipif > h2, .sr-country .left_customfees h2, .sr-country .topdoc > h2 { font-family: 'Phudu', var(--sr-font); font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--sr-navy-900); } .sr-country .proship-item > h3, .sr-country .top_right_customfees > h3, .sr-country .bottom_right_customfees > h3, .sr-country .item_invoice h3, .sr-country .searchx-single-full a h3, .sr-country .ffgxcflex_item > h4, .sr-country .botttx-note h4, .sr-country .invoicebottom h3 { font-family: 'Phudu', var(--sr-font); font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--sr-navy-900); } .sr-country .ent-full p, .sr-country .ent-full li { font-family: var(--sr-font); font-size: 16px; line-height: 1.6; color: var(--sr-neutral-700); } .sr-country .mtapro p, .sr-country .topdoc p { max-width: 720px; margin-left: auto; margin-right: auto; font-size: 18px; } / Mỗi dòng mẹo vận chuyển là một thẻ

— giữ nguyên dáng chữ chạy. / .sr-country .rightshipif h3 { font-family: var(--sr-font); font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--sr-neutral-700); } / --------------------------------------------------------------------------- 2. HERO Ảnh quốc gia là nội dung thật (mỗi nước một ảnh) nên giữ lại, chỉ thay lớp phủ xanh dương cũ bằng gradient navy → tím của hệ 2026. --------------------------------------------------------------------------- / .sr-country .banner-top { position: relative; background: var(--sr-navy-900); } .sr-country .banner-top::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(26, 55, 89, 0.82) 0%, rgba(86, 41, 114, 0.72) 100%); } .sr-country .banner-top img { display: block; max-height: 480px; height: 480px; width: 100%; object-fit: cover; } / .destitle vốn absolute + z-index 1; đẩy lên trên lớp phủ và nới bề ngang — max-width 50% làm tiêu đề dài bị bó thành 4 dòng. / .sr-country .destitle { z-index: 2; max-width: min(760px, 100% - 2 var(--sr-gutter)); } .sr-country .destitle h1 { font-family: 'Phudu', var(--sr-font); font-size: clamp(32px, 4vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--sr-neutral-0); } .sr-country .banner-top p, .sr-country .destitle p, .sr-country .destitle .rank-math-breadcrumb { font-family: var(--sr-font); font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); } .sr-country .destitle a { color: rgba(255, 255, 255, 0.88); text-decoration: none; } .sr-country .destitle a:hover { color: var(--sr-neutral-0); text-decoration: underline; } /* --------------------------------------------------------------------------- 3. NỀN XEN KẼ CỦA CÁC DẢI Bản gốc: xám #F9FAFB và xanh #E6F0F9 đặt rải rác, hai dải xám có lúc dính liền nhau. Đổi sang trắng / tím nhạt xen kẽ đều để ranh giới luôn thấy được. --------------------------------------------------------------------------- / .sr-country .profxf, .sr-country .customfees, .sr-country .ffgxc { background: var(--sr-neutral-0); } .sr-country .shiptipinfo, .sr-country .documents, .sr-country .search-duty { background: rgb(248, 244, 255); } .sr-country .profxf, .sr-country .shiptipinfo, .sr-country .customfees, .sr-country .documents, .sr-country .ffgxc, .sr-country .search-duty { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); } / --------------------------------------------------------------------------- 4. THẺ — nền trắng, viền 1px vẽ bằng inset shadow, bo 16, nhấc nhẹ khi rê chuột; cùng ngôn ngữ với thẻ ở trang chủ và các trang 2026 khác. --------------------------------------------------------------------------- / .sr-country .proship-item, .sr-country .rightshipif, .sr-country .bottom_right_customfees, .sr-country .item_invoice, .sr-country .ffgxcflex_item, .sr-country .tablerf { border: 0; border-radius: 16px; background: var(--sr-neutral-0); box-shadow: inset 0 0 0 1px rgb(219, 221, 225); transition: transform 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) { .sr-country .proship-item:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgb(219, 221, 225), 0 40px 40px -24px rgba(0, 0, 0, 0.12); } } / Khung bao quanh bảng thuế: nền xanh nhạt #E6F0F9 → tím nhạt. / .sr-country .right_customfees { border: 0; border-radius: 16px; background: rgb(248, 244, 255); box-shadow: inset 0 0 0 1px rgb(219, 221, 225); } / Ô ghi chú cuối phần giấy tờ: nền xanh #EFF6FF → tím nhạt. / .sr-country .invoicebottom { border: 0; border-radius: 16px; background: rgb(248, 244, 255); box-shadow: inset 0 0 0 1px rgb(219, 221, 225); } / Ô cảnh báo giữ tông vàng — đó là màu cảnh báo, không phải màu thương hiệu. / .sr-country .botttx-note { border: 0; border-radius: 16px; box-shadow: inset 0 0 0 1px rgb(238, 226, 178); } / Từng mặt hàng cấm là một ô chữ nhỏ trong thẻ. / .sr-country .ffgxcflex_item p { border: 0; border-radius: var(--sr-radius); box-shadow: inset 0 0 0 1px rgb(219, 221, 225); color: var(--sr-neutral-700); } / --------------------------------------------------------------------------- 5. BẢNG THUẾ VÀ CÁC MẢNG MÀU CÒN SÓT --------------------------------------------------------------------------- / / Hàng tiêu đề bảng: nền xám + chữ đen → nền tím nhạt + chữ hoa tím, giống .rates-table th ở trang tính phí PayPal. / .sr-country .tablerf .headn { background: rgb(248, 244, 255); font-family: var(--sr-font-menu); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sr-purple-700); } .sr-country .tablerf_name, .sr-country .tablerf_value { border-color: rgb(230, 232, 236); } / Con số phần trăm vốn là xanh dương #2563EB. / .sr-country .tablerf_value { color: var(--sr-purple-700); } / --------------------------------------------------------------------------- 6. Ô TÌM KIẾM VÀ THẺ QUỐC GIA Ở CUỐI TRANG --------------------------------------------------------------------------- / .sr-country .searchx-single { max-width: 720px; height: 52px; border: 0; border-radius: var(--sr-radius); box-shadow: inset 0 0 0 1px rgb(219, 221, 225); color: var(--sr-neutral-500); } .sr-country .searchx-single input { font-family: var(--sr-font); font-size: 16px; color: var(--sr-navy-900); background: transparent; } .sr-country .searchx-single:focus-within { box-shadow: inset 0 0 0 1px var(--sr-purple-500), 0 0 0 3px var(--sr-purple-100); } .sr-country .searchx-single-full a { display: block; border-radius: 16px; background: var(--sr-neutral-0); box-shadow: inset 0 0 0 1px rgb(219, 221, 225); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .sr-country .searchx-single-full a img { border-radius: 12px; aspect-ratio: 3 / 2; height: auto; } @media (hover: hover) { .sr-country .searchx-single-full a:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgb(219, 221, 225), 0 40px 40px -24px rgba(0, 0, 0, 0.12); } .sr-country .searchx-single-full a:hover h3 { color: var(--sr-purple-700); } } / Link "View Details →" dùng kiểu link CTA dạng chữ ở styles/ent-buttons.css. / / --------------------------------------------------------------------------- 7. MOBILE --------------------------------------------------------------------------- / @media (max-width: 900px) { .sr-country .banner-top img { height: 380px; } .sr-country .destitle { max-width: calc(100% - 2 var(--sr-gutter)); } .sr-country .profxf, .sr-country .shiptipinfo, .sr-country .customfees, .sr-country .documents, .sr-country .ffgxc, .sr-country .search-duty { padding-top: 48px; padding-bottom: 48px; } /* Bảng thuế rộng hơn màn hình thì cho cuộn ngang trong khung riêng. */ .sr-country .bottom_right_customfees { overflow-x: auto; } }