/* ==========================================================================
   Cơ Khí Tiến Bộ – static utility CSS (thay thế Tailwind CDN)
   Biên dịch thủ công, chỉ chứa đúng các class đang được dùng trong site.
   ========================================================================== */

:root{
  --color-steel-950:#0F181D;
  --color-steel-900:#152329;
  --color-steel-800:#1E323B;
  --color-steel-700:#2A4450;
  --color-steel-600:#3C5866;
  --color-steel-300:#B2C1C8;
  --color-steel-100:#E4EAEC;
  --color-steel-500:#526A75;
  --color-paper: rgba(4, 51, 76, 0.95);
  --color-accent:#C2410C;
  --color-accent-dim:#FBE7D2;
  --color-orange-50:#FFF7ED;
  --color-orange-700:#9A3412;
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-data: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--color-steel-100);margin:0;padding:0}
html{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5}
body{line-height:inherit}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:inherit}
button{font:inherit;color:inherit;background:transparent;cursor:pointer}
table{border-collapse:collapse}
ol,ul{list-style:none}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
h1,h2,h3,h4{font-size:inherit;font-weight:inherit}

.font-body{font-family:var(--font-body)}
.font-display{font-family:var(--font-display); font-weight:600; letter-spacing:.01em}
.font-data{font-family:var(--font-data)}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

body.font-body{background-color:var(--color-paper)}

.block{display:block}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.flex{display:flex}
.grid{display:grid}
.hidden{display:none}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.items-stretch{align-items:stretch}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.self-start{align-self:flex-start}
.shrink-0{flex-shrink:0}
.grow{flex-grow:1}

.relative{position:relative}
.absolute{position:absolute}
.sticky{position:sticky}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}
.top-full{top:100%}
.left-0{left:0}
.z-40{z-index:40}

.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.col-span-1{grid-column:span 1 / span 1}
.col-span-2{grid-column:span 2 / span 2}
.col-span-4{grid-column:span 4 / span 4}
.col-span-8{grid-column:span 8 / span 8}

