/*
Theme Name: UAV
Theme URI: UAV
Author: UAV
Author URI: UAV
Description: In 2019, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: UAV

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ========TABLE OF CONTENTS==========
00. Body, links, hgroup, paragraphs, general styles
01. Fixed header & Navigation
02. Section Intro (Home)
03. Section About
04. Section Resume
05. Section Portfolio
06. Section Blog
07. Section Contact
08. Footer
09. Loader
10. Responsive design

/*--------------------------------------------------
	00. Body, links, hgroup, paragraphs, general styles
---------------------------------------------------*/
.drone-image svg {
  display: none;
}
.active .drone-image svg {
  display: block;
}
.field .label {
	text-overflow: unset;
    white-space: unset;
    overflow: unset;
	max-width: 190px;
}
.btn:hover{background-color: #f66f1a !important;}
.text-red {color: #e72c2e;}
.text-blue {color: #2487c8;}
.sp-arrow { transform: none;}
.sp-cards {
    width: calc(100% - 200px); }
.dropdown-item > a {width: 100%;}
.mt-100{
	margin-top: 100px !important;
}
body.admin-bar .Duck div#navbar > div.container-full{
	top: 32px !important;
}
h2 > a,
h3 > a{
	font-weight: 500;
}
.pagination li span.page-numbers.current{
	display: block;
	padding: 8px 12px;
	text-decoration: none !important;
	border: 1px solid gray;
	color: black;
	margin: 0 4px;
	border-radius: 5px;
}
a.hi-text-bold{
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	color: #485fc7 !important;
}
.dropdown-item{
	padding: 0;
}
.dropdown-item.active > a{
	font-weight: bold;
}
div.language-selector div.dropdown-menu{
	width: max-content;
}
.mt-50{
	margin-top: 50px;
}
.option.active {
	background: #e3f2fd;
	color: #000;
	font-weight: 600;
}
.text-up{
	text-transform: uppercase;
}

/* ========== Cấu trúc chính ========== */
.wordpress-content {
	max-width: 100%;
	line-height: 1.8;
	font-size: 16px;
	color: #222;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.wordpress-content p,
.wordpress-content ul,
.wordpress-content ol,
.wordpress-content blockquote,
.wordpress-content pre,
.wordpress-content table {
	margin-bottom: 1em;
	text-align: justify;
}

/* ========== Tiêu đề ========== */
.wordpress-content h1,
.wordpress-content h2,
.wordpress-content h3,
.wordpress-content h4,
.wordpress-content h5,
.wordpress-content h6 {
	margin: 0 0 1em;
	line-height: 1.3;
	font-weight: 600;
	color: #111;
}

/* ========== Danh sách ========== */
.wordpress-content ul,
.wordpress-content ol {
	padding-left: 2em;
}

/* ========== Liên kết ========== */
.wordpress-content a {
	color: #0073aa;
	text-decoration: underline;
	transition: color 0.2s ease;
}
.wordpress-content a:hover {
	color: #005177;
}

/* ========== Ảnh & figure ========== */
.wordpress-content img {
	max-width: 100%;
	height: auto;
	display: block;
}
.wordpress-content figure {
	margin: 1.5em 0;
	text-align: center;
}
.wordpress-content figcaption {
	font-size: 0.9em;
	color: #666;
	margin-top: 0.5em;
}

/* ========== Blockquote ========== */
.wordpress-content blockquote {
	border-left: 4px solid #0073aa;
	padding-left: 1em;
	color: #555;
	font-style: italic;
	background: #f9f9f9;
}

/* ========== Bảng ========== */
.wordpress-content table {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 1.5em;
}
.wordpress-content th,
.wordpress-content td {
	border: 1px solid #ddd;
	padding: 8px 12px;
}
.wordpress-content th {
	background: #f5f5f5;
	font-weight: 600;
}

/* ========== Code & Pre ========== */
.wordpress-content pre {
	background: #f4f4f4;
	padding: 1em;
	border-radius: 4px;
	overflow-x: auto;
}
.wordpress-content code {
	background: #f4f4f4;
	padding: 0.2em 0.4em;
	border-radius: 3px;
	font-family: Consolas, monospace;
	font-size: 0.95em;
}

/* ========== Căn trái / phải / giữa (chuẩn WP) ========== */
.wordpress-content .alignleft {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1em;
}
.wordpress-content .alignright {
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1em;
}
.wordpress-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	clear: both;
}

/* ========== Ảnh có chú thích (caption) ========== */
.wordpress-content .wp-caption {
	max-width: 100%;
	text-align: center;
	margin-bottom: 1.5em;
}
.wordpress-content .wp-caption img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}
.wordpress-content .wp-caption-text {
	font-size: 0.9em;
	color: #666;
	margin-top: 0.5em;
}

/* ========== Gallery (Gutenberg hoặc Classic) ========== */
.wordpress-content .gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: center;
}
.wordpress-content .gallery-item {
	flex: 1 1 150px;
	text-align: center;
}
.wordpress-content .gallery img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* ========== Clearfix ========== */
.wordpress-content::after {
	content: "";
	display: block;
	clear: both;
}

