/** * FILE 4/5 — CSS cho khối Giá Cà Phê Hôm Nay. * Toàn bộ selector được "đóng khung" trong .gcp-wrap nên không ảnh hưởng phần còn lại của theme Flatsome. * Được nạp tự động qua wp_enqueue_style() trong File 3 — không cần dán tay vào Customizer CSS. */ .gcp-wrap{ --ink:#2B1B12; --bazan:#8A3A24; --bazan-dark:#6B2C1B; --cream:#F4EBDA; --cream-2:#EAD9B8; --paper:#FBF6EC; --gold:#B8873E; --olive:#5C6B4A; --slate:#45607A; --up-text:#3F6631; --up-bg:rgba(79,122,61,.13); --down-text:#96301F; --down-bg:rgba(178,58,46,.13); --line:rgba(43,27,18,.16); display:block; position:relative; background:var(--cream); color:var(--ink); font-family:'Be Vietnam Pro',sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; border-radius:18px; overflow:hidden; } .gcp-wrap, .gcp-wrap *{box-sizing:border-box;} .gcp-wrap > *{position:relative; z-index:1;} .gcp-wrap h1, .gcp-wrap h2, .gcp-wrap h3{font-family:'Be Vietnam Pro',sans-serif; margin:0; color:var(--ink);} .gcp-wrap .mono{font-family:'IBM Plex Mono',monospace;} .gcp-wrap a{color:inherit;} .gcp-wrap .gcp-inline-link{color:var(--bazan); font-weight:600; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:2px;} .gcp-wrap .gcp-inline-link:hover{text-decoration-color:var(--bazan);} .gcp-wrap .gcp-inner{max-width:1080px; margin:0 auto; padding:0 24px;} .gcp-wrap .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;} /* ---------- Hero ---------- */ .gcp-wrap .gcp-hero{padding:36px 24px 4px;} .gcp-wrap .gcp-hero .gcp-inner{padding:0; max-width:1080px; margin:0 auto;} .gcp-wrap .gcp-stamp{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.74rem; letter-spacing:.05em; color:var(--bazan-dark); border:1.5px dashed var(--bazan); border-radius:6px; padding:4px 10px; transform:rotate(-2deg); background:var(--paper); white-space:nowrap; margin-bottom:14px; } .gcp-wrap .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--bazan); margin:0 0 10px; } .gcp-wrap .hero-title{ font-family:'Be Vietnam Pro',sans-serif; font-weight:800; font-size:clamp(1.15rem,2.6vw,1.55rem); line-height:1.35; max-width:680px; margin:0 0 22px; color:var(--ink); } .gcp-wrap .method-note{font-size:.82rem; opacity:.62; margin-top:8px; max-width:600px;} .gcp-wrap .price-row{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;} .gcp-wrap .price-main{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:clamp(2.6rem,8vw,4.6rem); letter-spacing:-.02em; line-height:1; color:var(--ink); } .gcp-wrap .price-main .unit{font-size:.32em; font-weight:600; color:var(--bazan-dark); margin-left:6px;} .gcp-wrap .price-change{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:1rem; padding:6px 12px; border-radius:20px; white-space:nowrap; } .gcp-wrap .price-change.down{color:var(--down-text); background:var(--down-bg);} .gcp-wrap .price-change.up{color:var(--up-text); background:var(--up-bg);} .gcp-wrap .price-sub{margin-top:14px; font-size:.98rem; color:var(--ink); opacity:.82;} .gcp-wrap .price-sub strong{font-weight:700;} .gcp-wrap .world-chips{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px;} .gcp-wrap .chip{ background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:10px 16px; font-size:.88rem; display:flex; align-items:center; gap:8px; } .gcp-wrap .chip strong{font-family:'IBM Plex Mono',monospace; font-weight:700;} /* ---------- Sections ---------- */ .gcp-wrap .gcp-section{padding:10px 24px;} .gcp-wrap .section-head{margin-bottom:20px; max-width:640px;} .gcp-wrap .section-head .eyebrow{margin-bottom:6px;} .gcp-wrap .section-head h2{font-size:clamp(1.2rem,2.4vw,1.5rem); font-weight:800; letter-spacing:-.01em;} .gcp-wrap .section-head p{margin:8px 0 0; font-size:.92rem; opacity:.75;} /* ---------- Region price table ---------- */ .gcp-wrap .table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--paper); -webkit-overflow-scrolling:touch; } .gcp-wrap .price-table{width:100%; min-width:640px; border-collapse:collapse;} .gcp-wrap .price-table th, .gcp-wrap .price-table td{padding:14px 16px; text-align:left; border-bottom:1px dashed var(--line); font-size:.92rem; vertical-align:middle;} .gcp-wrap .price-table thead th{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--bazan-dark); background:var(--cream-2); border-bottom:1px solid var(--line); } .gcp-wrap .price-table tbody tr:last-child td, .gcp-wrap .price-table tbody tr:last-child th{border-bottom:none;} .gcp-wrap .price-table tbody th[scope="row"]{font-weight:700; white-space:nowrap;} .gcp-wrap .price-table .price-cell{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:1.02rem; white-space:nowrap;} .gcp-wrap .price-table .change-cell{font-family:'IBM Plex Mono',monospace; font-weight:600; white-space:nowrap;} .gcp-wrap .price-table .change-cell.down{color:var(--down-text);} .gcp-wrap .price-table .change-cell.up{color:var(--up-text);} .gcp-wrap .price-table .change-cell.flat{color:var(--ink); opacity:.6;} .gcp-wrap .price-table .prev-cell{font-family:'IBM Plex Mono',monospace; opacity:.65; white-space:nowrap;} .gcp-wrap .price-table .badge{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.6rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:20px; margin-left:7px; vertical-align:middle; } .gcp-wrap .price-table .badge.high{background:var(--up-bg); color:var(--up-text);} .gcp-wrap .price-table .badge.low{background:var(--down-bg); color:var(--down-text);} .gcp-wrap .price-table .range-cell{min-width:150px;} .gcp-wrap .range-bar{height:6px; border-radius:4px; background:var(--cream-2); overflow:hidden;} .gcp-wrap .range-bar i{display:block; height:100%; background:var(--bazan); border-radius:4px;} /* ---------- Bảng giá vùng đơn giản: luôn 1 hàng ngang gọn, không bao giờ cuộn ngang ---------- */ .gcp-wrap .price-table-simple{ width:100%; min-width:0; border-collapse:collapse; background:var(--paper); border:1.5px solid var(--bazan-dark); border-radius:14px; overflow:hidden; box-shadow:0 3px 0 rgba(43,27,18,.06), 0 8px 24px rgba(43,27,18,.05); } .gcp-wrap .price-table-simple thead{display:table-header-group;} .gcp-wrap .price-table-simple thead tr{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; border-bottom:1.5px solid var(--bazan-dark); background:var(--cream-2); } .gcp-wrap .price-table-simple thead th{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--bazan-dark); } .gcp-wrap .price-table-simple thead th:first-child{flex:0 0 auto; text-align:left;} .gcp-wrap .price-table-simple thead th:not(:first-child){flex:0 0 auto; text-align:right;} .gcp-wrap .price-table-simple tbody tr{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px dashed var(--line); } .gcp-wrap .price-table-simple tbody tr:nth-child(odd){background:var(--cream-2);} /* xen kẽ màu để tách rõ từng hàng khỏi nền trang */ .gcp-wrap .price-table-simple tbody tr:last-child{border-bottom:none;} .gcp-wrap .price-table-simple th[scope="row"]{ font-weight:700; font-size:1.05rem; white-space:normal; text-align:left; flex:0 0 auto; } .gcp-wrap .price-table-simple .ten-ghichu{display:block; font-size:.72rem; font-weight:500; opacity:.55; margin-top:2px;} .gcp-wrap .price-table-simple td{ display:flex; align-items:center; gap:14px; justify-content:flex-end; text-align:right; flex:0 0 auto; } .gcp-wrap .price-table-simple .price-cell{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:1.2rem; color:var(--ink); white-space:nowrap; } .gcp-wrap .price-table-simple .change-cell{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.86rem; padding:6px 12px; border-radius:12px; text-align:center; line-height:1.35; } .gcp-wrap .price-table-simple .change-cell .change-sub{ display:block; font-family:'Be Vietnam Pro',sans-serif; font-weight:500; font-size:.62rem; letter-spacing:.02em; opacity:.75; text-transform:none; margin-top:1px; } .gcp-wrap .price-table-simple .change-cell.down{color:var(--down-text); background:var(--down-bg);} .gcp-wrap .price-table-simple .change-cell.up{color:var(--up-text); background:var(--up-bg);} .gcp-wrap .price-table-simple .change-cell.flat{color:var(--ink); background:var(--cream-2); opacity:.75;} @media (max-width:640px){ /* Trên mobile: cho bảng tràn hết chiều rộng màn hình thay vì bị bó trong padding 24px hai bên */ .gcp-wrap .gcp-regions .gcp-inner{padding-left:0; padding-right:0;} .gcp-wrap .gcp-regions .section-head{padding:0 20px;} .gcp-wrap .price-table-simple{border-radius:0; border-left:none; border-right:none;} .gcp-wrap .price-table-simple thead{display:none;} /* giữ nguyên mobile: ẩn header, tên cột đã rõ qua bố cục 2 dòng */ /* 3 khối (tên vùng / giá / thay đổi) không đủ chỗ nằm chung 1 hàng trên màn hình hẹp -> xuống 2 dòng: tên vùng ở trên, giá + thay đổi ở dưới cạnh nhau */ .gcp-wrap .price-table-simple tbody tr{ flex-wrap:wrap; padding:16px 18px; row-gap:10px; } .gcp-wrap .price-table-simple th[scope="row"]{flex:1 1 100%;} .gcp-wrap .price-table-simple td.price-cell{flex:1 1 auto; justify-content:flex-start;} .gcp-wrap .price-table-simple td.change-cell{flex:0 0 auto; justify-content:flex-end;} .gcp-wrap .price-table-simple .price-cell{font-size:1.1rem;} .gcp-wrap .price-table-simple .change-cell{text-align:right;} } /* ---------- Trend chart ---------- */ .gcp-wrap .legend{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;} .gcp-wrap .legend-chip{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; font-weight:600; padding:6px 12px; border-radius:20px; border:1.5px solid var(--line); background:var(--paper); cursor:pointer; display:flex; align-items:center; gap:7px; transition:opacity .15s ease; } .gcp-wrap .legend-chip .dot{width:9px; height:9px; border-radius:50%;} .gcp-wrap .legend-chip.inactive{opacity:.35;} .gcp-wrap .chart-frame{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:18px 10px 6px; } .gcp-wrap #trendChart{width:100%; height:auto; display:block;} .gcp-wrap #trendChart .grid-line{stroke:var(--line); stroke-width:1;} .gcp-wrap #trendChart .grid-text, .gcp-wrap #trendChart .x-text{ font-family:'IBM Plex Mono',monospace; font-size:11px; fill:var(--ink); opacity:.55; } .gcp-wrap #trendChart polyline{fill:none; stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round;} .gcp-wrap #trendChart .series circle{stroke:var(--paper); stroke-width:2;} .gcp-wrap .series-dl polyline, .gcp-wrap .series-dl circle{stroke:var(--bazan); fill:var(--bazan);} .gcp-wrap .series-gl polyline{stroke:var(--gold); stroke-dasharray:6 4;} .gcp-wrap .series-gl circle{fill:var(--gold);} .gcp-wrap .series-ld polyline, .gcp-wrap .series-ld circle{stroke:var(--olive); fill:var(--olive);} .gcp-wrap .series-tb polyline{stroke:var(--ink); stroke-width:2; stroke-dasharray:2 5; opacity:.8;} .gcp-wrap .series-tb circle{fill:var(--ink); opacity:.8;} .gcp-wrap .series{transition:opacity .15s ease;} .gcp-wrap .trend-note{margin-top:16px; font-size:.9rem; opacity:.8; max-width:640px;} /* ---------- World market ---------- */ .gcp-wrap .world-grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));} .gcp-wrap .world-card{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:22px;} .gcp-wrap .world-card .wc-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;} .gcp-wrap .world-card h3{font-size:1rem; font-weight:700;} .gcp-wrap .world-card .wc-sub{font-size:.76rem; opacity:.6; margin-top:2px;} .gcp-wrap .world-card .wc-price{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:1.9rem; margin-top:10px;} .gcp-wrap .world-card .wc-unit{font-size:.5em; font-weight:600; opacity:.65; margin-left:5px;} /* ---------- Roast grid ---------- */ .gcp-wrap .rang-xay-tb{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:16px; } .gcp-wrap .rang-xay-tb-label{font-size:.86rem; opacity:.75; font-weight:500;} .gcp-wrap .rang-xay-tb-gia{font-weight:700; font-size:1.15rem; color:var(--ink);} .gcp-wrap .rang-xay-tb-doi{font-weight:600; font-size:.84rem; padding:4px 10px; border-radius:20px;} .gcp-wrap .rang-xay-tb-doi.up{color:var(--up-text); background:var(--up-bg);} .gcp-wrap .rang-xay-tb-doi.down{color:var(--down-text); background:var(--down-bg);} .gcp-wrap .rang-xay-tb-doi.flat{color:var(--ink); background:var(--cream-2); opacity:.75;} .gcp-wrap .roast-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));} .gcp-wrap .roast-card{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px 18px;} .gcp-wrap .roast-card .rc-name{font-weight:700; font-size:.92rem;} .gcp-wrap .roast-card .rc-price{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:1.3rem; margin-top:6px;} .gcp-wrap .roast-card .rc-price span{font-size:.55em; font-weight:600; opacity:.6; margin-left:3px;} .gcp-wrap .roast-card .rc-delta{font-family:'IBM Plex Mono',monospace; font-size:.75rem; color:var(--down-text); font-weight:600; margin-top:2px;} .gcp-wrap .roast-card .rc-note{font-size:.78rem; opacity:.68; margin-top:8px;} /* ---------- Insights ---------- */ .gcp-wrap .gcp-insights ul{list-style:none; margin:0; padding:0; display:grid; gap:12px;} .gcp-wrap .gcp-insights li{ display:flex; gap:12px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:.92rem; } .gcp-wrap .gcp-insights li svg{flex-shrink:0; margin-top:2px;} /* ---------- Disclaimer (thay cho