/* Topbar */ .dmctn-topbar{height:var(--dmctn-topbar-h);background:var(--dmctn-topbar-color)} /* Container */ .dmctn-header .container, .dmctn-tabs-wrap .container, .site-main > .container{max-width:var(--dmctn-container);margin:0 auto;padding:0 12px} /* Header bar */ .dmctn-header-bar{background:var(--dmctn-header-bg);color:var(--dmctn-header-text)} .dmctn-header-bar .container{display:flex;align-items:center;gap:14px;height:var(--dmctn-header-h)} /* Hamburger tròn nhấp nháy đa sắc + tooltip */ .dmctn-hamburger{position:relative;display:inline-grid;place-items:center;background:transparent;border:0;cursor:pointer;padding:0;border-radius:999px;color:var(--dmctn-header-text);width:var(--dmctn-hg-size);height:var(--dmctn-hg-size)} .dmctn-hamburger.round-pulse::before{content:"";position:absolute;inset:0;border-radius:999px;animation:pulseColor 2.4s infinite, pulseScale 2s infinite;box-shadow:inset 0 0 0 2px var(--dmctn-hg-ring)} .dmctn-hamburger span{display:block;width:var(--dmctn-hg-w);height:var(--dmctn-hg-t);background:currentColor;border-radius:2px;margin:var(--dmctn-hg-gap) auto 0 auto} .dmctn-hamburger span:first-child{margin-top:0} .dmctn-hamburger::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:rgba(0,0,0,.75);color:#fff;font-size:12px;padding:4px 8px;border-radius:8px;opacity:0;pointer-events:none;transition:.15s;white-space:nowrap} .dmctn-hamburger:hover::after{opacity:1} @keyframes pulseColor{0%{background:var(--dmctn-hg-pulse-green)}33%{background:var(--dmctn-hg-pulse-red)}66%{background:var(--dmctn-hg-pulse-yellow)}100%{background:var(--dmctn-hg-pulse-green)}} @keyframes pulseScale{0%{transform:scale(1)}70%{transform:scale(1.12)}100%{transform:scale(1)}} /* Brand */ .dmctn-brand{display:flex;align-items:center;gap:10px;color:var(--dmctn-header-text);text-decoration:none;font-weight:800;letter-spacing:.02em} .dmctn-brand .logo{width:var(--dmctn-logo-w);height:var(--dmctn-logo-h);background:var(--dmctn-accent);border-radius:10px;display:inline-block} .dmctn-brand .title{font-size:20px;line-height:1} /* Quick icons */ .dmctn-quick{display:flex;align-items:center;gap:var(--dmctn-quick-gap);margin-left:auto;flex-wrap:nowrap} .q-item{display:inline-flex;align-items:center;gap:8px;color:var(--dmctn-header-text);text-decoration:none;font-weight:700;padding:8px 12px;border-radius:var(--dmctn-btn-radius)} .q-item .ico{font-size:var(--dmctn-quick-icon-desktop);line-height:1} .q-item .txt{white-space:nowrap} @media (max-width: 768px){ .q-item .ico{font-size:var(--dmctn-quick-icon-mobile)} .q-item .txt{display:none} .q-item{padding:8px} } /* Buttons elev */ .btn-elev{box-shadow:var(--dmctn-btn-shadow);background:rgba(255,255,255,.08);transition:transform .15s ease, box-shadow .15s ease, background .2s} .btn-elev:hover{transform:translateY(-2px);box-shadow:var(--dmctn-btn-shadow-hover);background:rgba(255,255,255,.14)} .btn-elev:active{transform:translateY(0);filter:brightness(.98)} .btn-elev:focus{outline:2px solid rgba(255,255,255,.35);outline-offset:2px} /* Drawer */ .dmctn-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.25s} .dmctn-drawer-overlay.open{opacity:1;pointer-events:auto} .dmctn-drawer{position:fixed;top:0;left:0;width:320px;max-width:85vw;height:100vh;background:#fff;transform:translateX(-100%);transition:.25s;box-shadow:2px 0 20px rgba(0,0,0,.12);z-index:1000;display:flex;flex-direction:column} .dmctn-drawer.open{transform:translateX(0)} .dmctn-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eee} .dmctn-drawer-close{background:#f2f2f2;border:0;border-radius:8px;width:32px;height:32px;cursor:pointer} .dmctn-drawer-body{padding:8px 10px;overflow:auto} .dmctn-cat, .dmctn-menu-compact{list-style:none;margin:0;padding:0} .dmctn-cat li, .dmctn-menu-compact li{padding:8px 4px;border-bottom:1px dashed #eee} .dmctn-cat a, .dmctn-menu-compact a{color:#222;text-decoration:none} .dmctn-cat a:hover{color:#2e7d32} /* === DMCTN Army Style injection (safe append) === */ /*! DMCTN Army Style Pack v1.0 — TẠO BỞI BÙI VĂN TĨNH */ :root{ --army-red:#b30000; /* đỏ tươi QĐND */ --army-green:#0b5d1e; /* xanh quân đội */ --army-gold:#ffd700; /* vàng */ --army-white:#ffffff; --army-black:#111; } /* Không phá layout: chỉ màu & hiệu ứng */ html.dmctn-army, body.dmctn-army{ background-color:#fff; } /* Thanh topbar / toolbar chung */ .dmctn-topbar, .dmctn-toolbar, .admin-bar .quicklinks, .site-header .topbar{ background:var(--army-red); color:var(--army-gold); } .dmctn-topbar a, .dmctn-toolbar a, .site-header .topbar a{ color:var(--army-gold); transition:all .25s ease; } .dmctn-topbar a:hover, .dmctn-toolbar a:hover, .site-header .topbar a:hover{ background:var(--army-green); color:#fff; } /* Header chính */ .dmctn-header, header.site-header, .site-header{ background:linear-gradient(0deg, var(--army-green), #064216); color:var(--army-gold); } .dmctn-header a, header.site-header a{ color:var(--army-gold); } .dmctn-header a:hover, header.site-header a:hover{ color:#fff; } /* Nút hamburger */ .dmctn-hamburger span, .menu-toggle span{ background:var(--army-gold); } .dmctn-hamburger:hover span, .menu-toggle:hover span{ background:var(--army-red); } /* Menu điều hướng */ .dmctn-menu, nav.primary, .main-navigation{ background:var(--army-green); } .dmctn-menu a, nav.primary a, .main-navigation a{ color:var(--army-gold); transition:all .25s ease; } .dmctn-menu a:hover, nav.primary a:hover, .main-navigation a:hover{ background:var(--army-red); color:#fff; } /* Tab ngay dưới thanh công cụ */ .dmctn-subtabs, .nav-tab-wrapper{ background:var(--army-red); } .dmctn-subtabs a, .nav-tab-wrapper .nav-tab{ color:#fff; transition:all .25s ease; } .dmctn-subtabs a:hover, .nav-tab-wrapper .nav-tab:hover{ background:var(--army-green); color:var(--army-gold); } /* Hiệu ứng nhấp nháy dịu (tôn trọng accessibility) */ .blink-text{ color:var(--army-gold); animation:dmctn-blink 1.6s infinite; } @keyframes dmctn-blink { 50%{ opacity:.45; } } @media (prefers-reduced-motion: reduce){ .blink-text{ animation:none; } } /* Nút bấm chung */ button, .button, .btn, input[type="submit"], .wp-core-ui .button-primary{ border-radius:8px; transition:transform .12s ease, box-shadow .2s ease; } button:hover, .button:hover, .btn:hover, input[type="submit"]:hover, .wp-core-ui .button-primary:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.25); } .wp-core-ui .button-primary{ background:var(--army-red); border-color:var(--army-red); color:var(--army-gold); } .wp-core-ui .button-primary:hover{ background:var(--army-green); border-color:var(--army-green); color:#fff; } /* Bảng & tiêu đề khối */ .card, .panel, .woocommerce-card, .postbox, .widget{ border-radius:12px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.06); } .card .card-header, .panel .panel-heading, .postbox .hndle{ background:linear-gradient(0deg, var(--army-green), #0d6f26); color:#fff; } /* Bảng dữ liệu */ table th{ background:var(--army-green); color:#fff; } table tr:nth-child(even){ background:#f7faf7; } table tr:hover{ background:#fff2; } /* Tooltip gợi ý */ [data-tip]:hover::after{ content:attr(data-tip); position:absolute; z-index:9999; background:rgba(0,0,0,.8); color:#fff; padding:.35rem .5rem; border-radius:6px; font-size:12px; transform:translateY(-120%); white-space:nowrap; } /* Ngày hiện tại (nếu có lịch) */ .dmctn-calendar .day.is-today, .calendar .day.today{ background:var(--army-red)!important; color:var(--army-gold)!important; font-weight:700; outline:2px solid #7a0000; } /* Các tiện ích lớp phủ */ .round-pulse{ position:relative; } .round-pulse::after{ content:""; position:absolute; inset:-6px; border:2px solid var(--army-gold); border-radius:999px; animation:dmctn-pulse 1.8s infinite; } @keyframes dmctn-pulse{ 0%{ opacity:.7; transform:scale(.9); } 70%{ opacity:0; transform:scale(1.2); } 100%{ opacity:0; } } /* Lớp kích hoạt an toàn, có thể thêm vào bằng JS nếu muốn: document.documentElement.classList.add('dmctn-army') */ /* === DMCTN Quân Đội: Force .logo image (patch in header.css to win cascade) — TẠO BỞI BÙI VĂN TĨNH === */ .dmctn-header .dmctn-brand .logo{ background: url('/wp-content/themes/dmctn-child-dienmay/assets/images/logo-dmctn-quanham.png') no-repeat center / contain !important; width: 72px !important; height: 56px !important; border-radius: 0 !important; } @media (max-width: 480px){ .dmctn-header .dmctn-brand .logo{ width:60px !important; height:48px !important; } } /* === DMCTN Quân Đội: Data-URI logo injection (no path dependency) — TẠO BỞI BÙI VĂN TĨNH === */ .dmctn-header .dmctn-brand { position:relative; display:flex; align-items:center; gap:8px; } .dmctn-header .dmctn-brand .logo, .dmctn-header .dmctn-brand .logo[aria-hidden="true"] { display:inline-block !important; width:72px !important; height:56px !important; background-image:url('data:image/png;base64,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') !important; background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important; opacity:1 !important; visibility:visible !important; border-radius:0 !important; } /* Backup injector on anchor itself */ .dmctn-header .dmctn-brand::before { content:""; position:absolute; left:10px; top:50%; width:60px; height:52px; transform:translateY(-50%); background-image:url('data:image/png;base64,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') !important; background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important; pointer-events:none; } @media (max-width:480px){ .dmctn-header .dmctn-brand .logo{ width:60px !important; height:48px !important; } .dmctn-header .dmctn-brand::before{ width:50px; height:44px; left:8px; } }