/* ========== Gutenberg block hỗ trợ cơ bản ========== */
.wordpress-content .wp-block-image {
	margin: 1.5em 0;
	text-align: center;
}
.wordpress-content .wp-block-image img {
	display: inline-block;
	height: auto;
}
.wordpress-content .wp-block-quote {
	border-left: 4px solid #0073aa;
	padding-left: 1em;
	background: #f9f9f9;
	margin: 1.5em 0;
}
.wordpress-content .wp-block-table {
	border-collapse: collapse;
	width: 100%;
}
.wordpress-content .wp-block-table th,
.wordpress-content .wp-block-table td {
	border: 1px solid #ddd;
	padding: 8px 12px;
}




.ec {
  position: relative;
  overflow: hidden;
}
.ec-track {
  display: flex;
  gap: 12px;
  padding: 40px 0;
  transition: transform .6s ease;
}
.ec-slide {
  flex: 0 0 80%;
  position: relative;
  opacity: .6;
  transform: scale(.9);
  transition: transform .4s ease, opacity .3s ease;
}
@media (min-width:900px) {
  .ec-slide { flex-basis: 40%; }
}
.ec-slide.active {
  transform: scale(1.1);
  opacity: 1;
  z-index: 2;
}
.ec-media {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 12px;
  filter: opacity(.5);
  transition: filter .3s ease, border .3s ease, box-shadow .3s ease;
}
.ec-slide.active .ec-media {
  border: 2px solid var(--primary-main);
  filter: brightness(1);
  box-shadow: 0 12px 40px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.15);
}
.ec-info {
  padding: 24px 4px;
  color: #0a0a0a;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.ec-slide.active .ec-info {
  opacity: 1;
  transform: translateY(0);
}
.ec-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.ec-desc {
  font-size: 14px;
  line-height: 120%;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #0a0a0a;
}
.ec-arrow {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
.ec-arrow.prev { right: 64px; }




















.Duck .btn{
	color: #fff !important;
}
.Duck .btn.btn-black{
	color: #000 !important;
}
div.mobile-menu > li.menu-item{
	padding: 8px 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
}
div.mobile-menu > li.menu-item > a{
	font-weight: normal;
}


        .bg-st {
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle at center, #e4e4e4 0%, #ffffff 80%);
            perspective: 1000px;
            overflow: hidden;
        }

        .sphere {
            scale: 1.2;
            width: calc(280px * 2);
            height: calc(280px * 2 - 30px);
            position: relative;
            transform-style: preserve-3d;
            animation: spin 20s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotateX(0deg) rotateY(90deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(deg);
            }
        }

        .band {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-style: preserve-3d;
            /* IMPORTANT: we'll center the band with translate(-50%,-50%) in JS */
        }

        .tile {
            position: absolute;
            /* đặt tile ở chính giữa band làm tâm quay */
            top: 50%;
            left: 50%;
            width: 60px;
            height: 44px;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(9, 9, 9, 0.74);
        }

        .tile img {
            width: 100%;
            height: 100% !important;
            object-fit: cover;
            display: block;
        }
.solution-title > a{
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
}



.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* Mỗi ảnh có vùng cố định */
.gallery .col {
  width: 300px;      /* cố định chiều rộng */
      max-width: 271px;
  overflow: hidden;
  border-radius: 8px;
  flex: 0 0 auto;    /* không cho co giãn */
}

.gallery .col img {
  width: 100%;
  /* height: 100%; */
      aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.Duck .gallery .col {
    flex: unset !important;
}
.Duck .gallery {
    justify-content: flex-start;}

/* Mobile: xếp dọc */
@media (max-width: 768px) {
  .gallery {
    flex-direction: column;
    align-items: center;
  }
  div.mobile-menu > .navbar-item{
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
	}
	div.mobile-menu > .navbar-item span.icon{
		display: none;
	}
  .sp-content, .sp-title {
    width: 100% !important;
  }
  .sp-tag {
    padding: 0px;
  }
}