:root{--navy:#071c3b;--navy-2:#0b315c;--blue:#0969da;--orange:#ff8b2c;--teal:#0b9d8a;--ink:#10243f;--muted:#62748e;--line:#dfe7ef;--surface:#fff;--shadow:0 14px 38px rgba(10,42,79,.07)}
html{scroll-padding-top:90px}
body,body.subpage{background:radial-gradient(circle at 12% 3%,#e8f3ff 0,transparent 27%),linear-gradient(180deg,#f4f8fc 0%,#f7f9fc 65%,#edf4f8 100%);color:var(--ink)}
a{color:var(--blue)}
header,.subpage header{height:auto;min-height:76px;background:rgba(255,255,255,.96);border-bottom:1px solid #e2e9f0;box-shadow:0 4px 24px rgba(7,28,59,.05);position:relative;z-index:20}
.nav-wrap,.subpage .nav-wrap{max-width:1280px;min-height:76px;height:auto;padding:0 24px;gap:24px}
.brand,.subpage .brand{font-size:17px;letter-spacing:-.4px;line-height:1.03;color:var(--navy)}
.brand small{font-size:11px;letter-spacing:2.2px;margin-top:3px}
.brand-drop{width:38px;height:40px;border-radius:11px;font-size:25px;background:linear-gradient(155deg,#0c2a51,#07172f);box-shadow:0 6px 16px rgba(7,28,59,.16)}
nav,.subpage nav{gap:2px;align-items:center;overflow:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a,.subpage nav a{font-size:13px;font-weight:650;padding:0 11px;height:40px;border-radius:9px;color:#35516f;transition:background .2s,color .2s;white-space:nowrap}
nav a:hover,.subpage nav a:hover{background:#edf5ff;color:var(--blue)}
nav a.active,.subpage nav a.active{background:#e9f3ff;border:0;color:#0568d9}
.search{height:38px;width:230px;border-radius:10px;padding:0 10px;background:#f7faff;border-color:#dce7f2;flex:none}
.search input{font-size:12px}
.hero{height:445px;isolation:isolate;overflow:hidden;background:#061a35}
.hero-photo{position:absolute;top:0;right:0;left:auto;width:58%;height:100%;object-fit:cover;object-position:center 50%;opacity:.8}
.hero:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#061a35 0%,#08284c 43%,rgba(7,29,55,.76) 59%,rgba(7,29,55,.15) 100%)}
.hero:after{content:"";position:absolute;z-index:1;width:600px;height:600px;left:-180px;bottom:-430px;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 95px rgba(255,255,255,.025),0 0 0 190px rgba(255,255,255,.018)}
.hero-content{z-index:2;max-width:1280px;padding:44px 24px 28px;background:none;display:flex;flex-direction:column;align-items:flex-start}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(120,215,255,.28);border-radius:99px;background:rgba(25,117,191,.17);padding:7px 12px;color:#b7e9ff;font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:18px}
.hero-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:#2ee6c3;box-shadow:0 0 0 4px rgba(46,230,195,.13)}
.hero h1{font-size:41px;line-height:1.14;letter-spacing:-1.8px;font-weight:800;max-width:740px;margin:0 0 16px}
.hero h1 strong{font-size:58px;line-height:1.07;letter-spacing:-2.4px;color:#ffad51;margin-top:3px}
.hero p{font-size:16px;line-height:1.65;max-width:590px;color:#d4e5f4;margin:0}
.hero-actions{display:flex;gap:11px;margin-top:26px}
.hero-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:10px;font-size:14px;font-weight:800;transition:transform .2s,box-shadow .2s}
.hero-actions a:hover{transform:translateY(-2px)}
.hero-actions a:first-child{background:#ff922e;color:#15243c;box-shadow:0 10px 28px rgba(255,142,48,.26)}
.hero-actions a:last-child{color:white;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.08)}
.benefits{width:100%;gap:12px;margin-top:auto;max-width:980px}
.benefits>div{padding:10px 13px 10px 9px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.075);border-radius:12px;backdrop-filter:blur(8px);font-size:12px;line-height:1.45;color:#e4f1fa;min-width:0}
.benefits i{border-radius:9px;width:34px;height:34px;font-size:21px}
main{max-width:1280px;padding:0 24px;margin:25px auto 40px;gap:18px}
.panel,.sub-main .panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px;overflow:hidden}
main h2{font-size:19px;line-height:1.4;letter-spacing:-.5px;color:#0a264b}
.section-head{margin-bottom:16px;gap:12px;flex-wrap:wrap}
.section-head h2{margin:0}
.section-head svg,.panel>h2 svg{width:24px;height:24px;color:var(--blue)}
.reference-sections{margin-top:-42px;position:relative;z-index:4;padding:17px 20px}
.reference-sections h2{font-size:13px;letter-spacing:.6px;text-transform:uppercase;margin:0 0 11px;color:#0d3e72}
.reference-sections .home-topic-links{display:flex;flex-wrap:wrap;gap:8px}
.reference-sections .home-topic-links a{flex:1 0 auto;text-align:center;border-radius:9px;padding:9px 12px;background:#f5f9fe;color:#22547f;font-size:12px;font-weight:700;border:1px solid #e1ebf5;transition:all .2s}
.reference-sections .home-topic-links a:hover{background:#0d65c8;border-color:#0d65c8;color:#fff;transform:translateY(-2px)}
.reference-sections p{font-size:12px;line-height:1.5;margin:11px 0 0;color:#71829b}
.top-grid{grid-template-columns:minmax(0,2.4fr) minmax(290px,1fr);gap:18px}
.prices{padding:23px!important}
.prices .section-head{position:relative;padding-bottom:14px;border-bottom:1px solid #e8eef5}
.prices .section-head h2{font-size:20px}
.prices .section-head small{font-size:13px;color:#72829b;font-weight:500;margin-left:3px}
.updated{font-size:12px;color:#8290a6}
.orange-button{border-radius:9px;padding:9px 14px;background:#ff912f;color:#182844;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 6px 16px rgba(255,145,47,.21)}
.price-cards{gap:10px;margin-top:0;grid-template-columns:repeat(6,minmax(0,1fr))}
.price-card{min-height:178px;height:auto;padding:15px 8px 13px;border-radius:12px;border:1px solid #e5ebf2;background:#f9fbfe;position:relative;overflow:hidden;transition:transform .22s,box-shadow .22s}
.price-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#0f74df;opacity:.35}
.price-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(6,47,92,.12)}
.price-card:first-child{background:linear-gradient(155deg,#0c4d90,#071e42);border-color:#0d477f;box-shadow:0 10px 25px rgba(7,50,100,.19)}
.price-card:first-child:before{width:100%;height:3px;bottom:auto;background:#ffa43f;opacity:1}
.price-card:first-child svg,.price-card:first-child .fuel-name,.price-card:first-child .unit,.price-card:first-child strong{color:#fff!important}
.price-card:first-child .change{color:#a9f1db}
.price-card:nth-child(2):before{background:#ff8b2c;opacity:1}
.price-card:nth-child(4):before{background:#f04b56;opacity:1}
.price-card svg{width:29px;height:29px;margin-bottom:8px}
.fuel-name{font-size:12px;min-height:38px;line-height:1.35;font-weight:750}
.price-card strong{font-size:23px;letter-spacing:-.5px;margin:7px 0 2px}
.unit{font-size:11px}
.change{font-size:12px;font-weight:750}
.adjustment{background:linear-gradient(155deg,#0b315b,#061c39)!important;border-color:#0b315b!important;color:#e8f3ff;padding:24px!important}
.adjustment h2{font-size:20px;color:#fff;margin-bottom:19px}
.adjust-row{padding:13px 10px;line-height:1.6;border:1px solid rgba(255,255,255,.12);border-radius:10px;margin-bottom:10px;background:rgba(255,255,255,.065);font-size:13px}
.adjust-row.shaded{background:rgba(255,255,255,.08)}
.adjust-row strong{color:#fff;font-size:14px;margin-top:3px}
.adjust-row strong.green-text{color:#9cf2d3}
.adjust-row strong.red-text{color:#ff9b9b}
.large-icon{color:#ffae53}
.adjustment>a{color:#a9d9ff;font-size:12px;line-height:2.1}
.trend,.comparison{padding:22px!important}
.trend .section-head h2{font-size:19px}
.periods{margin-left:auto;gap:5px}
.periods button,.fuel-tabs button{padding:8px 11px;border-radius:8px;background:#f0f5fb;color:#47617e;font-size:12px;font-weight:700;border:1px solid #e1eaf3}
.periods button.selected,.fuel-tabs button.selected{background:#0b65c9;border-color:#0b65c9;box-shadow:0 5px 12px #0b65c933}
.fuel-tabs{margin-top:0;gap:6px}
.chart-legend{margin:9px 16px 3px;font-size:12px}
#line-chart{height:220px;aspect-ratio:auto;margin-top:4px}
.comparison .bar-row{grid-template-columns:125px minmax(0,1fr) 53px;margin-bottom:13px;font-size:12px}
.comparison .bar{border-radius:5px;height:18px}
.comparison .axis{margin-left:131px}
.middle-grid{grid-template-columns:minmax(0,1.75fr) minmax(220px,.9fr) minmax(220px,.9fr);gap:18px}
.middle-grid>.panel{height:auto;min-height:300px}
.details table{border-radius:9px}
.details th{background:#edf4fb;color:#385b7f;font-weight:700}
.details td,.details th{padding:8px 7px}
.calculator select,.liter-input{border-radius:9px}
.total{border-radius:10px;background:#eaf5ff}
.world-table>div{border-bottom:1px solid #e9eef4}
.world-table b{color:#092c57}
.market-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.market-grid>.panel{min-width:0;margin:0}
.market-grid .market-table{min-width:0}
.market-grid .market-table th,.market-grid .market-table td{padding-left:10px;padding-right:10px}
.market-grid .market-table th:first-child,.market-grid .market-table td:first-child{width:42%}
.market-panel{box-shadow:var(--shadow)!important;border-radius:16px!important;padding:22px!important}
.market-head h2{font-size:19px!important}
.market-table th{background:#edf4fb}
.market-table tbody tr:nth-child(even){background:#f8fbfe}
.market-table tbody tr:hover{background:#eaf5ff}
.market-table .price-main{color:#0a3972}
.market-table .price-unit,.market-table .change-unit{display:block;margin-top:3px;color:#71849a;font-size:10px;font-weight:500;line-height:1.25;white-space:nowrap}
.market-table .item-sub{display:block;margin-top:3px;color:#71849a;font-size:11px;font-weight:500}
.market-date-control{display:grid;grid-template-columns:auto;gap:4px;flex:none;min-width:148px;color:#536b89;font-size:11px;font-weight:700;line-height:1.2}
.market-date-control input{width:148px;height:39px;padding:7px 10px;border:1px solid #cbd9e8;border-radius:9px;background:#fff;color:#0b2f5b;font-size:13px;font-weight:700;box-shadow:0 3px 10px rgba(13,54,99,.06)}
.market-date-control input:hover{border-color:#8eb6e6}
.market-date-control input:disabled{cursor:wait;opacity:.7;background:#f3f7fb}
.market-date-control .date-feedback{min-height:13px;color:#17835b;font-size:10px;font-weight:600;white-space:nowrap}
.market-date-control .date-feedback:empty{display:none}
.market-date-control.is-loading .date-feedback{color:#54708f}
.market-head>.market-date-control{margin-left:auto}
.sub-section>.market-date-control{width:max-content;margin:-5px 0 14px auto}
.prices .section-head>.market-date-control{margin-left:auto}
.home-extra-links a{border-radius:10px;padding:14px 15px;font-weight:700;background:#f4f9fd}
.news{padding:24px!important}
.news-grid{gap:16px}
.news-card{border:1px solid #e4ebf2;border-radius:13px;overflow:hidden;background:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s}
.news-card:hover{transform:translateY(-4px);box-shadow:0 13px 27px rgba(6,38,77,.12)}
.news-photo{border-radius:0;aspect-ratio:1.72}
.news-card time,.news-card h3,.news-card p{margin-left:13px;margin-right:13px}
.news-card time{font-size:11px;color:#7589a0;margin-top:11px}
.news-card h3{font-size:14px;line-height:1.45;color:#0b315e}
.news-card p{font-size:12px;line-height:1.5;margin-bottom:14px;color:#65768c}
.bottom-grid{gap:18px}
.stores,.knowledge{padding:23px!important}
.store-layout{gap:16px}
.map{border-radius:11px}
.knowledge-row{border-radius:9px;transition:background .2s}
.knowledge-row:hover{background:#f2f8fe}
#hoi-dap{padding:24px}
#hoi-dap details{padding:14px 5px}
#hoi-dap summary{font-weight:700}
footer{background:#061b35;padding-top:35px}
footer .brand,footer h3{color:#fff}
footer a,footer p{color:#c1d3e8}
footer .copyright{border-color:rgba(255,255,255,.12);color:#9eb3ca}
footer a:hover{color:#ffaf5b}

/* Footer Grid and Company Information Column */
footer#lien-he .footer-grid,
.footer-grid{display:grid;grid-template-columns:1.35fr 0.8fr 0.9fr 0.8fr 2fr;gap:20px;min-height:128px;align-items:start!important}
footer#lien-he .footer-grid br,.footer-grid br{display:none!important}
footer#lien-he .footer-grid p,.footer-grid p{margin:0!important;padding:0!important}
.footer-grid>div:first-child p{margin:8px 0 12px!important;line-height:1.55!important}
footer#lien-he .footer-grid h3,.footer-grid h3{font-size:15px!important;font-weight:700!important;color:#fff!important;margin:0 0 9px!important;line-height:1.4!important}
footer#lien-he .footer-grid a:not(.brand):not(.phone-link):not(.mail-link):not(.social a),
.footer-grid a:not(.brand):not(.phone-link):not(.mail-link):not(.social a){display:block!important;font-size:13.5px!important;line-height:1.35!important;padding:3px 0!important;margin:0!important;color:#c1d3e8!important;text-decoration:none!important;transition:color .15s ease!important}
footer#lien-he .footer-grid a:not(.brand):not(.phone-link):not(.mail-link):not(.social a):hover,
.footer-grid a:not(.brand):not(.phone-link):not(.mail-link):not(.social a):hover{color:#ff9b39!important}
.footer-links,.footer-links>div,#footer-fuels,.footer-grid>div:nth-child(4){display:flex!important;flex-direction:column!important;gap:0!important;margin:0!important;padding:0!important}
.footer-company-col{display:flex;flex-direction:column}
.footer-company-col .company-name{font-size:15px!important;font-weight:700!important;color:#fff!important;margin:0 0 9px!important;line-height:1.5!important}
.footer-company-col .company-text-list{display:flex!important;flex-direction:column!important;gap:5px!important;margin:0!important;padding:0!important;list-style:none!important}
.footer-company-col .company-text-list li,
.footer-company-col .company-text-row{display:block!important;margin:0!important;padding:0!important;font-size:13px!important;line-height:1.45!important;color:#cbd5e1!important;border:0!important}
.footer-company-col .ct-content{display:inline!important;margin:0!important;padding:0!important;line-height:1.45!important}
.footer-company-col .ct-label{font-weight:600!important;color:#94a3b8!important;margin-right:4px!important;display:inline!important}
.footer-company-col .ct-val{color:#e2ecf8!important;display:inline!important}
.footer-company-col a{display:inline!important;color:#e2ecf8!important;line-height:inherit!important;font-size:13px!important;text-decoration:none!important}
.footer-company-col a.phone-link{color:#f87171!important;font-weight:700!important}
.footer-company-col a.phone-link:hover{color:#fca5a5!important;text-decoration:underline!important}
.footer-company-col a.mail-link:hover{color:#38bdf8!important;text-decoration:underline!important}
.footer-company-col p{margin:0 0 5px!important;line-height:1.45!important}
@media(max-width:1100px){
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr;gap:20px}
  .footer-company-col{grid-column:1/-1}
  .footer-company-col .company-text-list{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:8px 20px!important}
}
@media(max-width:650px){
  .footer-grid{grid-template-columns:1fr;gap:18px}
  .footer-company-col .company-text-list{grid-template-columns:1fr!important;gap:6px!important}
}



/* Detail pages share the same visual language while keeping their own content. */
.subpage .nav-wrap{display:flex;align-items:center}
.sub-hero{min-height:285px;padding:49px 24px 70px;position:relative;overflow:hidden;isolation:isolate;background:#071e3d;color:#fff}
.sub-hero:before{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,#071b37 0%,#0b315b 59%,rgba(9,44,83,.71) 100%),url('assets/refueling.jpg') right center/cover no-repeat}
.sub-hero:after{content:"";position:absolute;z-index:-1;right:-80px;top:-220px;width:600px;height:600px;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018)}
.subpage[data-page="gia-xang-the-gioi"] .sub-hero:before,.subpage[data-page="du-doan-gia-xang"] .sub-hero:before{background:linear-gradient(90deg,#071b37 0%,#0b315b 60%,rgba(8,39,77,.58)),url('assets/oil-field.jpg') right center/cover no-repeat}
.subpage[data-page="tin-tuc"] .sub-hero:before{background:linear-gradient(90deg,#071b37 0%,#0b315b 60%,rgba(8,39,77,.58)),url('assets/refinery.jpg') right center/cover no-repeat}
.subpage[data-page="bieu-do-gia-xang"] .sub-hero:before,.subpage[data-page="lich-su-gia-xang"] .sub-hero:before{background:linear-gradient(90deg,#071b37 0%,#0b315b 60%,rgba(8,39,77,.6)),url('assets/station.jpg') right center/cover no-repeat}
.sub-hero>div{max-width:1232px;position:relative}
.sub-hero .crumb{display:inline-block;border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:7px 12px;background:rgba(255,255,255,.08);font-size:12px;margin-bottom:18px;color:#b9d9f2}
.sub-hero h1{font-size:43px;line-height:1.15;letter-spacing:-1.4px;font-weight:800;max-width:860px;margin-bottom:10px}
.sub-hero h1:after{content:"";display:block;width:60px;height:4px;margin-top:16px;border-radius:4px;background:#ff9b39}
.sub-hero p{font-size:16px;color:#d8e8f7;max-width:690px}
.sub-main{max-width:1280px;margin:-36px auto 54px;padding:0 24px;grid-template-columns:minmax(0,2.6fr) minmax(245px,.85fr);gap:20px;position:relative;z-index:2}
.sub-content,.sub-aside,.sub-main .panel{min-width:0}
.sub-main .panel{padding:27px;margin-bottom:20px}
.sub-main h2{font-size:21px;letter-spacing:-.5px;color:#092a53;margin-bottom:17px}
.sub-content>.panel:first-child{border-top:4px solid #ff9c3c}
.sub-main p{font-size:14px;color:#516982}
.sub-aside{top:20px}
.sub-aside .panel:first-child{background:#0a2e57;color:#fff;border-color:#0a2e57}
.sub-aside .panel:first-child h2{color:#fff}
.sub-aside .panel:first-child a{color:#d5e8fb;border-color:rgba(255,255,255,.13);padding:10px 4px}
.sub-aside .panel:first-child a:hover{color:#ffad56}
.sub-aside .panel:nth-child(2){background:linear-gradient(145deg,#fff,#edf7ff)}
.sub-aside strong{color:#075ab7}
.data-scroll{border-radius:11px}
.data-table th{background:#eaf3fb;color:#315b82;font-weight:800}
.data-table th,.data-table td{padding:12px 13px}
.data-table tbody tr:hover td{background:#edf7ff}
.link-cards{gap:12px}
.link-cards a{border-radius:11px;background:#f5f9fd;padding:16px;font-weight:700;transition:all .2s}
.link-cards a:hover{background:#e9f4ff;transform:translateY(-2px)}
.story-row{border:1px solid #e3ebf4;border-radius:12px;margin-bottom:12px;padding:11px;transition:all .2s}
.story-row:hover{background:#f3f9ff;transform:translateX(3px)}
.story-row img{width:128px;height:82px;border-radius:8px}
.story-row b{font-size:15px}
.story-row small{color:#6c7f95}
.date-form button,.chart-range .is-active{background:#0b66c7}
.source-box{background:#f1f7fc!important}
.subpage footer{padding-top:32px}
@media(max-width:1180px){.search{display:none}.nav-wrap,.subpage .nav-wrap{gap:13px}.price-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.top-grid{grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr)}.middle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.middle-grid>.details{grid-column:1/-1}.middle-grid>.world{grid-column:auto}.market-grid{grid-template-columns:1fr}.subpage .nav-wrap{display:block;padding-top:12px;padding-bottom:10px}.subpage nav{margin-top:8px}}
@media(max-width:900px){.hero{height:auto;min-height:470px}.hero-photo{width:75%;opacity:.45}.hero:before{background:linear-gradient(90deg,#061a35 0%,#08284cf0 66%,rgba(7,29,55,.5))}.hero-content{min-height:470px}.hero h1{font-size:36px}.hero h1 strong{font-size:48px}.top-grid{grid-template-columns:1fr}.middle-grid{grid-template-columns:1fr 1fr}.middle-grid>.details{grid-column:1/-1}.bottom-grid{grid-template-columns:1fr}.sub-main{grid-template-columns:1fr}.sub-aside{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){header,.subpage header{min-height:0}.nav-wrap,.subpage .nav-wrap{display:block;padding:11px 15px}.brand{display:inline-flex}.nav-wrap nav,.subpage nav{display:flex;margin-top:10px;gap:4px;white-space:nowrap}.nav-wrap nav a,.subpage nav a{height:35px;padding:0 10px;font-size:12px}.hero{min-height:0}.hero-photo{width:100%;opacity:.35}.hero:before{background:linear-gradient(90deg,#061a35ed,#08284cca)}.hero-content{padding:30px 18px 24px;min-height:0}.hero-kicker{font-size:10px;letter-spacing:1.1px}.hero h1{font-size:26px;letter-spacing:-.7px}.hero h1 strong{font-size:36px;letter-spacing:-1.2px}.hero p{font-size:14px}.hero p br{display:none}.hero-actions{margin-top:21px}.hero-actions a{font-size:12px;min-height:40px;padding:0 12px}.benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:26px}.benefits>div{padding:8px;font-size:11px;gap:6px}.benefits i{width:28px;height:28px;flex:none}main{padding:0 12px;margin:15px auto 28px;gap:14px}.panel{padding:17px;border-radius:14px}.reference-sections{margin-top:-25px;padding:15px}.reference-sections .home-topic-links{gap:6px}.reference-sections .home-topic-links a{font-size:11px;padding:8px 9px}.top-grid,.middle-grid,.bottom-grid{grid-template-columns:1fr;gap:14px}.middle-grid>.details,.middle-grid>.world{grid-column:auto}.prices,.trend,.comparison,.news,.stores,.knowledge{padding:17px!important}.prices .section-head{align-items:flex-start}.updated{order:3;width:100%;margin:0}.orange-button{margin-left:auto}.price-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.price-card{min-height:155px}.price-card strong{font-size:22px}.periods{margin:0}.trend .section-head h2{flex-basis:100%}#line-chart{height:180px}.comparison .bar-row{grid-template-columns:112px minmax(0,1fr) 48px}.comparison .axis{margin-left:118px}.market-grid{gap:14px}.market-panel{padding:17px!important}.news-grid{grid-template-columns:1fr 1fr;gap:10px}.news-card time,.news-card h3,.news-card p{margin-left:9px;margin-right:9px}.news-card h3{font-size:12px}.news-card p{font-size:11px}.store-layout{grid-template-columns:1fr}.sub-hero{padding:35px 16px 65px;min-height:240px}.sub-hero h1{font-size:30px}.sub-hero p{font-size:14px}.sub-main{margin:-34px auto 30px;padding:0 12px;gap:0}.sub-main .panel{padding:19px;margin-bottom:14px}.sub-main h2{font-size:19px}.sub-aside{grid-template-columns:1fr}.story-row img{width:82px;height:65px}.story-row b{font-size:13px}footer{padding:27px 18px 0}.footer-grid{gap:18px}}
@media(max-width:380px){.hero h1 strong{font-size:32px}.benefits>div{font-size:10px}.price-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.news-grid{grid-template-columns:1fr}.market-table{min-width:490px}}
@media(max-width:650px){
  .market-grid .market-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border:0}
  .market-grid .market-table{display:block;width:100%;min-width:0;table-layout:auto}
  .market-grid .market-table thead{display:none}
  .market-grid .market-table tbody{display:grid;gap:8px}
  .market-grid .market-table tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid #e2eaf2;border-radius:10px;padding:10px;background:#f8fbfe}
  .market-grid .market-table tbody tr:nth-child(even){background:#f3f8fc}
  .market-grid .market-table td{display:block;width:auto!important;min-width:0;height:auto;padding:0 4px!important;border:0;text-align:left;font-size:12px}
  .market-grid .market-table td:first-child{grid-column:1/-1;padding:0 4px 8px!important;margin-bottom:8px;border-bottom:1px solid #e4ebf3;font-size:13px}
  .market-grid .market-table td:not(:first-child):before{display:block;margin-bottom:4px;color:#71849a;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
  .market-grid .market-table .price-main{font-size:13px}
  .market-grid .market-table .change-pill{min-width:0;padding:4px 5px;font-size:11px}
  #petrolimex td:nth-child(2):before{content:'Vùng 1'}
  #petrolimex td:nth-child(3):before{content:'Vùng 2'}
  #petrolimex td:nth-child(4):before,#pvoil td:nth-child(3):before{content:'Thay đổi'}
  #pvoil .market-table tbody tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  #pvoil td:nth-child(2):before{content:'Giá'}
  #quoc-te td:nth-child(2):before,#gia-xang-my td:nth-child(2):before{content:'Giá'}
  #quoc-te td:nth-child(3):before,#gia-xang-my td:nth-child(3):before{content:'Thay đổi'}
  #quoc-te td:nth-child(4):before,#gia-xang-my td:nth-child(4):before{content:'Ngày dữ liệu'}
}
@media(max-width:650px){
  .sub-main .data-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border:0}
  .sub-main .data-table{display:block;width:100%;min-width:0}
  .sub-main .data-table thead{display:none}
  .sub-main .data-table tbody{display:grid;gap:8px}
  .sub-main .data-table tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:11px;border:1px solid #e0e9f3;border-radius:10px;background:#f8fbfe}
  .sub-main .data-table td,.sub-main .data-table tr:nth-child(even) td{display:block;height:auto;padding:0 5px 4px;border:0;background:transparent!important;text-align:left;color:#16385e;font-size:12px}
  .sub-main .data-table td:first-child{grid-column:1/-1;border-bottom:1px solid #e3ebf3;padding:0 5px 8px;margin-bottom:8px;font-size:13px;font-weight:750}
  .sub-main .data-table td:not(:first-child):before{content:attr(data-label);display:block;color:#788ba2;font-size:10px;font-weight:700;margin-bottom:4px;line-height:1.3}
}

.nav-wrap>.brand{flex:none;line-height:0}
@media(min-width:850px){#logo,.nav-wrap>.brand{margin-right:56px!important}}
.site-logo{display:block;width:170px;height:auto}
.subpage .nav-wrap{justify-content:flex-start}
.subpage .nav-wrap nav{flex:1;min-width:0;justify-content:flex-start}
footer .brand:has(.footer-logo){display:inline-flex;width:max-content;max-width:100%;padding:4px;background:#fff;border-radius:9px;line-height:0}
.footer-logo{width:170px}
@media(max-width:1180px){.subpage .nav-wrap nav{width:100%;margin-top:8px}}
@media(max-width:650px){.site-logo{width:155px}.footer-logo{width:160px}}
@media(max-width:650px){.market-date-control,.market-date-control input{width:100%;min-width:0}.market-head>.market-date-control,.sub-section>.market-date-control,.prices .section-head>.market-date-control{width:100%;margin:4px 0 10px}.market-date-control .date-feedback{min-height:0}.prices .section-head .orange-button{margin-left:0}}

.price-card .change{display:inline-flex;align-items:center;justify-content:center;min-width:76px;margin-top:7px;padding:4px 8px;border-radius:999px;font-weight:800;line-height:1.2}
.change.up,.price-movement.up{color:#d83a32!important}
.change.down,.price-movement.down{color:#078c58!important}
.change.flat,.price-movement.flat{color:#66768d!important}
.price-card .change.up{background:#fff0ed}
.price-card .change.down{background:#e9f8f1}
.price-card .change.flat{background:#eef2f6}
.price-movement{font-weight:800;white-space:nowrap}

.nav-wrap nav,.subpage .nav-wrap nav{scrollbar-width:none;-ms-overflow-style:none}
.nav-wrap nav::-webkit-scrollbar,.subpage .nav-wrap nav::-webkit-scrollbar{display:none;width:0;height:0}
@media(min-width:1181px){.nav-wrap>nav,.subpage .nav-wrap>nav{flex:1;overflow:visible;justify-content:flex-start}}

/* Công cụ ước tính chi phí chuyến đi */
.bottom-grid{align-items:stretch}
.bottom-grid>.trip-planner{height:auto;min-height:300px;padding:24px!important;background:linear-gradient(145deg,#fff 0%,#f3f9ff 100%)}
.trip-planner .section-head{margin-bottom:7px}
.trip-badge{margin-left:auto;padding:6px 10px;border-radius:999px;background:#e7f8f0;color:#078c58;font-size:11px;font-weight:800;white-space:nowrap}
.trip-intro{max-width:680px;margin:0 0 16px;color:#627990;font-size:13px;line-height:1.55}
#trip-calculator{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(230px,.85fr);gap:16px;align-items:stretch}
.trip-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.trip-fields label{display:block;color:#385674;font-size:12px;font-weight:800}
.trip-fields label:last-child{grid-column:1/-1}
.trip-input{display:flex;align-items:center;margin-top:6px;overflow:hidden;border:1px solid #d3e0ec;border-radius:10px;background:#fff;transition:border-color .2s,box-shadow .2s}
.trip-input:focus-within,.trip-fields select:focus{border-color:#1681e5;box-shadow:0 0 0 3px rgba(22,129,229,.11)}
.trip-input input{width:100%;min-width:0;height:42px;padding:0 12px;border:0;outline:0;background:transparent;color:#092e56;font:700 14px 'Noto Sans',sans-serif}
.trip-input span{align-self:stretch;display:flex;align-items:center;padding:0 11px;border-left:1px solid #e2eaf2;background:#f5f8fb;color:#6c8196;font-size:11px;white-space:nowrap}
.trip-fields select{width:100%;height:44px;margin-top:6px;padding:0 38px 0 12px;border:1px solid #d3e0ec;border-radius:10px;outline:0;background:#fff;color:#092e56;font:700 13px 'Noto Sans',sans-serif}
.trip-result{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px;border-radius:14px;background:linear-gradient(135deg,#0b3d70 0%,#0869b5 100%);color:#fff;box-shadow:0 12px 24px rgba(7,65,119,.16)}
.trip-result div{padding:10px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(255,255,255,.07)}
.trip-result span{display:block;color:#cfe4f8;font-size:11px}
.trip-result strong{display:block;margin-top:4px;font-size:19px;line-height:1.25}
.trip-result small{grid-column:1/-1;align-self:end;color:#d9ebfb;font-size:11px;line-height:1.45}
.trip-presets{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:14px;color:#637991;font-size:11px;font-weight:700}
.trip-presets button{padding:6px 10px;border:1px solid #d2e1ef;border-radius:999px;background:#fff;color:#1465a8;font:800 11px 'Noto Sans',sans-serif;cursor:pointer;transition:all .18s}
.trip-presets button:hover{border-color:#1681e5;background:#eaf5ff;transform:translateY(-1px)}
@media(max-width:650px){.bottom-grid>.trip-planner{padding:17px!important}.trip-planner .section-head{align-items:flex-start}.trip-badge{white-space:normal;text-align:center}#trip-calculator{grid-template-columns:1fr}.trip-fields{grid-template-columns:1fr}.trip-fields label:last-child{grid-column:auto}.trip-result strong{font-size:17px}}

/* Hệ màu riêng cho từng nhóm bảng dữ liệu */
.market-panel{--table-accent:#3b83bd;--table-head-1:#3d82b8;--table-head-2:#69acd7;--table-soft:#f1f7fd;position:relative;border-top:4px solid var(--table-accent)!important}
#petrolimex{--table-accent:#ed8b3b;--table-head-1:#ef8c3d;--table-head-2:#ffb267;--table-soft:#fff7ed}
#pvoil{--table-accent:#3a91bc;--table-head-1:#398fba;--table-head-2:#68b7d9;--table-soft:#eef9fe}
#quoc-te{--table-accent:#b45b91;--table-head-1:#a85086;--table-head-2:#d07daf;--table-soft:#fff2fa}
#gia-xang-my{--table-accent:#49a977;--table-head-1:#3f9e6d;--table-head-2:#72c796;--table-soft:#effbf4}
.market-panel .market-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--table-soft);color:var(--table-accent);font-size:17px}
.market-panel .market-scroll{overflow:hidden;border:1px solid color-mix(in srgb,var(--table-accent) 18%,#dce7f2);border-radius:11px}
.market-panel .market-table thead{background:linear-gradient(105deg,var(--table-head-1),var(--table-head-2))}
.market-panel .market-table th{background:transparent;color:#fff;border-right-color:rgba(255,255,255,.1);font-weight:800;letter-spacing:.05px}
.market-panel .market-table tbody tr:nth-child(even){background:var(--table-soft)}
.market-panel .market-table tbody tr:hover{background:color-mix(in srgb,var(--table-accent) 11%,#fff)}
.market-panel .market-table td:first-child{border-left:3px solid transparent}
.market-panel .market-table tbody tr:hover td:first-child{border-left-color:var(--table-accent)}
.market-panel .market-table .price-main{color:color-mix(in srgb,var(--table-accent) 70%,#082b60)}

.details{--detail-head-1:#367bad;--detail-head-2:#62a6d4}
.details .table-wrap{overflow:hidden;border:1px solid #d7e5f3;border-radius:11px}
.details table{border:0!important;border-radius:0!important}
.details table thead{background:linear-gradient(105deg,var(--detail-head-1),var(--detail-head-2))}
.details table thead th{background:transparent;color:#fff;border-right-color:rgba(255,255,255,.1);font-weight:800}
.details table tbody tr:nth-child(even){background:#f2f8fe}
.details table tbody tr:hover{background:#e8f4ff}

.sub-content>.sub-section:not(.history-adjustments-panel):has(.data-table){--data-head-1:#367bad;--data-head-2:#62a6d4;--data-soft:#f1f7fd;border-top:4px solid var(--data-head-2)}
.sub-content>.sub-section:not(.history-adjustments-panel):has(.data-table):nth-child(1){--data-head-1:#ef8c3d;--data-head-2:#ffb267;--data-soft:#fff6eb}
.sub-content>.sub-section:not(.history-adjustments-panel):has(.data-table):nth-child(2){--data-head-1:#398fba;--data-head-2:#68b7d9;--data-soft:#eef9fe}
body[data-page="gia-xang-hom-nay"] .sub-content>.sub-section:has(.data-table):nth-child(4),body[data-page="gia-xang-the-gioi"] .sub-content>.sub-section:has(.data-table){--data-head-1:#a85086;--data-head-2:#d07daf;--data-soft:#fff2fa}
.sub-content>.sub-section:not(.history-adjustments-panel):has(.data-table) .data-scroll{border-color:color-mix(in srgb,var(--data-head-2) 22%,#dce7f2);border-radius:11px}
.sub-content>.sub-section:not(.history-adjustments-panel):has(.data-table) .data-table thead{background:linear-gradient(105deg,var(--data-head-1),var(--data-head-2))}
.sub-content>.sub-section:not(.history-adjustments-panel):has(.data-table) .data-table th{background:transparent;color:#fff;border-right-color:rgba(255,255,255,.1);font-weight:800}
.sub-content>.sub-section:not(.history-adjustments-panel):has(.data-table) .data-table tr:nth-child(even) td{background:var(--data-soft)}
.sub-content>.sub-section:not(.history-adjustments-panel):has(.data-table) .data-table tbody tr:hover td{background:color-mix(in srgb,var(--data-head-2) 10%,#fff)}
@media(max-width:650px){.market-panel .market-scroll,.details .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}.market-grid .market-table tbody tr,.sub-main .data-table tbody tr{border-left:4px solid var(--table-accent,#1682d4)}.sub-main .data-table tbody tr{border-left-color:var(--data-head-2,#1682d4)}}

/* Contact Page Sky Ads Company Box */
.contact-lead{font-size:14px;color:#475569;margin:0 0 16px;line-height:1.6}
.contact-company-banner{background:#fff;border:1px solid #e2e8f0;border-left:4px solid #b71c1c;border-radius:10px;padding:20px 24px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.contact-company-banner .banner-top{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.contact-company-banner .banner-title{font-size:22px!important;font-weight:700!important;color:#0f172a!important;margin:0 0 6px!important}
.contact-company-banner .banner-tax-addr{font-size:14px!important;color:#475569!important;margin:0!important;line-height:1.6!important}
.contact-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:20px}
.contact-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:18px 20px;box-shadow:0 2px 6px rgba(0,0,0,.03);transition:box-shadow .2s,border-color .2s}
.contact-card:hover{border-color:#cbd5e1;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.contact-card-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-card-icon.icon-phone{background:#fff1f2;color:#e11d48}
.contact-card-icon.icon-mail{background:#f0fdf4;color:#16a34a}
.contact-card-icon.icon-office{background:#fff7ed;color:#ea580c}
.contact-card-icon.icon-time{background:#fef2f2;color:#dc2626}
.contact-card-info{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.c-label{font-size:11px;font-weight:700;color:#64748b;letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px}
.c-val{font-size:16px;font-weight:700;color:#0f172a;text-decoration:none;word-break:break-word}
.c-val.phone-red{color:#dc2626}
.c-val:hover{color:#0284c7}
.c-val.phone-red:hover{color:#b91c1c}
.c-sub{font-size:12px;color:#64748b;margin-top:4px}
@media(max-width:768px){
  .contact-cards-grid{grid-template-columns:1fr;gap:12px}
  .contact-company-banner{padding:16px 18px}
  .contact-company-banner .banner-title{font-size:19px!important}
}

/* Partner Source Card & Button Grid */
.partner-source-card{background:linear-gradient(135deg,#fff 0%,#f7faff 100%);border:1px solid #dbe6f2;border-radius:16px;padding:26px 28px;margin-bottom:24px;box-shadow:0 10px 25px rgba(9,105,218,.05),0 2px 6px rgba(0,0,0,.02);position:relative;overflow:hidden}
.partner-badge{display:inline-flex;align-items:center;gap:7px;background:#e9f3fe;color:#0861c2;padding:5px 13px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.3px}
.partner-status-tag{font-size:12px;color:#64748b;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.partner-status-tag .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#10b981}
.partner-links-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.partner-btn{display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px!important;border-radius:10px;text-decoration:none!important;font-size:13.5px!important;font-weight:700!important;transition:all .2s ease;min-height:48px}
.partner-btn.is-primary{background:#0969da!important;color:#fff!important;border:1px solid #0969da!important;box-shadow:0 4px 12px rgba(9,105,218,.2)}
.partner-btn.is-primary:hover{background:#075bb5!important;border-color:#075bb5!important;transform:translateY(-2px)}
.partner-btn.is-outline{background:#fff!important;color:#0f3259!important;border:1px solid #cce0f5!important;box-shadow:0 2px 6px rgba(0,0,0,.03)}
.partner-btn.is-outline:hover{background:#f4f8fe!important;border-color:#0969da!important;transform:translateY(-2px)}
@media(max-width:900px){.partner-links-grid{grid-template-columns:1fr}}