/* gap */
.gap-1{gap:0.25rem}
.gap-2{gap:0.5rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.gap-10{gap:2.5rem}
.gap-12{gap:3rem}

/* padding */
.p-2{padding:0.5rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.pl-5{padding-left:1.25rem}
.pt-4{padding-top:1rem}
.pt-8{padding-top:2rem}

/* margin */
.mb-1{margin-bottom:0.25rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}
.mb-14{margin-bottom:3.5rem}
.mt-0\.5{margin-top:0.125rem}
.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.-mt-1{margin-top:-0.25rem}
.mx-auto{margin-left:auto;margin-right:auto}

/* space-y / divide */
.space-y-1 > * + *{margin-top:0.25rem}
.space-y-2 > * + *{margin-top:0.5rem}
.space-y-3 > * + *{margin-top:0.75rem}
.space-y-4 > * + *{margin-top:1rem}
.space-y-6 > * + *{margin-top:1.5rem}
.divide-y > * + *{border-top-width:1px}
.divide-steel-100 > * + *{border-color:var(--color-steel-100)}
.first\:pt-0:first-child{padding-top:0}
.last\:pb-0:last-child{padding-bottom:0}

.w-full{width:100%}
.w-1\/2{width:50%}
.w-1\/3{width:33.3333%}
.w-2{width:0.5rem}
.w-8{width:2rem}
.w-9{width:2.25rem}
.w-72{width:18rem}
.h-1\/2{height:50%}
.h-2{height:0.5rem}
.h-8{height:2rem}
.h-9{height:2.25rem}
.h-16{height:4rem}
.h-\[300px\]{height:300px}
.h-\[320px\]{height:320px}
.max-w-2xl{max-width:42rem}
.max-w-7xl{max-width:80rem}
.max-w-md{max-width:28rem}
.max-w-xl{max-width:36rem}
.aspect-video{aspect-ratio:16/9}
.aspect-\[4\/3\]{aspect-ratio:4/3}
.object-cover{object-fit:cover}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}

.text-xs{font-size:0.75rem;line-height:1rem}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.leading-\[1\.05\]{line-height:1.05}
.leading-\[1\.1\]{line-height:1.1}
.tracking-wide{letter-spacing:0.025em}
.tracking-widest{letter-spacing:0.1em}
.tracking-\[0\.2em\]{letter-spacing:0.2em}
.font-bold{font-weight:700}
.font-medium{font-weight:500}
.font-normal{font-weight:400}
.uppercase{text-transform:uppercase}
.normal-case{text-transform:none}
.text-left{text-align:left}
.text-center{text-align:center}
.scroll-mt-24{scroll-margin-top:6rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.focus\:not-sr-only:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}

/* colors */
.bg-steel-950{background-color:#0F181D}
.text-steel-950{color:#0F181D}
.border-steel-950{border-color:#0F181D}
.bg-steel-900{background-color:#152329}
.text-steel-900{color:#152329}
.border-steel-900{border-color:#152329}
.bg-steel-800{background-color:#1E323B}
.text-steel-800{color:#1E323B}
.border-steel-800{border-color:#1E323B}
.bg-steel-700{background-color:#2A4450}
.text-steel-700{color:#2A4450}
.border-steel-700{border-color:#2A4450}
.bg-steel-600{background-color:#3C5866}
.text-steel-600{color:#3C5866}
.border-steel-600{border-color:#3C5866}
.bg-steel-500{background-color:#526A75}
.text-steel-500{color:#526A75}
.border-steel-500{border-color:#526A75}
.bg-steel-300{background-color:#B2C1C8}
.text-steel-300{color:#B2C1C8}
.border-steel-300{border-color:#B2C1C8}
.bg-steel-100{background-color:#E4EAEC}
.text-steel-100{color:#E4EAEC}
.border-steel-100{border-color:#E4EAEC}
.bg-white{background-color:#FFFFFF}
.text-white{color:#FFFFFF}
.border-white{border-color:#FFFFFF}
.bg-cta{background-color: #0092DC;color:#fff;}
.bg-accent{background-color:#C2410C}
.text-accent{color:#E06A0C}
.border-accent{border-color:#C2410C}
.bg-orange-50{background-color:#FFF7ED}
.text-orange-50{color:#FFF7ED}
.border-orange-50{border-color:#FFF7ED}
.bg-orange-700{background-color:#9A3412}
.text-orange-700{color:#9A3412}
.border-orange-700{border-color:#9A3412}
.bg-paper{background-color:rgba(4, 51, 76, 0.95)}
.text-paper{color:rgba(4, 51, 76, 0.95)}
.border-paper{border-color:rgba(4, 51, 76, 0.95)}
.hover\:bg-orange-700:hover{background-color:var(--color-orange-700)}
.hover\:bg-paper:hover{background-color:var(--color-paper)}
.hover\:bg-steel-900:hover{background-color:var(--color-steel-900)}
.hover\:border-accent:hover{border-color:var(--color-accent)}
.hover\:border-white:hover{border-color:#fff}
.hover\:text-accent:hover{color:var(--color-accent)}
.hover\:text-orange-700:hover{color:var(--color-orange-700)}
.group:hover .group-hover\:text-accent{color:var(--color-accent)}
.group:hover .group-hover\:opacity-100{opacity:1}
.group:hover .group-hover\:visible{visibility:visible}

.bg-steel-950\/95{background-color:rgba(15,24,29,.95)}
.bg-white\/10{background-color:rgba(255,255,255,.1)}
.bg-white\/20{background-color:rgba(255,255,255,.2)}
.hover\:bg-white\/20:hover{background-color:rgba(255,255,255,.2)}
.border-white\/40{border-color:rgba(255,255,255,.4)}
.hero-gradient{background-image:linear-gradient(to top, rgba(15,24,29,1) 0%, rgba(15,24,29,.8) 50%, rgba(15,24,29,.3) 100%)}

.border{border-width:1px}
.border-b{border-bottom-width:1px}
.border-t{border-top-width:1px}
.border-l-2{border-left-width:2px}
.rounded{border-radius:0.25rem}
.rounded-sm{border-radius:0.125rem}
.rounded-full{border-radius:9999px}
.rounded-b-md{border-bottom-left-radius:0.375rem;border-bottom-right-radius:0.375rem}
.focus\:rounded:focus{border-radius:0.25rem}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.backdrop-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

.opacity-0{opacity:0}
.opacity-40{opacity:.4}
.invisible{visibility:hidden}
.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.transition-colors{transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}

.focus\:absolute:focus{position:absolute}
.focus\:top-2:focus{top:0.5rem}
.focus\:left-2:focus{left:0.5rem}
.focus\:bg-accent:focus{background-color:var(--color-accent)}
.focus\:text-white:focus{color:#fff}
.focus\:px-4:focus{padding-left:1rem;padding-right:1rem}
.focus\:py-2:focus{padding-top:0.5rem;padding-bottom:0.5rem}
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--color-accent)}
.focus\:ring-accent:focus{--tw-ring-color:var(--color-accent)}

@media (min-width: 640px){
  .sm\:flex{display:flex}
  .sm\:col-span-1{grid-column:span 1 / span 1}
  .sm\:col-span-2{grid-column:span 2 / span 2}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:text-2xl{font-size:1.5rem;line-height:2rem}
  .sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .sm\:text-5xl{font-size:3rem;line-height:1}
  .sm\:h-\[360px\]{height:360px}
  .sm\:h-\[400px\]{height:400px}
}
@media (min-width: 1024px){
  .lg\:hidden{display:none}
  .lg\:flex{display:flex}
  .lg\:inline-block{display:inline-block}
  .lg\:sticky{position:sticky}
  .lg\:top-24{top:6rem}
  .lg\:col-span-4{grid-column:span 4 / span 4}
  .lg\:col-span-8{grid-column:span 8 / span 8}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .lg\:py-16{padding-top:4rem;padding-bottom:4rem}
  .lg\:py-20{padding-top:5rem;padding-bottom:5rem}
  .lg\:py-28{padding-top:7rem;padding-bottom:7rem}
  .lg\:text-5xl{font-size:3rem;line-height:1}
  .lg\:h-\[460px\]{height:460px}
}

.group:hover .group-hover\:opacity-100{opacity:1}
.group:hover .group-hover\:visible{visibility:visible}

/* helper blocks kept from original inline styles */
.plate{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.rivet{box-shadow:0 0 0 2px rgba(0,0,0,.15) inset, 0 1px 1px rgba(255,255,255,.4) inset}
.mesh-bg{
  background-image:
    linear-gradient(45deg,#25404b 25%,transparent 25%,transparent 75%,#25404b 75%,#25404b),
    linear-gradient(45deg,#25404b 25%,transparent 25%,transparent 75%,#25404b 75%,#25404b);
  background-size:28px 28px;
  background-position:0 0, 14px 14px;
}

.author-box {
    display: flex;
    background: #f9f9f9;
    padding: 20px;
    border-left: 5px solid #d9534f; /* Màu đỏ thương hiệu */
    margin: 30px 0;
    border-radius: 5px;
    align-items: center;
}
.author-avatar img {
    width: 100%;
    max-height: 150px;
    border-radius: 50%;
    margin-right: 20px;
}
.author-info h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
    color: #333;
}
.author-job {
    font-weight: bold;
    color: #666;
    margin-bottom: 10px;
}
.author-desc {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
}
.author-contact a {
    color: #d9534f;
    text-decoration: none;
    font-weight: bold;
}

/* ==========================================================================
   Accessibility contrast overrides
   Color-only rules; no layout/display/spacing changes.
   ========================================================================== */

/* Accent is used as text on light cards/backgrounds. */
.bg-white .text-accent,
.bg-paper .text-accent,
article .text-accent,
.text-orange-700{
  color:#9A3412;
}

/* Accent remains bright enough when displayed on dark header/hero. */
.bg-steel-950 .text-accent,
.bg-steel-950\/95 .text-accent,
.bg-steel-900 .text-accent{
  color:#E06A0C;
}

/* Hover states on dark navigation keep the original orange. */
.bg-steel-950 .hover\:text-accent:hover,
.bg-steel-950\/95 .hover\:text-accent:hover,
.bg-steel-900 .hover\:text-accent:hover{
  color:#E06A0C;
}

/* Hover states on light surfaces use the accessible darker orange. */
.bg-white .hover\:text-accent:hover,
.bg-paper .hover\:text-accent:hover{
  color:#9A3412;
}

/* Product/card hover accent text on light surfaces. */
.group:hover .group-hover\:text-accent{
  color:#9A3412;
}
.imagehome{width:100%;height:auto; margin:0 auto;}
/* Form controls: maintain strong focus indication. */
.focus\:ring-accent:focus{
  --tw-ring-color:#C2410C;
}
.imagehome{width:100%;height:auto}
.img-full{width:100%;height:auto;} h2,h3,h4{color: #0F181D;font-size:1.2rem;}

article {padding:16px;}
article img{margin: 0 auto;padding:10px 0px;max-width: 100%; width: 100%;object-fit: cover; height: auto;max-height:450px;}
article h2 {
	color:rgb(15 61 99 / var(--tw-text-opacity, 1));
    padding: 10px 0px;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    line-height: 2rem;
}
article p a{color:#9A3412!important;text-decoration:underline;text-underline-offset:2px;}
article h3 {color:rgb(15 61 99 / var(--tw-text-opacity, 1));
    padding: 8px 0px;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    line-height: 1.75rem;}
	
/* Mobile: nội dung bài viết không được vượt quá khung */
@media (max-width: 767px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    article {
        min-width: 0;
        max-width: 100%;
		padding:5px;
    }

    article img,
    article video,
    article iframe,
    article embed,
    article object {
        max-width: 100% !important;
        height: auto;
    }

    article table {
        display: block;
        width: 100% !important;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    article pre,
    article code {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    article p,
    article li,
    article h1,
    article h2,
    article h3,
    article h4,
    article h5,
    article h6 {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    article a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}
.search-sidebar {
    width: 100%;
    max-width: 100%;
    padding: 9px;
    background: #E4EAEC;
    border: 1px solid #CBD5DB;
    border-radius: 11px;
    box-sizing: border-box;
}

.search-sidebar-form {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    gap: 8px;
    box-sizing: border-box;
}

.search-sidebar-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 56px;
    padding: 0 28px;
    border: 1px solid #CBD5DB;
    border-radius: 11px;
    background: #FFFFFF;
    color: #526A75;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
}

.search-sidebar-input::placeholder {
    color: #526A75;
    opacity: 1;
}

.search-sidebar-input:focus {
    border-color: #B2C1C8;
    box-shadow: none;
}

.search-sidebar-btn {
    flex: 0 0 74px;
    width: 74px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: #0092DC;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
}

.search-sidebar-btn:hover {
    background: #007DBB;
}

.search-sidebar-btn i {
    line-height: 1;
}


/* Mobile */
@media (max-width: 767px) {

    .search-sidebar {
        width: 100%;
        padding: 8px;
        border-radius: 11px;
    }

    .search-sidebar-form {
        gap: 7px;
    }

    .search-sidebar-input {
        height: 54px;
        padding: 0 18px;
        font-size: 17px;
        border-radius: 10px;
    }

    .search-sidebar-btn {
        flex: 0 0 64px;
        width: 64px;
        height: 54px;
        border-radius: 10px;
        font-size: 23px;
    }
}