/** * Ô chọn mã vùng điện thoại — phần DÙNG CHUNG cho 3 form (Contact, Send Inquiry, * Checkout). Chỉ gồm cờ + ô tìm kiếm + khung danh sách; phần khung ngoài (kích thước, * viền, khoảng cách) vẫn do CSS riêng của từng form quyết định, nên giao diện 3 form * giữ nguyên như thiết kế. * * Sprite cờ và toạ độ từng nước lấy từ intl-tel-input v29.2.3 (MIT) — * assets/vendor/flags.webp + flags@2x.webp, giấy phép ở assets/vendor/intl-tel-input-LICENSE. * * Sprite CHỈ được tải khi JS gắn `.sj-cc-ready` vào : popup Send Inquiry nằm ở * footer của MỌI trang và chỉ ẩn bằng visibility (không phải display:none), nên nếu gắn * ảnh nền vô điều kiện thì mọi trang đều tải 127KB cờ dù người dùng không mở popup. */ /* Cờ TRONG SPRITE có tỉ lệ 4:3, nên chiều ngang phải suy ra từ chiều cao — 3 form trước đây mỗi form đặt một tỉ lệ khác nhau (1.5 · 1.89 · 1.56) cho ô xám giữ chỗ, dùng lại thì cờ bị kéo méo. Mỗi form chỉ còn khai `--sj-cc-h` (cờ cao bao nhiêu). */ .sj-cc-flag { --sj-cc-h: var(--ico-24); --sj-cc-w: calc(var(--sj-cc-h) * 4 / 3); display: block; flex: 0 0 auto; width: var(--sj-cc-w); height: var(--sj-cc-h); border-radius: 2px; background: var(--sj-n4-nw); /* nền chờ khi sprite chưa tải */ } .sj-cc-ready .sj-cc-flag { background-image: image-set(var(--sj-cc-flags-1x) 1x, var(--sj-cc-flags-2x) 2x); background-repeat: no-repeat; background-position: calc(var(--sj-cc-offset, 0) * var(--sj-cc-w)) 0; background-size: calc(244 * var(--sj-cc-w)) var(--sj-cc-h); box-shadow: 0 0 1px rgba(0, 0, 0, .35); } /* Popup Send Inquiry khai ô cờ 28×18 cứng trong assets/css/sjourney.css — file dùng chung nên đặt phần bù ở đây thay vì sửa vào đó. Cùng độ ưu tiên nên thắng nhờ thứ tự nạp: sjourney-phone-cc khai phụ thuộc vào sjourney-main nên luôn đứng sau. */ .sj-inq-cc__flag { --sj-cc-h: 18px; width: var(--sj-cc-w); height: var(--sj-cc-h); } /* Mục trong danh sách: cờ · tên (giãn) · mã. Không có dòng này thì danh sách của popup Inquiry (`justify-content: space-between`) đẩy cờ và mã ra hai mép. */ .sj-cc-item button { align-items: center; } .sj-cc-item .name { flex: 1 1 auto; min-width: 0; } .sj-cc-item .dial { flex: 0 0 auto; } /* Ô tìm kiếm trong danh sách: 244 nước thì không thể cuộn tay được. */ .sj-cc-search { position: sticky; top: 0; z-index: 1; display: block; width: 100%; box-sizing: border-box; padding: var(--sp-8) var(--sp-16); border: 0; border-bottom: 1px solid var(--sj-n4-nw); background: #fff; font-family: inherit; font-size: var(--fs-20); color: var(--sj-dark); } .sj-cc-search:focus { outline: none; border-bottom-color: var(--sj-red); } .sj-cc-empty { padding: var(--sp-16); font-size: var(--fs-20); color: var(--sj-muted-nw); margin: 0; } .sj-cc-item[hidden] { display: none; } /* Toạ độ từng nước trong sprite (sinh từ intl-tel-input — không sửa tay). */ .sj-cc-flag--ac { --sj-cc-offset: 0; } .sj-cc-flag--ad { --sj-cc-offset: -1; } .sj-cc-flag--ae { --sj-cc-offset: -2; } .sj-cc-flag--af { --sj-cc-offset: -3; } .sj-cc-flag--ag { --sj-cc-offset: -4; } .sj-cc-flag--ai { --sj-cc-offset: -5; } .sj-cc-flag--al { --sj-cc-offset: -6; } .sj-cc-flag--am { --sj-cc-offset: -7; } .sj-cc-flag--ao { --sj-cc-offset: -8; } .sj-cc-flag--ar { --sj-cc-offset: -9; } .sj-cc-flag--as { --sj-cc-offset: -10; } .sj-cc-flag--at { --sj-cc-offset: -11; } .sj-cc-flag--au { --sj-cc-offset: -12; } .sj-cc-flag--aw { --sj-cc-offset: -13; } .sj-cc-flag--ax { --sj-cc-offset: -14; } .sj-cc-flag--az { --sj-cc-offset: -15; } .sj-cc-flag--ba { --sj-cc-offset: -16; } .sj-cc-flag--bb { --sj-cc-offset: -17; } .sj-cc-flag--bd { --sj-cc-offset: -18; } .sj-cc-flag--be { --sj-cc-offset: -19; } .sj-cc-flag--bf { --sj-cc-offset: -20; } .sj-cc-flag--bg { --sj-cc-offset: -21; } .sj-cc-flag--bh { --sj-cc-offset: -22; } .sj-cc-flag--bi { --sj-cc-offset: -23; } .sj-cc-flag--bj { --sj-cc-offset: -24; } .sj-cc-flag--bl { --sj-cc-offset: -25; } .sj-cc-flag--bm { --sj-cc-offset: -26; } .sj-cc-flag--bn { --sj-cc-offset: -27; } .sj-cc-flag--bo { --sj-cc-offset: -28; } .sj-cc-flag--bq { --sj-cc-offset: -29; } .sj-cc-flag--br { --sj-cc-offset: -30; } .sj-cc-flag--bs { --sj-cc-offset: -31; } .sj-cc-flag--bt { --sj-cc-offset: -32; } .sj-cc-flag--bw { --sj-cc-offset: -33; } .sj-cc-flag--by { --sj-cc-offset: -34; } .sj-cc-flag--bz { --sj-cc-offset: -35; } .sj-cc-flag--ca { --sj-cc-offset: -36; } .sj-cc-flag--cc { --sj-cc-offset: -37; } .sj-cc-flag--cd { --sj-cc-offset: -38; } .sj-cc-flag--cf { --sj-cc-offset: -39; } .sj-cc-flag--cg { --sj-cc-offset: -40; } .sj-cc-flag--ch { --sj-cc-offset: -41; } .sj-cc-flag--ci { --sj-cc-offset: -42; } .sj-cc-flag--ck { --sj-cc-offset: -43; } .sj-cc-flag--cl { --sj-cc-offset: -44; } .sj-cc-flag--cm { --sj-cc-offset: -45; } .sj-cc-flag--cn { --sj-cc-offset: -46; } .sj-cc-flag--co { --sj-cc-offset: -47; } .sj-cc-flag--cr { --sj-cc-offset: -48; } .sj-cc-flag--cu { --sj-cc-offset: -49; } .sj-cc-flag--cv { --sj-cc-offset: -50; } .sj-cc-flag--cw { --sj-cc-offset: -51; } .sj-cc-flag--cx { --sj-cc-offset: -52; } .sj-cc-flag--cy { --sj-cc-offset: -53; } .sj-cc-flag--cz { --sj-cc-offset: -54; } .sj-cc-flag--de { --sj-cc-offset: -55; } .sj-cc-flag--dj { --sj-cc-offset: -56; } .sj-cc-flag--dk { --sj-cc-offset: -57; } .sj-cc-flag--dm { --sj-cc-offset: -58; } .sj-cc-flag--do { --sj-cc-offset: -59; } .sj-cc-flag--dz { --sj-cc-offset: -60; } .sj-cc-flag--ec { --sj-cc-offset: -61; } .sj-cc-flag--ee { --sj-cc-offset: -62; } .sj-cc-flag--eg { --sj-cc-offset: -63; } .sj-cc-flag--eh { --sj-cc-offset: -64; } .sj-cc-flag--er { --sj-cc-offset: -65; } .sj-cc-flag--es { --sj-cc-offset: -66; } .sj-cc-flag--et { --sj-cc-offset: -67; } .sj-cc-flag--fi { --sj-cc-offset: -68; } .sj-cc-flag--fj { --sj-cc-offset: -69; } .sj-cc-flag--fk { --sj-cc-offset: -70; } .sj-cc-flag--fm { --sj-cc-offset: -71; } .sj-cc-flag--fo { --sj-cc-offset: -72; } .sj-cc-flag--fr { --sj-cc-offset: -73; } .sj-cc-flag--ga { --sj-cc-offset: -74; } .sj-cc-flag--gb { --sj-cc-offset: -75; } .sj-cc-flag--gd { --sj-cc-offset: -76; } .sj-cc-flag--ge { --sj-cc-offset: -77; } .sj-cc-flag--gf { --sj-cc-offset: -78; } .sj-cc-flag--gg { --sj-cc-offset: -79; } .sj-cc-flag--gh { --sj-cc-offset: -80; } .sj-cc-flag--gi { --sj-cc-offset: -81; } .sj-cc-flag--gl { --sj-cc-offset: -82; } .sj-cc-flag--gm { --sj-cc-offset: -83; } .sj-cc-flag--gn { --sj-cc-offset: -84; } .sj-cc-flag--gp { --sj-cc-offset: -85; } .sj-cc-flag--gq { --sj-cc-offset: -86; } .sj-cc-flag--gr { --sj-cc-offset: -87; } .sj-cc-flag--gt { --sj-cc-offset: -88; } .sj-cc-flag--gu { --sj-cc-offset: -89; } .sj-cc-flag--gw { --sj-cc-offset: -90; } .sj-cc-flag--gy { --sj-cc-offset: -91; } .sj-cc-flag--hk { --sj-cc-offset: -92; } .sj-cc-flag--hn { --sj-cc-offset: -93; } .sj-cc-flag--hr { --sj-cc-offset: -94; } .sj-cc-flag--ht { --sj-cc-offset: -95; } .sj-cc-flag--hu { --sj-cc-offset: -96; } .sj-cc-flag--id { --sj-cc-offset: -97; } .sj-cc-flag--ie { --sj-cc-offset: -98; } .sj-cc-flag--il { --sj-cc-offset: -99; } .sj-cc-flag--im { --sj-cc-offset: -100; } .sj-cc-flag--in { --sj-cc-offset: -101; } .sj-cc-flag--io { --sj-cc-offset: -102; } .sj-cc-flag--iq { --sj-cc-offset: -103; } .sj-cc-flag--ir { --sj-cc-offset: -104; } .sj-cc-flag--is { --sj-cc-offset: -105; } .sj-cc-flag--it { --sj-cc-offset: -106; } .sj-cc-flag--je { --sj-cc-offset: -107; } .sj-cc-flag--jm { --sj-cc-offset: -108; } .sj-cc-flag--jo { --sj-cc-offset: -109; } .sj-cc-flag--jp { --sj-cc-offset: -110; } .sj-cc-flag--ke { --sj-cc-offset: -111; } .sj-cc-flag--kg { --sj-cc-offset: -112; } .sj-cc-flag--kh { --sj-cc-offset: -113; } .sj-cc-flag--ki { --sj-cc-offset: -114; } .sj-cc-flag--km { --sj-cc-offset: -115; } .sj-cc-flag--kn { --sj-cc-offset: -116; } .sj-cc-flag--kp { --sj-cc-offset: -117; } .sj-cc-flag--kr { --sj-cc-offset: -118; } .sj-cc-flag--kw { --sj-cc-offset: -119; } .sj-cc-flag--ky { --sj-cc-offset: -120; } .sj-cc-flag--kz { --sj-cc-offset: -121; } .sj-cc-flag--la { --sj-cc-offset: -122; } .sj-cc-flag--lb { --sj-cc-offset: -123; } .sj-cc-flag--lc { --sj-cc-offset: -124; } .sj-cc-flag--li { --sj-cc-offset: -125; } .sj-cc-flag--lk { --sj-cc-offset: -126; } .sj-cc-flag--lr { --sj-cc-offset: -127; } .sj-cc-flag--ls { --sj-cc-offset: -128; } .sj-cc-flag--lt { --sj-cc-offset: -129; } .sj-cc-flag--lu { --sj-cc-offset: -130; } .sj-cc-flag--lv { --sj-cc-offset: -131; } .sj-cc-flag--ly { --sj-cc-offset: -132; } .sj-cc-flag--ma { --sj-cc-offset: -133; } .sj-cc-flag--mc { --sj-cc-offset: -134; } .sj-cc-flag--md { --sj-cc-offset: -135; } .sj-cc-flag--me { --sj-cc-offset: -136; } .sj-cc-flag--mf { --sj-cc-offset: -137; } .sj-cc-flag--mg { --sj-cc-offset: -138; } .sj-cc-flag--mh { --sj-cc-offset: -139; } .sj-cc-flag--mk { --sj-cc-offset: -140; } .sj-cc-flag--ml { --sj-cc-offset: -141; } .sj-cc-flag--mm { --sj-cc-offset: -142; } .sj-cc-flag--mn { --sj-cc-offset: -143; } .sj-cc-flag--mo { --sj-cc-offset: -144; } .sj-cc-flag--mp { --sj-cc-offset: -145; } .sj-cc-flag--mq { --sj-cc-offset: -146; } .sj-cc-flag--mr { --sj-cc-offset: -147; } .sj-cc-flag--ms { --sj-cc-offset: -148; } .sj-cc-flag--mt { --sj-cc-offset: -149; } .sj-cc-flag--mu { --sj-cc-offset: -150; } .sj-cc-flag--mv { --sj-cc-offset: -151; } .sj-cc-flag--mw { --sj-cc-offset: -152; } .sj-cc-flag--mx { --sj-cc-offset: -153; } .sj-cc-flag--my { --sj-cc-offset: -154; } .sj-cc-flag--mz { --sj-cc-offset: -155; } .sj-cc-flag--na { --sj-cc-offset: -156; } .sj-cc-flag--nc { --sj-cc-offset: -157; } .sj-cc-flag--ne { --sj-cc-offset: -158; } .sj-cc-flag--nf { --sj-cc-offset: -159; } .sj-cc-flag--ng { --sj-cc-offset: -160; } .sj-cc-flag--ni { --sj-cc-offset: -161; } .sj-cc-flag--nl { --sj-cc-offset: -162; } .sj-cc-flag--no { --sj-cc-offset: -163; } .sj-cc-flag--np { --sj-cc-offset: -164; } .sj-cc-flag--nr { --sj-cc-offset: -165; } .sj-cc-flag--nu { --sj-cc-offset: -166; } .sj-cc-flag--nz { --sj-cc-offset: -167; } .sj-cc-flag--om { --sj-cc-offset: -168; } .sj-cc-flag--pa { --sj-cc-offset: -169; } .sj-cc-flag--pe { --sj-cc-offset: -170; } .sj-cc-flag--pf { --sj-cc-offset: -171; } .sj-cc-flag--pg { --sj-cc-offset: -172; } .sj-cc-flag--ph { --sj-cc-offset: -173; } .sj-cc-flag--pk { --sj-cc-offset: -174; } .sj-cc-flag--pl { --sj-cc-offset: -175; } .sj-cc-flag--pm { --sj-cc-offset: -176; } .sj-cc-flag--pr { --sj-cc-offset: -177; } .sj-cc-flag--ps { --sj-cc-offset: -178; } .sj-cc-flag--pt { --sj-cc-offset: -179; } .sj-cc-flag--pw { --sj-cc-offset: -180; } .sj-cc-flag--py { --sj-cc-offset: -181; } .sj-cc-flag--qa { --sj-cc-offset: -182; } .sj-cc-flag--re { --sj-cc-offset: -183; } .sj-cc-flag--ro { --sj-cc-offset: -184; } .sj-cc-flag--rs { --sj-cc-offset: -185; } .sj-cc-flag--ru { --sj-cc-offset: -186; } .sj-cc-flag--rw { --sj-cc-offset: -187; } .sj-cc-flag--sa { --sj-cc-offset: -188; } .sj-cc-flag--sb { --sj-cc-offset: -189; } .sj-cc-flag--sc { --sj-cc-offset: -190; } .sj-cc-flag--sd { --sj-cc-offset: -191; } .sj-cc-flag--se { --sj-cc-offset: -192; } .sj-cc-flag--sg { --sj-cc-offset: -193; } .sj-cc-flag--sh { --sj-cc-offset: -194; } .sj-cc-flag--si { --sj-cc-offset: -195; } .sj-cc-flag--sj { --sj-cc-offset: -196; } .sj-cc-flag--sk { --sj-cc-offset: -197; } .sj-cc-flag--sl { --sj-cc-offset: -198; } .sj-cc-flag--sm { --sj-cc-offset: -199; } .sj-cc-flag--sn { --sj-cc-offset: -200; } .sj-cc-flag--so { --sj-cc-offset: -201; } .sj-cc-flag--sr { --sj-cc-offset: -202; } .sj-cc-flag--ss { --sj-cc-offset: -203; } .sj-cc-flag--st { --sj-cc-offset: -204; } .sj-cc-flag--sv { --sj-cc-offset: -205; } .sj-cc-flag--sx { --sj-cc-offset: -206; } .sj-cc-flag--sy { --sj-cc-offset: -207; } .sj-cc-flag--sz { --sj-cc-offset: -208; } .sj-cc-flag--tc { --sj-cc-offset: -209; } .sj-cc-flag--td { --sj-cc-offset: -210; } .sj-cc-flag--tg { --sj-cc-offset: -211; } .sj-cc-flag--th { --sj-cc-offset: -212; } .sj-cc-flag--tj { --sj-cc-offset: -213; } .sj-cc-flag--tk { --sj-cc-offset: -214; } .sj-cc-flag--tl { --sj-cc-offset: -215; } .sj-cc-flag--tm { --sj-cc-offset: -216; } .sj-cc-flag--tn { --sj-cc-offset: -217; } .sj-cc-flag--to { --sj-cc-offset: -218; } .sj-cc-flag--tr { --sj-cc-offset: -219; } .sj-cc-flag--tt { --sj-cc-offset: -220; } .sj-cc-flag--tv { --sj-cc-offset: -221; } .sj-cc-flag--tw { --sj-cc-offset: -222; } .sj-cc-flag--tz { --sj-cc-offset: -223; } .sj-cc-flag--ua { --sj-cc-offset: -224; } .sj-cc-flag--ug { --sj-cc-offset: -225; } .sj-cc-flag--us { --sj-cc-offset: -226; } .sj-cc-flag--uy { --sj-cc-offset: -227; } .sj-cc-flag--uz { --sj-cc-offset: -228; } .sj-cc-flag--va { --sj-cc-offset: -229; } .sj-cc-flag--vc { --sj-cc-offset: -230; } .sj-cc-flag--ve { --sj-cc-offset: -231; } .sj-cc-flag--vg { --sj-cc-offset: -232; } .sj-cc-flag--vi { --sj-cc-offset: -233; } .sj-cc-flag--vn { --sj-cc-offset: -234; } .sj-cc-flag--vu { --sj-cc-offset: -235; } .sj-cc-flag--wf { --sj-cc-offset: -236; } .sj-cc-flag--ws { --sj-cc-offset: -237; } .sj-cc-flag--xk { --sj-cc-offset: -238; } .sj-cc-flag--ye { --sj-cc-offset: -239; } .sj-cc-flag--yt { --sj-cc-offset: -240; } .sj-cc-flag--za { --sj-cc-offset: -241; } .sj-cc-flag--zm { --sj-cc-offset: -242; } .sj-cc-flag--zw { --sj-cc-offset: -243; }